wip

-manier van afspraken maken veranderd in de backend ivm meerdere bedrijven gebruiker
 -email is aangepast op bedrijf en gebruiker
 -dropdown voor instellingen toegevoegd

.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-to-tst.yml

@@ -0,0 +1,137 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches:
+      - develop
+    tags:
+      - "docker-build-*"
+
+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": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all 🚀 *Build gestart!* Een nieuwe build is begonnen voor de repository *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+
+
+      # Stap 3: Inloggen bij Docker Hub
+      - name: Log in to Docker Hub
+        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 }}
+          username: ${{ secrets.ALPINE_USER }}
+          password: ${{ secrets.ALPINE_PASSWORD }}
+          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": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all ✅ *Build is geslaagd!* Versie '"$VERSION"'-SNAPSHOT staat klaar op https://test-paypoint.melvanveen.nl\n\n*Changelog:*\n'"${COMMITS}"'"
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+
+  notify-failure:
+    needs: [ build-and-push, deploy ]
+    runs-on: ubuntu-latest
+    if: failure()
+
+    steps:
+      - name: Notify Mattermost via Bot on failure
+        env:
+          MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
+          REPO: ${{ gitea.repository }}
+          BRANCH: ${{ gitea.ref }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer $MATTERMOST_BOT_TOKEN" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all ❌ *Build gefaald!* De pipeline is stukgelopen voor *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts

.github/workflows/deploy-docker.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - main
-    tags:
-      - "docker-build-*"
 
 jobs:
   build-and-push:

Dockerfile-tst

@@ -0,0 +1,22 @@
+# Gebruik een multi-architecture versie van Node
+FROM node:23.0.0 as build
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+RUN npm install -g @angular/cli
+
+COPY . .
+
+RUN ng build --configuration=test
+
+# Gebruik een multi-architecture versie van Nginx
+FROM nginx:latest
+
+# Kopieer de gecompileerde bestanden van Angular naar de Nginx-webserver
+COPY --from=build app/dist/pay-point/browser /usr/share/nginx/html
+
+EXPOSE 80

angular.json

@@ -53,8 +53,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
+                  "maximumWarning": "500MB",
-                  "maximumError": "1MB"
+                  "maximumError": "1000MB"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -67,7 +67,21 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            },
+            "test": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.test.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"
@@ -80,6 +94,9 @@
             },
             "development": {
               "buildTarget": "PayPoint:build:development"
+            },
+            "test": {
+              "buildTarget": "PayPoint:build:test"
             }
           },
           "defaultConfiguration": "development"

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

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

src/app/components/details/details.component.html

@@ -32,6 +32,7 @@
     tuiButton
     iconStart="@tui.pencil"
     size="s"
+    id="bewerkAfspraak"
     (click)="showEditModal = true"
     type="button">
     Bewerken
@@ -41,6 +42,7 @@
     tuiButton
     iconStart="@tui.trash-2"
     size="s"
+    id="verwijderAfspraak"
     (click)="showDeleteModal = true"
     type="button">
     Verwijderen
@@ -59,6 +61,7 @@
       appearance="outline"
       tuiButton
       size="s"
+      id="bevestigAfspraakVerwijderen"
       (click)="deleteAppointment()"
       type="button">
       Ja, afspraak verwijderen
@@ -67,6 +70,7 @@
       appearance="outline"
       tuiButton
       size="s"
+      id="annuleerAfspraakVerwijderen"
       (click)="showDeleteModal = false"
       type="button">
       Nee, ga terug

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

@@ -5,6 +5,7 @@
       tuiTextfieldLegacy
       formControlName="title"
       type="text"
+      id="titelBewerken"
     />
   </tui-input>
   <div
@@ -17,6 +18,7 @@
       appearance="outline"
       tuiButton
       size="s"
+      [id]="action + '-bewerken'"
       (click)="addAction(action)"
       type="button">{{ action }}
     </button>
@@ -27,6 +29,7 @@
     <tui-combo-box
       [formControl]="control"
       [stringify]="stringify"
+      id="klantBewerken"
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
@@ -38,6 +41,7 @@
     <button
       size="m"
       tuiButton
+      id="nieuweKlantBewerken"
       (click)="toggleCustomerModal()"
       iconStart="@tui.plus"
       type="button">
@@ -53,6 +57,7 @@
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
+        id="datumBewerken"
         [tuiTextfieldLabelOutside]="false"
       >
         Datum
@@ -63,6 +68,7 @@
         formControlName="startTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="vanBewerken"
         [tuiTextfieldLabelOutside]="false">
         Van
       </tui-input-time>
@@ -72,6 +78,7 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="totBewerken"
         [tuiTextfieldLabelOutside]="false"
       >
         Tot
@@ -79,71 +86,18 @@
     </div>
   </div>
   <br>
-  <tui-textarea formControlName="notes">Notities</tui-textarea>
+  <tui-textarea formControlName="notes" id="notitiesBewerken">Notities</tui-textarea>
 </form>
 <br>
 <button
   size="m"
   tuiButton
+  id="afspraakBewerken"
   type="button" (click)="updateAppointment()"
   [tuiAppearanceState]="formIsValid()">
   Afspraak bewerken
 </button>
 
 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="firstName"
-      />
-    </tui-input>
-    <br>
-
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="lastName"
-      />
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        type="email"
-        formControlName="email"
-      />
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"
-      />
-      Klant toevoegen
-    </button>
-  </form>
 </app-modal>

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

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
 import {NgForOf, NgIf} from "@angular/common";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from "@taiga-ui/core";
+import {TuiAlertService, TuiButton, TuiGroup} from "@taiga-ui/core";
 import {
   TuiComboBoxModule,
   TuiInputDateModule,
@@ -17,6 +17,7 @@ import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPi
 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';
 
 @Component({
   selector: 'app-edit-item',
@@ -36,7 +37,7 @@ import {ModalComponent} from '../modal/modal.component';
     TuiStringifyContentPipe,
     TuiFilterByInputPipe,
     ModalComponent,
-    TuiIcon
+    NewCustomerComponent
   ],
   templateUrl: './edit-item.component.html',
   styleUrl: './edit-item.component.scss'
@@ -126,15 +127,8 @@ export class EditItemComponent implements OnInit {
     `${item.firstName} ${item.lastName}`;
 
   saveCustomer() {
-    const firstName = this.customerForm.get('firstName').value
+    this.showNewCustomer = false;
-    const lastName = this.customerForm.get('lastName').value
+    this.getCustomers()
-    const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
   }
 
   getCustomers() {

src/app/components/modal/modal.component.html

@@ -8,6 +8,7 @@
       size="xs"
       tuiIconButton
       type="button"
+      id="sluitModal"
       [style.border-radius.%]="100"
       (click)="closeModal()"
     >

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

@@ -0,0 +1,66 @@
+<form [formGroup]="customerForm">
+  <tui-input
+    formControlName="firstName"
+    tuiTextfieldSize="m"
+    id="voornaam-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Voornaam
+    <input
+      tuiTextfieldLegacy
+      type="text"
+      formControlName="firstName"/>
+  </tui-input>
+  <br>
+  <tui-input
+    formControlName="lastName"
+    tuiTextfieldSize="m"
+    id="achternaam-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Achternaam
+    <input
+      tuiTextfieldLegacy
+      type="text"
+      formControlName="lastName"/>
+  </tui-input>
+  <br>
+  <tui-input
+    formControlName="email"
+    tuiTextfieldSize="m"
+    id="email-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Email
+    <input
+      tuiTextfieldLegacy
+      autocomplete="email"
+      type="email"
+      formControlName="email"/>
+  </tui-input>
+  <br>
+  <tui-input
+    formControlName="phone"
+    tuiTextfieldSize="m"
+    id="telefoon-nieuwe-klant"
+    [tuiTextfieldCleaner]="true">
+    Telefoonnummer
+    <input
+      tuiTextfieldLegacy
+      autocomplete=""
+      type="tel"
+      formControlName="phone"/>
+  </tui-input>
+  <br>
+  <button
+    appearance="secondary"
+    size="m"
+    tuiButton
+    id="klant-toevoegen"
+    [disabled]="customerForm.invalid"
+    [loading]=waiting
+    (click)="saveCustomer()"
+    type="button">
+    <tui-icon
+      icon="@tui.plus"
+      [style.height.rem]="1"/>
+    Klant toevoegen
+  </button>
+</form>

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

@@ -0,0 +1,50 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TuiInputModule} from '@taiga-ui/legacy';
+import {TuiButton, TuiIcon, TuiTextfieldOptionsDirective} from '@taiga-ui/core';
+import {TuiButtonLoading} from '@taiga-ui/kit';
+import {Customer} from '../../models/customer';
+import {CustomerService} from '../../services/customer.service';
+
+@Component({
+  selector: 'app-new-customer',
+  imports: [
+    ReactiveFormsModule,
+    TuiInputModule,
+    TuiTextfieldOptionsDirective,
+    TuiButton,
+    TuiIcon,
+    TuiButtonLoading
+  ],
+  templateUrl: './new-customer.component.html',
+  styleUrl: './new-customer.component.scss'
+})
+export class NewCustomerComponent {
+  waiting: boolean = false;
+  customerForm: FormGroup;
+  @Output() customerAdded: EventEmitter<any> = new EventEmitter();
+  emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+
+  constructor(private customerService: CustomerService) {
+
+    this.customerForm = new FormGroup({
+      firstName: new FormControl('', [Validators.required]),
+      lastName: new FormControl('', [Validators.required]),
+      email: new FormControl('', [Validators.required, Validators.pattern(this.emailRegex)]),
+      phone: new FormControl('', [Validators.required]),
+    })
+  }
+
+  saveCustomer() {
+    const firstName = this.customerForm.get('firstName').value
+    const lastName = this.customerForm.get('lastName').value
+    const email = this.customerForm.get('email').value
+    const phone = this.customerForm.get('phone').value
+    const customer = new Customer(firstName, lastName, email, phone);
+
+    this.customerService.addCustomer(customer).subscribe(() => {
+      this.customerAdded.emit(customer);
+    })
+  }
+}

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

@@ -5,6 +5,7 @@
       tuiTextfieldLegacy
       formControlName="title"
       type="text"
+      id="titel"
     />
   </tui-input>
   <div
@@ -16,6 +17,7 @@
       *ngFor="let action of quickActions"
       appearance="outline"
       tuiButton
+      [attr.id]="action"
       size="s"
       (click)="addAction(action)"
       type="button">{{ action }}
@@ -27,9 +29,11 @@
     <tui-combo-box
       [formControl]="customerControl"
       [stringify]="stringify"
+      id="klant"
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
+        id="klant-input"
         *tuiDataList
         [itemContent]="stringify | tuiStringifyContent"
         [items]="items | tuiFilterByInput"
@@ -38,6 +42,7 @@
     <button
       size="m"
       tuiButton
+      id="klantToevoegen"
       (click)="toggleCustomerModal()"
       iconStart="@tui.plus"
       type="button">
@@ -53,6 +58,7 @@
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
+        id="datum"
         [tuiTextfieldLabelOutside]="false">
         Datum
       </tui-input-date>
@@ -62,6 +68,7 @@
         formControlName="startTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="van"
         [tuiTextfieldLabelOutside]="false">
         Van
       </tui-input-time>
@@ -71,21 +78,22 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="tot"
         [tuiTextfieldLabelOutside]="false">
         Tot
       </tui-input-time>
     </div>
   </div>
   <span *ngIf="appointmentForm.get('endTime')?.errors?.['endTimeInvalid']">
-      	<tui-error [error]="timeError"/>
+      	<tui-error id="timeError" [error]="timeError"/>
     </span>
   <br>
   <ng-container *ngIf="appointments.length > 0">
     <h3>Geplande afspraken die dag:</h3>
     <div class="appointments-container">
-      <div *ngFor="let appointment of appointments" class="appointment-object">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title.toLowerCase() + '-' + appointment.startDate + '-' + appointment.startHour + appointment.startMinute">
-        <span class="title">{{ appointment.title }}</span>
+        <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
-        <span class="name">
+        <span class="name" id="titel-naam">
         <tui-icon
           icon="@tui.user"
           [style.font-size.rem]="1"
@@ -102,66 +110,19 @@
       </div>
     </div>
   </ng-container>
-
   <br>
-  <tui-textarea formControlName="notes">Notities</tui-textarea>
+  <tui-textarea formControlName="notes" id="notities">Notities</tui-textarea>
 </form>
 <br>
 <button
   size="m"
   tuiButton
   type="button" (click)="registerAppointment()"
+  id="afspraakMaken"
   [tuiAppearanceState]="formIsValid()">
   Afspraak maken
 </button>
 
 <app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true">
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="firstName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true">
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        formControlName="lastName"/>
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true">
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        type="email"
-        formControlName="email"/>
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      [loading]=waiting
-      (click)="saveCustomer()"
-      type="button">
-      <tui-icon
-        icon="@tui.plus"
-        [style.height.rem]="1"/>
-      Klant toevoegen
-    </button>
-  </form>
 </app-modal>

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

@@ -11,18 +11,14 @@ import {
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
 import {Appointment} from '../../models/appointment';
-import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
+import {TuiDay, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
-import {
+import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
-  TuiButtonLoading,
-  TuiDataListWrapperComponent,
-  TuiFilterByInputPipe,
-  TuiStringifyContentPipe
-} from '@taiga-ui/kit';
 import {Customer} from '../../models/customer';
 import {CustomerService} from '../../services/customer.service';
 import {ModalComponent} from '../modal/modal.component';
 import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
+import {NewCustomerComponent} from '../new-customer/new-customer.component';
 
 @Component({
   selector: 'app-new-item',
@@ -43,8 +39,8 @@ import {timeAfterStartValidator} from '../../models/validators/time-after-start-
     TuiFilterByInputPipe,
     ModalComponent,
     TuiIcon,
-    TuiButtonLoading,
+    TuiError,
-    TuiError
+    NewCustomerComponent
   ],
   templateUrl: './new-item.component.html',
   styleUrl: './new-item.component.scss'
@@ -72,27 +68,15 @@ export class NewItemComponent implements OnInit {
     this.customerForm = new FormGroup({
       firstName: new FormControl('', Validators.required),
       lastName: new FormControl('', Validators.required),
-      email: new FormControl('', Validators.required),
+      email: new FormControl('', [Validators.required, Validators.email]),
     })
-    this.appointmentForm.get('startTime').setValue(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required)
+    this.appointmentForm.get('startTime').setValue('', Validators.required)
-    this.appointmentForm.get('endTime').setValue(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')])
+    this.appointmentForm.get('endTime').setValue('', [Validators.required, timeAfterStartValidator('startTime')])
     this.appointments.sort((a, b) => {
       return a.startHour - b.startHour || a.startMinute - b.startMinute;
     });
   }
 
-  getEndTime(): Date {
-    const endTime = new Date(this.today); // Kopieer startTime
-    endTime.setMinutes(endTime.getMinutes() + 30); // 30 minuten toevoegen
-
-    // Controleer of de dag nog steeds hetzelfde is
-    if (endTime.getDate() !== this.today.getDate()) {
-      endTime.setHours(23, 59, 59, 999); // Zet naar 23:59:59 als het overloopt
-    }
-
-    return endTime;
-  }
-
   registerAppointment() {
     const title = this.appointmentForm.get('title').value
     const description = this.appointmentForm.get('notes').value
@@ -133,15 +117,8 @@ export class NewItemComponent implements OnInit {
     `${item.firstName} ${item.lastName}`;
 
   saveCustomer() {
-    const firstName = this.customerForm.get('firstName').value
+    this.showNewCustomer = false;
-    const lastName = this.customerForm.get('lastName').value
+    this.getCustomers()
-    const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
   }
 
   getCustomers() {

src/app/models/company.ts

@@ -0,0 +1,9 @@
+export class Company {
+  id: number;
+  name: string;
+  email: string;
+  img_href: string;
+  address: string;
+  postal_code: string;
+  city: string;
+}

src/app/models/customer.ts

@@ -3,11 +3,13 @@ export class Customer {
   firstName: string;
   lastName: string;
   email: string;
+  phone: string;
 
 
-  constructor(firstName: string, lastName: string, email: string) {
+  constructor(firstName: string, lastName: string, email: string, phone: string) {
     this.firstName = firstName;
     this.lastName = lastName;
     this.email = email;
+    this.phone = phone
   }
 }

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

@@ -5,21 +5,33 @@
       iconStart="@tui.chevron-left"
       size="m"
       tuiIconButton
+      id="vorigeDag"
       (click)="previousDay()"
       type="button">
     </button>
-    <h1 class="date" (click)="toggleCalendar()">{{ getDate() }}</h1>
+    <h1 class="date" id="geselecteerdeDatum" (click)="toggleCalendar()">{{ getDate() }}
+      <tui-icon
+        *ngIf="!showCalendar"
+        icon="@tui.chevron-down"
+        [style.color]="'var(--tui-background-accent-1)'"/>
+      <tui-icon
+        *ngIf="showCalendar"
+        icon="@tui.chevron-up"
+        [style.color]="'var(--tui-background-accent-1)'"/>
+    </h1>
     <button
       appearance="primary"
       iconStart="@tui.chevron-right"
       size="m"
       tuiIconButton
+      id="volgendeDag"
       (click)="nextDay()"
       type="button">
     </button>
   </div>
   <div class="calendar" *ngIf="showCalendar">
     <tui-calendar
+      id="calenderDatum"
       [value]="value"
       (dayClick)="onDayClick($event)"
     />
@@ -30,6 +42,7 @@
       appearance="secondary"
       size="m"
       tuiButton
+      id="vandaag"
       (click)="setToday()"
       type="button">
       Vandaag
@@ -38,7 +51,8 @@
       appearance="secondary"
       size="m"
       tuiButton
-      (click)="isModalOpen = true"
+      id="afspraakMaken"
+      (click)="showNewItem = true"
       type="button">
       <tui-icon
         icon="@tui.plus"
@@ -46,6 +60,23 @@
       />
       Afspraak maken
     </button>
+    <button
+      appearance="secondary"
+      size="m"
+      tuiButton
+      id="instellingen"
+      (click)="openSettings()"
+      [tuiDropdown]="dropdownContent"
+      [tuiDropdownManual]="open"
+      type="button">
+      <tui-icon
+        icon="@tui.settings"
+        [style.height.rem]="1">
+      </tui-icon>
+    </button>
+    <ng-template #dropdownContent>
+      <div class="dropdown">But there is nothing to choose...</div>
+    </ng-template>
   </div>
   <div class="content">
     <div class="agenda-container">
@@ -54,6 +85,7 @@
 
         <div *ngFor="let appointment of getAppointmentsForHour(hour)"
              class="appointment"
+             [attr.id]="'afspraak-'+appointment.id"
              (click)="selectAppointment(appointment)"
              [ngClass]="{ 'large': (getAppointmentHeight(appointment) > 50) }"
              [ngStyle]="getInlineStyles(appointment)">
@@ -73,7 +105,7 @@
   </div>
 </div>
 
-<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="isModalOpen">
+<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="showNewItem">
   <app-new-item [appointments]="appointments" [appointmentForm]="appointmentForm"
                 (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
 </app-modal>

src/app/pages/agenda/agenda.component.ts

@@ -11,7 +11,7 @@ import {
   TuiTextareaModule,
   TuiTextfieldControllerModule
 } from '@taiga-ui/legacy';
-import {TuiDay, TuiTime} from '@taiga-ui/cdk';
+import {TuiDay, TuiMonth, TuiTime} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {DetailsComponent} from '../../components/details/details.component';
 import {DateFormatter} from '../../utils/date-formatter';
@@ -40,13 +40,14 @@ export class AgendaComponent implements OnInit {
 
   timeSlots: number[] = Array.from({length: 24}, (_, i) => i); // 24 uren
   appointments: Appointment[] = [];
-  isModalOpen = false
+  showNewItem = false
   today = new Date()
   selectedDate = new Date()
   waiting: boolean = false;
   selectedAppointment: Appointment;
   protected value: TuiDay | null = null;
   showCalendar: boolean = false;
+  open = false
 
   private readonly alerts = inject(TuiAlertService);
   protected appointmentForm = new FormGroup({
@@ -60,7 +61,7 @@ export class AgendaComponent implements OnInit {
   registerAppointment(title: string): void {
     this.getAppointmentsByDate(this.selectedDate);
     this.waiting = false
-    this.isModalOpen = false
+    this.showNewItem = false
     this.showNotification(title)
     this.resetForms()
   }
@@ -187,7 +188,7 @@ export class AgendaComponent implements OnInit {
   }
 
   closeNewItemModal() {
-    this.isModalOpen = false
+    this.showNewItem = false
     this.resetForms()
   }
 
@@ -202,5 +203,35 @@ export class AgendaComponent implements OnInit {
   appointmentIsEdited($event: Appointment) {
     this.getAppointmentsByDate(this.selectedDate);
   }
+
+  protected firstMonth = TuiMonth.currentLocal().append({month: -1});
+
+  protected middleMonth = TuiMonth.currentLocal();
+
+  protected lastMonth = TuiMonth.currentLocal().append({month: 2});
+
+  protected hoveredItem: TuiDay | null = null;
+
+  protected onMonthChangeFirst(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -1});
+    this.middleMonth = month
+    this.lastMonth = month.append({month: 2});
+  }
+
+  protected onMonthChangeMiddle(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -1});
+    this.middleMonth = month;
+    this.lastMonth = month.append({month: 1});
+  }
+
+  protected onMonthChangeLast(month: TuiMonth): void {
+    this.firstMonth = month.append({month: -2});
+    this.middleMonth = month.append({month: -1});
+    this.lastMonth = month;
+  }
+
+  openSettings() {
+    this.open = !this.open
+  }
 }
 

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

@@ -6,35 +6,40 @@
   <div class="navbar">
     <img src="assets/logo-minimal.png" alt="App Logo" class="img-fluid">
     <ul>
-      <li><a routerLink="/home/agenda" routerLinkActive="active">Agenda</a></li>
+      <li><a routerLink="/home/agenda" id="agenda" routerLinkActive="active">Agenda</a></li>
-      <li><a routerLink="/home/klanten" routerLinkActive="active">Klanten</a></li>
+      <li><a routerLink="/home/klanten" id="klanten" routerLinkActive="active">Klanten</a></li>
     </ul>
     <hr/>
     <button
       tuiChevron
       type="button"
+      id="userMenu"
       [tuiDropdown]="dropdownContent"
       [tuiDropdownManual]="open"
       [tuiObscuredEnabled]="open"
       (click)="onClick()"
       (tuiActiveZoneChange)="onActiveZone($event)"
-      (tuiObscured)="onObscured($event)"
+      (tuiObscured)="onObscured($event)">
-    >
       <tui-avatar src="{{getInitials()}}"/>
-      <ng-template #dropdownContent>
+
-        <div class="dropdown">
+
-          <h3>{{ fullName }}</h3>
+
-          <button
-            size="m"
-            tuiButton
-            type="button"
-            (click)="logout()"
-          >
-            Uitloggen
-          </button>
-        </div>
-      </ng-template>
     </button>
+    <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>
+      </div>
+    </ng-template>
   </div>
 </header>
 

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

@@ -1,6 +1,7 @@
 .navbar {
   background-color: #f8f9fa;
-  display: flex
+  display: flex;
+  align-items: center;
 }
 
 ul {
@@ -48,11 +49,12 @@ tui-avatar {
   line-height: 1.25rem;
   padding: 0.25rem 0.75rem;
   margin-left: 4px;
-  margin-right: 4px;
+  margin-right: 20px;
   margin-bottom: 8px;
+  min-width: 200px;
 }
 
-.t-content {
+ui-scrollbar.t-scroll.ng-tns-c452864359-10._native-hidden {
   margin-right: 24px;
 }
 

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

@@ -1,21 +1,26 @@
 import {Component, OnInit} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Router, RouterLink, RouterLinkActive, RouterModule} from '@angular/router';
 import {TuiAvatar, TuiChevron,} from '@taiga-ui/kit';
 import {AuthService} from '../../services/auth.service';
 import {User} from '../../models/user';
 import {TuiButton, TuiDropdown} from '@taiga-ui/core';
 import {TuiActiveZone, TuiObscured} from '@taiga-ui/cdk';
+import {environment} from '../../../environments/environment';
+import {Company} from '../../models/company';
+import {CompanyService} from '../../services/company.service';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
   selector: 'app-home',
-  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron],
+  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron, TuiSelectModule, ReactiveFormsModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
 export class HomeComponent implements OnInit {
   user: User
   fullName: string
+  companies: Company[]
 
   getInitials(): string {
     this.user = this.authService.getUserInfo();
@@ -39,17 +44,29 @@ export class HomeComponent implements OnInit {
     this.open = active && this.open;
   }
 
-  constructor(private authService: AuthService, private router: Router) {
+  constructor(private authService: AuthService, private router: Router, private companyService: CompanyService) {
   }
 
   ngOnInit(): void {
     if (!this.authService.isAuthenticated()) {
       this.router.navigate(['login']);
+    } else {
+      this.companyService.getCompanies().subscribe(
+        response => {
+          this.companies = response
+          this.authService.setCurrentCompany(response[0])
+          console.log(this.companies)
+        }
+      )
     }
+
   }
 
   logout() {
     this.authService.logout();
     this.router.navigate(['login']);
   }
+
+  protected readonly environment = environment;
+  currentCompany: Company;
 }

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

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

src/app/pages/klanten/klanten.component.scss

@@ -15,6 +15,7 @@ h2 {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  overflow-y: unset;
 }
 
 .styled-table {
@@ -25,7 +26,7 @@ h2 {
   text-align: left; /* Tekst uitlijning */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Zachte schaduw */
   border-radius: 10px; /* Afgeronde hoeken */
-  overflow: hidden; /* Hoeken correct afronden */
+  overflow: scroll; /* Hoeken correct afronden */
 }
 
 .styled-table thead {
@@ -39,6 +40,12 @@ h2 {
   padding: 12px 15px; /* Ruimte binnen de cellen */
 }
 
+.styled-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
 .styled-table tbody tr {
   border-bottom: 1px solid #dddddd; /* Lichte scheidingslijn */
 }
@@ -60,6 +67,7 @@ h2 {
 .toolbar {
   button {
     margin-left: 8px;
+    position: sticky;
   }
 
   margin-bottom: 12px;
@@ -69,4 +77,7 @@ h2 {
 
 }
 
+.results{
+  overflow-y: scroll;
+}
 

src/app/pages/klanten/klanten.component.ts

@@ -7,6 +7,7 @@ import {ModalComponent} from '../../components/modal/modal.component';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {TuiInputCopyModule, TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {CustomerDetailsComponent} from '../../components/customer-details/customer-details.component';
+import {NewCustomerComponent} from '../../components/new-customer/new-customer.component';
 
 @Component({
   selector: 'app-klanten',
@@ -20,7 +21,8 @@ import {CustomerDetailsComponent} from '../../components/customer-details/custom
     TuiInputCopyModule,
     TuiInputModule,
     TuiTextfieldControllerModule,
-    CustomerDetailsComponent
+    CustomerDetailsComponent,
+    NewCustomerComponent
   ],
   templateUrl: './klanten.component.html',
   styleUrl: './klanten.component.scss'
@@ -48,15 +50,8 @@ export class KlantenComponent implements OnInit {
   }
 
   saveCustomer() {
-    const firstName = this.customerForm.get('firstName').value
+    this.showNewCustomer = false;
-    const lastName = this.customerForm.get('lastName').value
+    this.getCustomers()
-    const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
   }
 
   getCustomers() {

src/app/pages/login/login.component.html

@@ -6,18 +6,20 @@
       </header>
       <tui-textfield>
         <label tuiLabel>Gebruikersnaam</label>
-        <input formControlName="username" placeholder="Voer je gebruikersnaam in" tuiTextfield/>
+        <input formControlName="username" placeholder="Voer je gebruikersnaam in" id="username" tuiTextfield/>
       </tui-textfield>
       <tui-textfield>
         <label tuiLabel>Wachtwoord</label>
-        <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" tuiTextfield/>
+        <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" id="password" tuiTextfield/>
       </tui-textfield>
       <tui-error [error]="computedError"/>
       <footer>
-        <button tuiButton class="custom-button" type="submit" [disabled]="form.invalid" (click)="login()">
+        <button tuiButton class="custom-button" id="inloggen" type="submit" [disabled]="form.invalid" (click)="login()">
           Inloggen
         </button>
       </footer>
+<!--      <br>-->
+      <p>{{appVersion}}</p>
     </form>
   </div>
 </div>

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

@@ -1,49 +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;
-}
-
-.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;
+/* Het formulier zelf */
-  --c3: #3c3c3c;
+form[tuiForm] {
-
+  background: white;
-  background: repeating-conic-gradient(
+  border-radius: 24px;
-      from 30deg,
+  padding: 2rem;
-      #0000 0 120deg,
+  max-width: 32rem; /* 512px */
-      var(--c3) 0 180deg
+  width: 100%;
-  ) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
+  box-sizing: border-box;
-  repeating-conic-gradient(
+  text-align: center;
-      from 30deg,
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-      var(--c1) 0 60deg,
+}
-      var(--c2) 0 120deg,
+
-      var(--c3) 0 180deg
+/* Logo */
-  );
+.header {
-  background-size: var(--s) calc(var(--s) * 0.577);
+  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) {
+  form[tuiForm] {
+    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

@@ -7,6 +7,7 @@ import {AuthService} from '../../services/auth.service';
 import {UserDto} from '../../models/user-dto';
 import {HttpErrorResponse} from '@angular/common/http';
 import {TuiValidationError} from '@taiga-ui/cdk';
+import {environment} from '../../../environments/environment';
 
 @Component({
   selector: 'app-login',
@@ -26,6 +27,7 @@ import {TuiValidationError} from '@taiga-ui/cdk';
 export class LoginComponent {
   form: FormGroup;
   protected enabled = false;
+  appVersion = environment.appVersion;
 
   protected error = new TuiValidationError('Ongeldige gebruikersnaam of wachtwoord.');
 

src/app/services/appointment.service.ts

@@ -1,15 +1,16 @@
 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';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AppointmentService {
-  // baseApi = "http://localhost:8080/api/appointments";
+  baseApi = `${environment.baseApi}/appointments`;
-  baseApi = "https://api.melvanveen.nl/api/appointments";
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private authService: AuthService) {
   }
 
   getAllAppointments() {
@@ -24,7 +25,8 @@ export class AppointmentService {
   }
 
   addAppointment(appointment: Appointment) {
-    return this.http.post(`${this.baseApi}`, appointment);
+    let companyId = this.authService.getCurrentCompany().id
+    return this.http.post(`${this.baseApi}/${companyId}`, appointment);
   }
 
   deleteAppointment(appointment: Appointment) {

src/app/services/auth.service.ts

@@ -3,14 +3,16 @@ import {HttpClient} from '@angular/common/http';
 import {JwtHelperService} from '@auth0/angular-jwt';
 import {Observable} from 'rxjs';
 import {jwtDecode} from 'jwt-decode';
+import {environment} from '../../environments/environment';
+import {Company} from '../models/company';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
-  // private baseApi = 'http://localhost:8080/api/auth/login';
+  baseApi = `${environment.baseApi}/auth/login`;
-  baseApi = "https://api.melvanveen.nl/api/auth/login";
   jwtHelper = new JwtHelperService();
+  currentCompany: Company;
 
   constructor(private http: HttpClient) {
   }
@@ -39,5 +41,15 @@ export class AuthService {
     }
     return null;
   }
+
+  setCurrentCompany(company: Company): void {
+    this.currentCompany = company;
+    console.log(this.currentCompany);
+  }
+
+  getCurrentCompany(): Company {
+    console.log(this.currentCompany);
+    return this.currentCompany;
+  }
 }
 

src/app/services/company.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {environment} from '../../environments/environment';
+import {Company} from '../models/company';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CompanyService {
+  baseApi = `${environment.baseApi}/company`;
+
+  constructor(private http: HttpClient) {
+  }
+
+  getCompanies(): Observable<Company[]> {
+    return this.http.get<Company[]>(`${this.baseApi}`);
+  }
+}

src/app/services/customer.service.ts

@@ -2,14 +2,13 @@ import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Customer} from '../models/customer';
 import {Observable} from 'rxjs';
+import {environment} from '../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class CustomerService {
-  // baseApi = "http://localhost:8080/api/customers";
+  baseApi = `${environment.baseApi}/customers`;
-  baseApi = "https://api.melvanveen.nl/api/customers";
-
 
   constructor(private http: HttpClient) {
   }

src/environments/environment.development.ts

@@ -0,0 +1,7 @@
+import { version } from '../../package.json';
+
+export const environment = {
+  baseApi: 'http://localhost:8080/api',
+  production: false,
+  appVersion: version + '-LOCAL'
+};

src/environments/environment.test.ts

@@ -0,0 +1,7 @@
+import { version } from '../../package.json';
+
+export const environment = {
+  baseApi: 'https://api-paypoint-test.melvanveen.nl/api',
+  production: false,
+  appVersion: version + '-SNAPSHOT'
+};

src/environments/environment.ts

@@ -0,0 +1,7 @@
+import { version } from '../../package.json';
+
+export const environment = {
+  baseApi: 'https://api.melvanveen.nl/api',
+  production: true,
+  appVersion: version
+};

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