From 19b7b721c836c24a96b0eeb8a51d5ef8a03b3bf8 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 09:43:47 +0100
Subject: [PATCH 01/12] change structure of checkIn form

---
 .../check-in-base-informations.component.html |  34 -----
 .../check-in-base-informations.component.ts   |  10 --
 .../check-in-form-metric.component.html       |   6 -
 .../check-in-form.component.html              | 142 ++++++++++--------
 .../check-in-form/check-in-form.component.ts  |  34 ++++-
 5 files changed, 110 insertions(+), 116 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
index 358d08b966..e1fcb4478d 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
@@ -1,39 +1,5 @@
 <form [formGroup]="dialogForm" class="d-flex flex-column">
   <!--    Changeinfo   -->
-  <mat-label class="mb-2 text-black">Veränderungen seit letztem Check-in (optional)</mat-label>
-  <textarea
-    [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
-    class="w-100 big-dialog-form-field"
-    formControlName="changeInfo"
-    [attr.data-testId]="'changeInfo'"
-  ></textarea>
-  <div *ngIf="isTouchedOrDirty('changeInfo')">
-    <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
-      <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-    </mat-error>
-  </div>
 
   <!--    Initiatives   -->
-  <mat-label class="mt-3 text-black mb-2">Massnahmen (optional)</mat-label>
-  <textarea
-    [ngClass]="formInputCheck(dialogForm, 'initiatives')"
-    class="w-100 big-dialog-form-field"
-    formControlName="initiatives"
-    [attr.data-testId]="'initiatives'"
-  ></textarea>
-  <div *ngIf="isTouchedOrDirty('initiatives')">
-    <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
-      <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-    </mat-error>
-  </div>
-
-  <div *ngIf="getActions().length != 0" class="mt-2">
-    <mat-label class="text-black">Action Plan</mat-label>
-    <div *ngFor="let action of getActions(); let i = index" class="d-flex flex-row mt-2">
-      <mat-checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
-      <div class="action-list-item flex-fill">
-        {{ action.action }}
-      </div>
-    </div>
-  </div>
 </form>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
index c3b981a0b6..8a26d99874 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
@@ -23,14 +23,4 @@ export class CheckInBaseInformationsComponent {
     const errors = this.dialogForm.get(name)?.errors;
     return errors == null ? [] : Object.keys(errors);
   }
-
-  changeIsChecked(event: any, index: number) {
-    const actions = this.dialogForm.value.actionList;
-    actions[index] = { ...actions[index], isChecked: event.checked };
-    this.dialogForm.patchValue({ actionList: actions });
-  }
-
-  getActions(): Action[] {
-    return this.dialogForm.controls['actionList'].value;
-  }
 }
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
index e9269f4519..e366c4c1b8 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -22,10 +22,4 @@
       </div>
     </div>
   </div>
-  <div class="d-flex flex-column justify-content-start align-items-start ms-5">
-    <mat-label
-      >Confidence um Target ({{ calculateTarget() | unitValueTransformation: keyResult.unit }}) zu erreichen</mat-label
-    >
-    <app-confidence [edit]="true" [checkIn]="checkIn" class="bg-keyResult-detail-attribute"></app-confidence>
-  </div>
 </div>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index 12b188273a..6f2f98c781 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -1,75 +1,97 @@
-<div mat-dialog-content class="dialog-padding">
-  <app-dialog-header *ngIf="!this.checkIn.id" [dialogTitle]="'Check-in erfassen ' + getStepLabel()"></app-dialog-header>
-  <app-dialog-header
-    *ngIf="this.checkIn.id"
-    [dialogTitle]="'Check-in bearbeiten ' + getStepLabel()"
-  ></app-dialog-header>
-  <!--  First part of dialog-->
-  <div *ngIf="!continued">
-    <p class="fs-6 mt-1 text-black">Key Result</p>
-    <p class="ms-2 mt-2 text-black linebreak">{{ keyResult.title }}</p>
-    <form [formGroup]="dialogForm" class="d-flex flex-column mt-3">
-      <!--      Custom input which depends on type of keyResult-->
-      <app-check-in-form-metric
-        *ngIf="keyResult.keyResultType === 'metric'"
-        [keyResult]="getKeyResultMetric()"
-        [checkIn]="checkIn"
-        [dialogForm]="dialogForm"
-      ></app-check-in-form-metric>
-      <app-check-in-form-ordinal
-        *ngIf="keyResult.keyResultType === 'ordinal'"
-        [keyResult]="getKeyResultOrdinal()"
-        [checkIn]="checkIn"
-        [dialogForm]="dialogForm"
-      ></app-check-in-form-ordinal>
-    </form>
-  </div>
-  <!--  Second part of dialog-->
-  <div *ngIf="continued">
-    <app-check-in-base-informations [dialogForm]="dialogForm"></app-check-in-base-informations>
-  </div>
-  <!--    Buttons to submit the check-in-->
+<div class="dialog-padding" mat-dialog-content>
+  <app-dialog-header *ngIf="!this.checkIn.id" [dialogTitle]="'Check-in erfassen'"></app-dialog-header>
+  <app-dialog-header *ngIf="this.checkIn.id" [dialogTitle]="'Check-in bearbeiten'"></app-dialog-header>
+
+  <p class="fs-6 text-black">Key Result</p>
+  <p class="text-black linebreak">{{ keyResult.title }}</p>
+
+  <section *ngIf="getActions()?.length != 0">
+    <mat-label class="text-black">Action Plan</mat-label>
+    <div *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
+      <mat-checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
+      <div class="action-list-item flex-fill">
+        {{ action.action }}
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <mat-label class="text-black">Veränderungen seit letztem Check-in (optional)</mat-label>
+    <textarea
+      [attr.data-testId]="'changeInfo'"
+      [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
+      class="w-100 big-dialog-form-field"
+      formControlName="changeInfo"
+    ></textarea>
+    <div *ngIf="isTouchedOrDirty('changeInfo')">
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
+        <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
+      </mat-error>
+    </div>
+  </section>
+
+  <form [formGroup]="dialogForm" class="d-flex flex-column">
+    <app-check-in-form-metric
+      *ngIf="keyResult.keyResultType === 'metric'"
+      [checkIn]="checkIn"
+      [dialogForm]="dialogForm"
+      [keyResult]="getKeyResultMetric()"
+    ></app-check-in-form-metric>
+    <app-check-in-form-ordinal
+      *ngIf="keyResult.keyResultType === 'ordinal'"
+      [checkIn]="checkIn"
+      [dialogForm]="dialogForm"
+      [keyResult]="getKeyResultOrdinal()"
+    ></app-check-in-form-ordinal>
+  </form>
+
+  <section>
+    <mat-label class="mt-3 text-black mb-2">Massnahmen (optional)</mat-label>
+    <textarea
+      [attr.data-testId]="'initiatives'"
+      [ngClass]="formInputCheck(dialogForm, 'initiatives')"
+      class="w-100 big-dialog-form-field"
+      formControlName="initiatives"
+    ></textarea>
+    <div *ngIf="isTouchedOrDirty('initiatives')">
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
+        <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
+      </mat-error>
+    </div>
+  </section>
+
+  <section class="d-flex flex-column justify-content-start">
+    <mat-label
+      >Confidence um Target
+      <span *ngIf="keyResult.keyResultType === 'metric' && convertToMetric(keyResult) as kr">
+        ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }}
+      </span>
+      zu erreichen
+    </mat-label>
+    <app-confidence [checkIn]="checkIn" [edit]="true" class="bg-keyResult-detail-attribute"></app-confidence>
+  </section>
+
   <div class="d-flex flex-row buttons">
     <button
-      mat-flat-button
-      color="primary"
-      *ngIf="!continued"
-      (click)="continued = true"
-      [attr.data-testId]="'check-in-next'"
-    >
-      Weiter
-    </button>
-    <button
-      [disabled]="!this.dialogForm.valid"
       (click)="saveCheckIn()"
-      *ngIf="continued"
-      type="submit"
-      mat-flat-button
-      color="primary"
       [attr.data-testId]="'submit-check-in'"
+      [disabled]="!this.dialogForm.valid"
+      color="primary"
+      mat-flat-button
+      type="submit"
     >
-      <span [attr.data-testId]="'save-checkin'" *ngIf="checkIn.id">Speichern</span>
-      <span [attr.data-testId]="'create-checkin'" *ngIf="!checkIn.id">Check-in erfassen</span>
+      <span *ngIf="checkIn.id">Speichern</span>
+      <span *ngIf="!checkIn.id">Check-in erfassen</span>
     </button>
     <button
+      *ngIf="!continued"
       [attr.data-testId]="'cancel-checkin'"
-      mat-button
+      class="ms-2"
       color="primary"
-      *ngIf="!continued"
+      mat-button
       mat-dialog-close
-      class="ms-2"
     >
       Abbrechen
     </button>
-    <button
-      [attr.data-testId]="'back-in-checkin'"
-      mat-button
-      color="primary"
-      *ngIf="continued"
-      (click)="continued = false"
-      class="ms-2"
-    >
-      Zurück
-    </button>
   </div>
 </div>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts
index e674f9bec2..0ad2f22caf 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts
@@ -10,6 +10,8 @@ import { CheckInService } from '../../../services/check-in.service';
 import { Action } from '../../../types/model/Action';
 import { DATE_FORMAT } from '../../../constantLibary';
 import { ActionService } from '../../../services/action.service';
+import { formInputCheck } from '../../../common';
+import errorMessages from '../../../../../assets/errors/error-messages.json';
 
 @Component({
   selector: 'app-check-in-form',
@@ -22,7 +24,8 @@ export class CheckInFormComponent implements OnInit {
   checkIn!: CheckInMin;
   currentDate: Date;
   continued: boolean = false;
-  protected readonly DATE_FORMAT = DATE_FORMAT;
+  protected readonly formInputCheck = formInputCheck;
+  protected readonly errorMessages: { [key: string]: string } = errorMessages;
 
   dialogForm = new FormGroup({
     value: new FormControl<string>('', [Validators.required]),
@@ -48,6 +51,14 @@ export class CheckInFormComponent implements OnInit {
     this.dialogForm.patchValue({ actionList: this.keyResult.actionList });
   }
 
+  isTouchedOrDirty(name: string) {
+    return this.dialogForm.get(name)?.dirty || this.dialogForm.get(name)?.touched;
+  }
+  getErrorKeysOfFormField(name: string): string[] {
+    const errors = this.dialogForm.get(name)?.errors;
+    return errors == null ? [] : Object.keys(errors);
+  }
+
   setDefaultValues() {
     this.dialogForm.controls.actionList.setValue(this.keyResult.actionList);
     if (this.data.checkIn != null) {
@@ -69,6 +80,10 @@ export class CheckInFormComponent implements OnInit {
     this.checkIn = { confidence: 5 } as CheckInMin;
   }
 
+  calculateTarget(keyResult: KeyResultMetric): number {
+    return keyResult.stretchGoal - (keyResult.stretchGoal - keyResult.baseline) * 0.3;
+  }
+
   saveCheckIn() {
     this.dialogForm.controls.confidence.setValue(this.checkIn.confidence);
     let checkIn: any = {
@@ -102,10 +117,17 @@ export class CheckInFormComponent implements OnInit {
     return this.keyResult as KeyResultOrdinal;
   }
 
-  getStepLabel(): string {
-    if (this.continued) {
-      return '(2/2)';
-    }
-    return '(1/2)';
+  getActions(): Action[] | null {
+    return this.dialogForm.controls['actionList'].value;
+  }
+
+  changeIsChecked(event: any, index: number) {
+    const actions = this.dialogForm.value.actionList!;
+    actions[index] = { ...actions[index], isChecked: event.checked };
+    this.dialogForm.patchValue({ actionList: actions });
+  }
+
+  convertToMetric(keyResult: KeyResult) {
+    return keyResult as KeyResultMetric;
   }
 }

From 78260d2f89c0d5895662209653276601791123d2 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 11:53:13 +0100
Subject: [PATCH 02/12] remove unused files

---
 frontend/src/app/app.module.ts                |   2 -
 .../check-in-base-informations.component.html |   5 -
 .../check-in-base-informations.component.scss |   7 --
 ...eck-in-base-informations.component.spec.ts | 102 ------------------
 .../check-in-base-informations.component.ts   |  26 -----
 .../check-in-form-ordinal.component.html      |   4 -
 6 files changed, 146 deletions(-)
 delete mode 100644 frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
 delete mode 100644 frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.scss
 delete mode 100644 frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.spec.ts
 delete mode 100644 frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 7a6b98b188..0ac15b4dd3 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -50,7 +50,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { CheckInFormMetricComponent } from './shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component';
 import { UnitValueTransformationPipe } from './shared/pipes/unit-value-transformation/unit-value-transformation.pipe';
 import { CheckInFormOrdinalComponent } from './shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component';
-import { CheckInBaseInformationsComponent } from './shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component';
 import { CustomInputComponent } from './shared/custom/custom-input/custom-input.component';
 import { ConfirmDialogComponent } from './shared/dialog/confirm-dialog/confirm-dialog.component';
 import { CheckInFormComponent } from './shared/dialog/checkin/check-in-form/check-in-form.component';
@@ -121,7 +120,6 @@ export const MY_FORMATS = {
     CheckInFormMetricComponent,
     UnitValueTransformationPipe,
     CheckInFormOrdinalComponent,
-    CheckInBaseInformationsComponent,
     CustomInputComponent,
     CheckInFormComponent,
     UnitLabelTransformationPipe,
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
deleted file mode 100644
index e1fcb4478d..0000000000
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<form [formGroup]="dialogForm" class="d-flex flex-column">
-  <!--    Changeinfo   -->
-
-  <!--    Initiatives   -->
-</form>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.scss
deleted file mode 100644
index f5e4d40cc7..0000000000
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.action-list-item {
-  background-color: #f5f5f5;
-  height: 40px;
-  padding: 10px;
-  margin: auto;
-  color: black;
-}
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.spec.ts b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.spec.ts
deleted file mode 100644
index 037947b4d2..0000000000
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.spec.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CheckInBaseInformationsComponent } from './check-in-base-informations.component';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatInputHarness } from '@angular/material/input/testing';
-import { By } from '@angular/platform-browser';
-// @ts-ignore
-import * as errorData from '../../../../../assets/errors/error-messages.json';
-import { MatInputModule } from '@angular/material/input';
-import { MatDialogModule } from '@angular/material/dialog';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatSelectModule } from '@angular/material/select';
-import { MatRadioModule } from '@angular/material/radio';
-import { Action } from '../../../types/model/Action';
-import { action1, action2 } from '../../../testData';
-
-describe('CheckInBaseInformationsComponent', () => {
-  let component: CheckInBaseInformationsComponent;
-  let fixture: ComponentFixture<CheckInBaseInformationsComponent>;
-  let loader: HarnessLoader;
-  let errors = errorData;
-
-  let changeInfoText = 'ChangeInfo';
-  let initiativesText = 'Initiatives';
-
-  let action3: Action = { id: 3, version: 1, action: '', priority: 3, isChecked: true, keyResultId: 1 };
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        MatDialogModule,
-        NoopAnimationsModule,
-        MatSelectModule,
-        MatInputModule,
-        MatRadioModule,
-        ReactiveFormsModule,
-      ],
-      declarations: [CheckInBaseInformationsComponent],
-    });
-    fixture = TestBed.createComponent(CheckInBaseInformationsComponent);
-    component = fixture.componentInstance;
-    component.dialogForm = new FormGroup({
-      changeInfo: new FormControl<string>('', [Validators.maxLength(4096)]),
-      initiatives: new FormControl<string>('', [Validators.maxLength(4096)]),
-      actionList: new FormControl<Action[]>([action1, action2, action3]),
-    });
-    fixture.detectChanges();
-    loader = TestbedHarnessEnvironment.loader(fixture);
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should save given text in input to form-group in typescript', async () => {
-    const changeInfoTextbox = fixture.debugElement.query(By.css('[data-testId="changeInfo"]')).nativeElement;
-    const initiativesTextbox = fixture.debugElement.query(By.css('[data-testId="initiatives"]')).nativeElement;
-    changeInfoTextbox.value = changeInfoText;
-    initiativesTextbox.value = initiativesText;
-
-    //Update values in form
-    initiativesTextbox.dispatchEvent(new Event('input'));
-    changeInfoTextbox.dispatchEvent(new Event('input'));
-
-    expect(component.dialogForm.controls['changeInfo'].value).toBe(changeInfoText);
-    expect(component.dialogForm.controls['initiatives'].value).toBe(initiativesText);
-  });
-
-  it('should display error message if text input too long', () => {
-    //Insert values into name input which don't match length validator
-    loader.getAllHarnesses(MatInputHarness).then(async (inputs) => {
-      const changeInfoTextbox = inputs[0];
-      const initiativesTextbox = inputs[1];
-      await changeInfoTextbox.setValue('x'.repeat(4097));
-      await initiativesTextbox.setValue('x'.repeat(4097));
-
-      //Verify error message
-      const errorMessage = fixture.debugElement.query(By.css('mat-error'));
-      expect(errorMessage.nativeElement.textContent).toContain(errors.MAXLENGTH);
-    });
-  });
-
-  it('should display action list', async () => {
-    const checkboxes = fixture.nativeElement.querySelectorAll('mat-checkbox');
-    expect(checkboxes.length).toEqual(3);
-    expect(checkboxes[0].checked!).toBe(action1.isChecked);
-    expect(checkboxes[1].checked!).toBe(action2.isChecked);
-  });
-
-  it('should change state of action isChecked', async () => {
-    expect(component.dialogForm.value.actionList[0].isChecked).toBeFalsy();
-    let event = { checked: true };
-    component.changeIsChecked(event, 0);
-    expect(component.dialogForm.value.actionList[0].isChecked).toBeTruthy();
-
-    event = { checked: false };
-    component.changeIsChecked(event, 0);
-    expect(component.dialogForm.value.actionList[0].isChecked).toBeFalsy();
-  });
-});
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
deleted file mode 100644
index 8a26d99874..0000000000
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import errorMessages from '../../../../../assets/errors/error-messages.json';
-import { formInputCheck } from '../../../common';
-import { Action } from '../../../types/model/Action';
-
-@Component({
-  selector: 'app-check-in-base-informations',
-  templateUrl: './check-in-base-informations.component.html',
-  styleUrls: ['./check-in-base-informations.component.scss'],
-})
-export class CheckInBaseInformationsComponent {
-  @Input()
-  dialogForm!: FormGroup;
-  protected readonly errorMessages: any = errorMessages;
-  protected readonly formInputCheck = formInputCheck;
-
-  isTouchedOrDirty(name: string) {
-    return this.dialogForm.get(name)?.dirty || this.dialogForm.get(name)?.touched;
-  }
-
-  getErrorKeysOfFormField(name: string): string[] {
-    const errors = this.dialogForm.get(name)?.errors;
-    return errors == null ? [] : Object.keys(errors);
-  }
-}
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
index cf9f33687d..753a5b164e 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
@@ -22,8 +22,4 @@
       </div>
     </mat-radio-button>
   </mat-radio-group>
-  <div class="d-flex flex-column w-75 justify-content-start align-items-start mt-3">
-    <mat-label>Confidence um Target zu erreichen</mat-label>
-    <app-confidence [edit]="true" [checkIn]="checkIn" class="bg-keyResult-detail-attribute"></app-confidence>
-  </div>
 </form>

From 90d7cef475a7fb584f48df547d6a0c2b43d301ef Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 11:54:20 +0100
Subject: [PATCH 03/12] change bootstrap vars

---
 .../keyresult-detail.component.html           |   6 +-
 .../keyresult-detail.component.scss           |   2 +-
 .../check-in-form.component.html              | 125 +++++++++---------
 .../check-in-form.component.scss              |  22 +--
 frontend/src/style/_variables.scss            |   2 +-
 frontend/src/style/custom_bootstrap.scss      |   2 +-
 6 files changed, 73 insertions(+), 86 deletions(-)

diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
index 76e39fbbea..5bf14a866c 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
@@ -24,11 +24,7 @@
 
         <span class="text-small d-flex align-items-center flex-column">
           Confidence
-          <app-confidence
-            [checkIn]="keyResult.lastCheckIn!"
-            [edit]="false"
-            class="bg-keyResult-detail-attribute"
-          ></app-confidence>
+          <app-confidence [checkIn]="keyResult.lastCheckIn!" [edit]="false" class="bg-display-element"></app-confidence>
         </span>
       </div>
 
diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
index 31ca3e363f..c986515fcd 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
@@ -1,7 +1,7 @@
 @import "_variables";
 
 .keyResult-detail-attribute-show {
-  background-color: $keyResult-detail-attribute-bg;
+  background-color: $show-element;
   height: 100%;
   font-size: 0.85rem;
 }
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index 6f2f98c781..47bb7b53e6 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -3,73 +3,74 @@
   <app-dialog-header *ngIf="this.checkIn.id" [dialogTitle]="'Check-in bearbeiten'"></app-dialog-header>
 
   <p class="fs-6 text-black">Key Result</p>
-  <p class="text-black linebreak">{{ keyResult.title }}</p>
+  <p class="text-black linebreak bg-display-element py-2 ps-1">{{ keyResult.title }}</p>
 
-  <section *ngIf="getActions()?.length != 0">
-    <mat-label class="text-black">Action Plan</mat-label>
-    <div *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
-      <mat-checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
-      <div class="action-list-item flex-fill">
-        {{ action.action }}
+  <div class="overflow-scroll">
+    <section *ngIf="getActions()?.length != 0" class="d-flex gap-1 flex-column">
+      <mat-label class="text-black">Action Plan</mat-label>
+      <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
+        <mat-checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
+        <span class="action-list-item w-100">
+          {{ action.action }}
+        </span>
+      </span>
+    </section>
+    <section>
+      <mat-label class="text-black">Veränderungen seit letztem Check-in (optional)</mat-label>
+      <textarea
+        [attr.data-testId]="'changeInfo'"
+        [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
+        class="w-100 big-dialog-form-field"
+        formControlName="changeInfo"
+      ></textarea>
+      <div *ngIf="isTouchedOrDirty('changeInfo')">
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
+          <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
+        </mat-error>
       </div>
-    </div>
-  </section>
-
-  <section>
-    <mat-label class="text-black">Veränderungen seit letztem Check-in (optional)</mat-label>
-    <textarea
-      [attr.data-testId]="'changeInfo'"
-      [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
-      class="w-100 big-dialog-form-field"
-      formControlName="changeInfo"
-    ></textarea>
-    <div *ngIf="isTouchedOrDirty('changeInfo')">
-      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
-        <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-      </mat-error>
-    </div>
-  </section>
+    </section>
 
-  <form [formGroup]="dialogForm" class="d-flex flex-column">
-    <app-check-in-form-metric
-      *ngIf="keyResult.keyResultType === 'metric'"
-      [checkIn]="checkIn"
-      [dialogForm]="dialogForm"
-      [keyResult]="getKeyResultMetric()"
-    ></app-check-in-form-metric>
-    <app-check-in-form-ordinal
-      *ngIf="keyResult.keyResultType === 'ordinal'"
-      [checkIn]="checkIn"
-      [dialogForm]="dialogForm"
-      [keyResult]="getKeyResultOrdinal()"
-    ></app-check-in-form-ordinal>
-  </form>
+    <form [formGroup]="dialogForm" class="d-flex flex-column">
+      <app-check-in-form-metric
+        *ngIf="keyResult.keyResultType === 'metric'"
+        [checkIn]="checkIn"
+        [dialogForm]="dialogForm"
+        [keyResult]="getKeyResultMetric()"
+      ></app-check-in-form-metric>
+      <app-check-in-form-ordinal
+        *ngIf="keyResult.keyResultType === 'ordinal'"
+        [checkIn]="checkIn"
+        [dialogForm]="dialogForm"
+        [keyResult]="getKeyResultOrdinal()"
+      ></app-check-in-form-ordinal>
+    </form>
 
-  <section>
-    <mat-label class="mt-3 text-black mb-2">Massnahmen (optional)</mat-label>
-    <textarea
-      [attr.data-testId]="'initiatives'"
-      [ngClass]="formInputCheck(dialogForm, 'initiatives')"
-      class="w-100 big-dialog-form-field"
-      formControlName="initiatives"
-    ></textarea>
-    <div *ngIf="isTouchedOrDirty('initiatives')">
-      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
-        <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
-      </mat-error>
-    </div>
-  </section>
+    <section>
+      <mat-label class="mt-3 text-black mb-2">Massnahmen (optional)</mat-label>
+      <textarea
+        [attr.data-testId]="'initiatives'"
+        [ngClass]="formInputCheck(dialogForm, 'initiatives')"
+        class="w-100 big-dialog-form-field"
+        formControlName="initiatives"
+      ></textarea>
+      <div *ngIf="isTouchedOrDirty('initiatives')">
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
+          <span>{{ errorMessages[errorKey.toUpperCase()] }}</span>
+        </mat-error>
+      </div>
+    </section>
 
-  <section class="d-flex flex-column justify-content-start">
-    <mat-label
-      >Confidence um Target
-      <span *ngIf="keyResult.keyResultType === 'metric' && convertToMetric(keyResult) as kr">
-        ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }}
-      </span>
-      zu erreichen
-    </mat-label>
-    <app-confidence [checkIn]="checkIn" [edit]="true" class="bg-keyResult-detail-attribute"></app-confidence>
-  </section>
+    <section class="d-flex flex-column justify-content-start">
+      <mat-label
+        >Confidence um Target
+        <span *ngIf="keyResult.keyResultType === 'metric' && convertToMetric(keyResult) as kr">
+          ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
+        </span>
+        zu erreichen
+      </mat-label>
+      <app-confidence [checkIn]="checkIn" [edit]="true" class="bg-keyResult-detail-attribute"></app-confidence>
+    </section>
+  </div>
 
   <div class="d-flex flex-row buttons">
     <button
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
index 13fde69e93..51cb2f3da3 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
@@ -1,19 +1,9 @@
 @import "../style/variables";
 
-.submit {
-  background-color: $pz-dark-blue;
-  border-radius: 8px;
-}
-
-.cancel {
-  background-color: white;
-  color: $pz-dark-blue;
-}
-
-.disabled {
-  background-color: gray;
-}
-
-.buttons {
-  margin-top: 30px;
+.action-list-item {
+  background-color: $show-element;
+  height: 40px;
+  padding: 10px;
+  margin: auto;
+  color: black;
 }
diff --git a/frontend/src/style/_variables.scss b/frontend/src/style/_variables.scss
index 5a407bb7a1..22222745d5 100644
--- a/frontend/src/style/_variables.scss
+++ b/frontend/src/style/_variables.scss
@@ -14,10 +14,10 @@ $top-bar-height: 48px;
 $overview-bg: #d9d9d9;
 
 $keyResult-attribute-bg: #ffffff;
-$keyResult-detail-attribute-bg: #f5f5f5;
 $keyResult-attribute-edit-border: #ddddddff;
 
 $error-color: #b3261b;
+$show-element: #f5f5f5;
 
 $pz-dark-blue-palette: (
   50: lighten($pz-dark-blue, 50%),
diff --git a/frontend/src/style/custom_bootstrap.scss b/frontend/src/style/custom_bootstrap.scss
index cc241fe7ff..b19d25c264 100644
--- a/frontend/src/style/custom_bootstrap.scss
+++ b/frontend/src/style/custom_bootstrap.scss
@@ -2,7 +2,7 @@
 $theme-colors: (
   "pz-dark-blue": $pz-dark-blue,
   "eggshell": $eggshell,
-  "keyResult-detail-attribute": $keyResult-detail-attribute-bg,
+  "display-element": $show-element,
   "keyResult-attribute": $keyResult-attribute-bg,
   "error": $error,
 );

From 71789f4d5d57d18aa8ff4ea8b8d02c8d94cae13a Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 13:49:45 +0100
Subject: [PATCH 04/12] update structure of dialog

---
 .../check-in-form.component.html              | 94 +++++++++----------
 .../src/style/custom_angular.components.scss  | 13 +++
 frontend/src/style/styles.scss                | 26 +++--
 3 files changed, 76 insertions(+), 57 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index 47bb7b53e6..171b646be2 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -1,11 +1,12 @@
-<div class="dialog-padding" mat-dialog-content>
+<section mat-dialog-title>
   <app-dialog-header *ngIf="!this.checkIn.id" [dialogTitle]="'Check-in erfassen'"></app-dialog-header>
   <app-dialog-header *ngIf="this.checkIn.id" [dialogTitle]="'Check-in bearbeiten'"></app-dialog-header>
+  <p class="fs-6">Key Result</p>
+  <p class="linebreak bg-display-element py-2 ps-1 fs-6 fw-normal">{{ keyResult.title }}</p>
+</section>
 
-  <p class="fs-6 text-black">Key Result</p>
-  <p class="text-black linebreak bg-display-element py-2 ps-1">{{ keyResult.title }}</p>
-
-  <div class="overflow-scroll">
+<mat-dialog-content>
+  <form [formGroup]="dialogForm">
     <section *ngIf="getActions()?.length != 0" class="d-flex gap-1 flex-column">
       <mat-label class="text-black">Action Plan</mat-label>
       <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
@@ -15,8 +16,9 @@
         </span>
       </span>
     </section>
+
     <section>
-      <mat-label class="text-black">Veränderungen seit letztem Check-in (optional)</mat-label>
+      <mat-label class="text-black">Kommentar/ Veränderung seit letztem Check-in (optional)</mat-label>
       <textarea
         [attr.data-testId]="'changeInfo'"
         [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
@@ -30,20 +32,18 @@
       </div>
     </section>
 
-    <form [formGroup]="dialogForm" class="d-flex flex-column">
-      <app-check-in-form-metric
-        *ngIf="keyResult.keyResultType === 'metric'"
-        [checkIn]="checkIn"
-        [dialogForm]="dialogForm"
-        [keyResult]="getKeyResultMetric()"
-      ></app-check-in-form-metric>
-      <app-check-in-form-ordinal
-        *ngIf="keyResult.keyResultType === 'ordinal'"
-        [checkIn]="checkIn"
-        [dialogForm]="dialogForm"
-        [keyResult]="getKeyResultOrdinal()"
-      ></app-check-in-form-ordinal>
-    </form>
+    <app-check-in-form-metric
+      *ngIf="keyResult.keyResultType === 'metric'"
+      [checkIn]="checkIn"
+      [dialogForm]="dialogForm"
+      [keyResult]="getKeyResultMetric()"
+    ></app-check-in-form-metric>
+    <app-check-in-form-ordinal
+      *ngIf="keyResult.keyResultType === 'ordinal'"
+      [checkIn]="checkIn"
+      [dialogForm]="dialogForm"
+      [keyResult]="getKeyResultOrdinal()"
+    ></app-check-in-form-ordinal>
 
     <section>
       <mat-label class="mt-3 text-black mb-2">Massnahmen (optional)</mat-label>
@@ -63,36 +63,36 @@
     <section class="d-flex flex-column justify-content-start">
       <mat-label
         >Confidence um Target
-        <span *ngIf="keyResult.keyResultType === 'metric' && convertToMetric(keyResult) as kr">
+        <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
           ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
         </span>
         zu erreichen
       </mat-label>
-      <app-confidence [checkIn]="checkIn" [edit]="true" class="bg-keyResult-detail-attribute"></app-confidence>
+      <app-confidence [checkIn]="checkIn" [edit]="true"></app-confidence>
     </section>
-  </div>
+  </form>
+</mat-dialog-content>
 
-  <div class="d-flex flex-row buttons">
-    <button
-      (click)="saveCheckIn()"
-      [attr.data-testId]="'submit-check-in'"
-      [disabled]="!this.dialogForm.valid"
-      color="primary"
-      mat-flat-button
-      type="submit"
-    >
-      <span *ngIf="checkIn.id">Speichern</span>
-      <span *ngIf="!checkIn.id">Check-in erfassen</span>
-    </button>
-    <button
-      *ngIf="!continued"
-      [attr.data-testId]="'cancel-checkin'"
-      class="ms-2"
-      color="primary"
-      mat-button
-      mat-dialog-close
-    >
-      Abbrechen
-    </button>
-  </div>
-</div>
+<mat-dialog-actions>
+  <button
+    (click)="saveCheckIn()"
+    [attr.data-testId]="'submit-check-in'"
+    [disabled]="!this.dialogForm.valid"
+    color="primary"
+    mat-flat-button
+    type="submit"
+  >
+    <span *ngIf="checkIn.id">Speichern</span>
+    <span *ngIf="!checkIn.id">Check-in speichern</span>
+  </button>
+  <button
+    *ngIf="!continued"
+    [attr.data-testId]="'cancel-checkin'"
+    class="ms-2"
+    color="primary"
+    mat-button
+    mat-dialog-close
+  >
+    Abbrechen
+  </button>
+</mat-dialog-actions>
diff --git a/frontend/src/style/custom_angular.components.scss b/frontend/src/style/custom_angular.components.scss
index 310bb4c8a2..ee9aeaf8de 100644
--- a/frontend/src/style/custom_angular.components.scss
+++ b/frontend/src/style/custom_angular.components.scss
@@ -12,6 +12,19 @@
   }
 }
 
+.mdc-dialog__title::before {
+  display: none !important;
+}
+
+.mat-mdc-dialog-surface {
+  padding: 1rem 0 1rem 0;
+}
+
+mat-dialog-content,
+mat-dialog-actions {
+  padding: 0 1.62rem 0 1.62rem !important;
+}
+
 .mat-mdc-menu-item.objective-menu-option {
   line-height: normal !important;
   font-size: 1rem;
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index 15094b95ab..c77212efec 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -113,15 +113,21 @@ body pzsh-backdrop {
   color: $error-color;
 }
 
-.big-dialog-form-field {
-  height: 4.375rem !important;
-  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
-}
-
-.dialog-form-field {
-  resize: none;
-  outline: none;
-}
+textarea,
+input:not([type]),
+input[type="text"] {
+  @extend .ps-1;
+}
+
+//.big-dialog-form-field {
+//  height: 4.375rem !important;
+//  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
+//}
+//
+//.dialog-form-field {
+//  resize: none;
+//  outline: none;
+//}
 
 .dialog-form-field-error {
   resize: none;
@@ -150,7 +156,7 @@ body pzsh-backdrop {
 }
 
 .dialog-padding {
-  padding: 1.62rem !important;
+  padding: 0 1.62rem 0 1.62rem !important;
 }
 
 .objective-three-dot-menu {

From fd3d009a3b761f0452b59dc58412c7f828c5a914 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 14:17:22 +0100
Subject: [PATCH 05/12] open check in form with empty values

---
 .../check-in-form-metric/check-in-form-metric.component.ts  | 6 +-----
 .../check-in-form-ordinal.component.ts                      | 4 +---
 .../shared/pipes/parse-unit-value/parse-unit-value.pipe.ts  | 5 +++--
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts
index 8194d5428d..4f1d14927e 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts
@@ -45,11 +45,7 @@ export class CheckInFormMetricComponent implements AfterViewInit {
     return errors === null ? [] : Object.keys(errors!);
   }
 
-  calculateTarget(): number {
-    return this.keyResult.stretchGoal - (this.keyResult.stretchGoal - this.keyResult.baseline) * 0.3;
-  }
-
   ngAfterViewInit(): void {
-    this.formatValue();
+    this.dialogForm?.controls['value'].reset();
   }
 }
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts
index e1e31e2f94..ae9017a4e9 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts
@@ -19,8 +19,6 @@ export class CheckInFormOrdinalComponent implements OnInit {
   protected readonly Zone = Zone;
 
   ngOnInit(): void {
-    if (this.dialogForm.controls['value'].value === '') {
-      this.dialogForm.controls['value'].setValue(Zone.FAIL);
-    }
+    this.dialogForm.controls['value'].reset();
   }
 }
diff --git a/frontend/src/app/shared/pipes/parse-unit-value/parse-unit-value.pipe.ts b/frontend/src/app/shared/pipes/parse-unit-value/parse-unit-value.pipe.ts
index 1db5299427..9e8705f9e0 100644
--- a/frontend/src/app/shared/pipes/parse-unit-value/parse-unit-value.pipe.ts
+++ b/frontend/src/app/shared/pipes/parse-unit-value/parse-unit-value.pipe.ts
@@ -5,10 +5,11 @@ import { CHAR_REGEX } from '../../regexLibrary';
   name: 'parseUnitValue',
 })
 export class ParseUnitValuePipe implements PipeTransform {
-  transform(value: string): number {
+  transform(param: string | null): number {
+    const value: string = param || '0';
     if (value.toString().at(0) == '-') {
       return +('-' + value.toString().replace(CHAR_REGEX, ''));
     }
-    return +value.toString().replace(CHAR_REGEX, '');
+    return Number(value.toString().replace(CHAR_REGEX, ''));
   }
 }

From e184fffdf592633912e2c1a4c1c959c9ff694340 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 15:32:51 +0100
Subject: [PATCH 06/12] show empty value of new create of checkin

---
 .../check-in-form-metric.component.ts                |  4 +++-
 .../check-in-form-ordinal.component.ts               |  6 +-----
 .../checkin/check-in-form/check-in-form.component.ts | 12 +++---------
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts
index 4f1d14927e..9cc5ca0d9d 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.ts
@@ -46,6 +46,8 @@ export class CheckInFormMetricComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.dialogForm?.controls['value'].reset();
+    if (this.checkIn.id) {
+      this.formatValue();
+    }
   }
 }
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts
index ae9017a4e9..76850e2553 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.ts
@@ -9,7 +9,7 @@ import { CheckInMin } from '../../../types/model/CheckInMin';
   templateUrl: './check-in-form-ordinal.component.html',
   styleUrls: ['./check-in-form-ordinal.component.scss'],
 })
-export class CheckInFormOrdinalComponent implements OnInit {
+export class CheckInFormOrdinalComponent {
   @Input()
   keyResult!: KeyResultOrdinal;
   @Input()
@@ -17,8 +17,4 @@ export class CheckInFormOrdinalComponent implements OnInit {
   @Input()
   dialogForm!: FormGroup;
   protected readonly Zone = Zone;
-
-  ngOnInit(): void {
-    this.dialogForm.controls['value'].reset();
-  }
 }
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts
index 0ad2f22caf..e898eb5269 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.ts
@@ -8,7 +8,6 @@ import { CheckInMin } from '../../../types/model/CheckInMin';
 import { ParseUnitValuePipe } from '../../../pipes/parse-unit-value/parse-unit-value.pipe';
 import { CheckInService } from '../../../services/check-in.service';
 import { Action } from '../../../types/model/Action';
-import { DATE_FORMAT } from '../../../constantLibary';
 import { ActionService } from '../../../services/action.service';
 import { formInputCheck } from '../../../common';
 import errorMessages from '../../../../../assets/errors/error-messages.json';
@@ -24,9 +23,6 @@ export class CheckInFormComponent implements OnInit {
   checkIn!: CheckInMin;
   currentDate: Date;
   continued: boolean = false;
-  protected readonly formInputCheck = formInputCheck;
-  protected readonly errorMessages: { [key: string]: string } = errorMessages;
-
   dialogForm = new FormGroup({
     value: new FormControl<string>('', [Validators.required]),
     confidence: new FormControl<number>(5, [Validators.required, Validators.min(1), Validators.max(10)]),
@@ -34,6 +30,8 @@ export class CheckInFormComponent implements OnInit {
     initiatives: new FormControl<string>('', [Validators.maxLength(4096)]),
     actionList: new FormControl<Action[]>([]),
   });
+  protected readonly formInputCheck = formInputCheck;
+  protected readonly errorMessages: { [key: string]: string } = errorMessages;
 
   constructor(
     public dialogRef: MatDialogRef<CheckInFormComponent>,
@@ -54,6 +52,7 @@ export class CheckInFormComponent implements OnInit {
   isTouchedOrDirty(name: string) {
     return this.dialogForm.get(name)?.dirty || this.dialogForm.get(name)?.touched;
   }
+
   getErrorKeysOfFormField(name: string): string[] {
     const errors = this.dialogForm.get(name)?.errors;
     return errors == null ? [] : Object.keys(errors);
@@ -72,7 +71,6 @@ export class CheckInFormComponent implements OnInit {
     /* If KeyResult has lastCheckIn set checkIn to this value */
     if (this.keyResult.lastCheckIn != null) {
       this.checkIn = { ...this.keyResult.lastCheckIn, id: undefined };
-      this.dialogForm.controls.value.setValue(this.checkIn.value!.toString());
       this.dialogForm.controls.confidence.setValue(this.checkIn.confidence);
       return;
     }
@@ -126,8 +124,4 @@ export class CheckInFormComponent implements OnInit {
     actions[index] = { ...actions[index], isChecked: event.checked };
     this.dialogForm.patchValue({ actionList: actions });
   }
-
-  convertToMetric(keyResult: KeyResult) {
-    return keyResult as KeyResultMetric;
-  }
 }

From c5a9b60a8d3e70b43f3738ee39cdde8f27255b47 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 15:57:14 +0100
Subject: [PATCH 07/12] make dialog responsive

---
 .../src/app/confidence/confidence.component.html     |  6 +++++-
 .../src/app/confidence/confidence.component.scss     |  3 ++-
 .../keyresult-detail/keyresult-detail.component.ts   |  5 +++--
 .../check-in-history-dialog.component.ts             |  3 +++
 .../check-in-form-metric.component.html              |  2 +-
 .../check-in-form/check-in-form.component.html       | 12 ++++++------
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/confidence/confidence.component.html b/frontend/src/app/confidence/confidence.component.html
index b257a273bd..53a8596cbb 100644
--- a/frontend/src/app/confidence/confidence.component.html
+++ b/frontend/src/app/confidence/confidence.component.html
@@ -1,4 +1,8 @@
-<div class="d-flex align-items-center justify-content-center bg-inherit" id="confidence" *ngIf="checkIn.confidence">
+<div
+  class="d-flex align-items-center justify-content-start bg-inherit w-100"
+  id="confidence"
+  *ngIf="checkIn.confidence"
+>
   <div class="bg-inherit" [ngClass]="edit ? 'keyResult-attribute-edit' : 'keyResult-attribute-show'">
     <p [ngClass]="edit ? 'fw-normal' : 'fw-bold'" class="text-black" data-testid="confidence">
       {{ checkIn.confidence }}/{{ max }}
diff --git a/frontend/src/app/confidence/confidence.component.scss b/frontend/src/app/confidence/confidence.component.scss
index 3c29f34756..04762dddbc 100644
--- a/frontend/src/app/confidence/confidence.component.scss
+++ b/frontend/src/app/confidence/confidence.component.scss
@@ -14,7 +14,8 @@ p {
 }
 
 mat-slider {
-  min-width: 350px;
+  width: 100%;
+  max-width: 350px;
 }
 
 .bg-light-gray {
diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.ts b/frontend/src/app/keyresult-detail/keyresult-detail.component.ts
index 47b904fd8d..43866cd5dd 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.ts
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.ts
@@ -34,7 +34,9 @@ export class KeyresultDetailComponent implements OnInit {
     private refreshDataService: RefreshDataService,
     private dialog: MatDialog,
     private router: Router,
-  ) {}
+  ) {
+    this.refreshDataService.reloadOverviewSubject.subscribe(() => this.loadKeyResult());
+  }
 
   ngOnInit(): void {
     this.loadKeyResult();
@@ -69,7 +71,6 @@ export class KeyresultDetailComponent implements OnInit {
       width: '721px',
     });
     dialogRef.afterClosed().subscribe(() => {
-      this.loadKeyResult();
       this.refreshDataService.markDataRefresh();
     });
   }
diff --git a/frontend/src/app/shared/dialog/check-in-history-dialog/check-in-history-dialog.component.ts b/frontend/src/app/shared/dialog/check-in-history-dialog/check-in-history-dialog.component.ts
index 419194ddf5..efdeadf9f0 100644
--- a/frontend/src/app/shared/dialog/check-in-history-dialog/check-in-history-dialog.component.ts
+++ b/frontend/src/app/shared/dialog/check-in-history-dialog/check-in-history-dialog.component.ts
@@ -7,6 +7,7 @@ import { KeyResult } from '../../types/model/KeyResult';
 import { CheckInFormComponent } from '../checkin/check-in-form/check-in-form.component';
 import { Observable, of } from 'rxjs';
 import { KeyResultMetric } from '../../types/model/KeyResultMetric';
+import { RefreshDataService } from '../../services/refresh-data.service';
 
 @Component({
   selector: 'app-check-in-history-dialog',
@@ -24,6 +25,7 @@ export class CheckInHistoryDialogComponent implements OnInit {
     private checkInService: CheckInService,
     private dialog: MatDialog,
     public dialogRef: MatDialogRef<CheckInHistoryDialogComponent>,
+    private refreshDataService: RefreshDataService,
   ) {}
 
   ngOnInit(): void {
@@ -42,6 +44,7 @@ export class CheckInHistoryDialogComponent implements OnInit {
     });
     dialogRef.afterClosed().subscribe(() => {
       this.loadCheckInHistory();
+      this.refreshDataService.markDataRefresh();
     });
   }
 
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
index e366c4c1b8..601eda3e13 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -1,6 +1,6 @@
 <!--    Confidence and Value   -->
 <div class="d-flex flex-row w-100 gap-4">
-  <div class="d-flex flex-column w-25">
+  <div class="d-flex flex-column">
     <mat-label>
       Aktueller Wert<span *ngIf="keyResult.unit != 'PERCENT' && keyResult.unit != 'NUMBER'">
         ({{ keyResult.unit | unitLabelTransformation }})</span
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index 171b646be2..0903c1b52a 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -8,7 +8,7 @@
 <mat-dialog-content>
   <form [formGroup]="dialogForm">
     <section *ngIf="getActions()?.length != 0" class="d-flex gap-1 flex-column">
-      <mat-label class="text-black">Action Plan</mat-label>
+      <mat-label class="text-black">Action Plan:</mat-label>
       <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
         <mat-checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
         <span class="action-list-item w-100">
@@ -18,7 +18,7 @@
     </section>
 
     <section>
-      <mat-label class="text-black">Kommentar/ Veränderung seit letztem Check-in (optional)</mat-label>
+      <mat-label class="text-black">Kommentar/ Veränderung seit letztem Check-in (optional):</mat-label>
       <textarea
         [attr.data-testId]="'changeInfo'"
         [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
@@ -46,7 +46,7 @@
     ></app-check-in-form-ordinal>
 
     <section>
-      <mat-label class="mt-3 text-black mb-2">Massnahmen (optional)</mat-label>
+      <mat-label class="mt-3 text-black mb-2">Massnahmen (optional):</mat-label>
       <textarea
         [attr.data-testId]="'initiatives'"
         [ngClass]="formInputCheck(dialogForm, 'initiatives')"
@@ -61,14 +61,14 @@
     </section>
 
     <section class="d-flex flex-column justify-content-start">
-      <mat-label
-        >Confidence um Target
+      <mat-label class="text-black"
+        >Confidence um Target:
         <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
           ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
         </span>
         zu erreichen
       </mat-label>
-      <app-confidence [checkIn]="checkIn" [edit]="true"></app-confidence>
+      <app-confidence [checkIn]="checkIn" [edit]="true" class="w-100"></app-confidence>
     </section>
   </form>
 </mat-dialog-content>

From d64b43172e1b908bebcd868ebf358ca2eeadbf57 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 16:25:09 +0100
Subject: [PATCH 08/12] fix styling of ordinal zone

---
 .../check-in-form-ordinal.component.html               | 10 +++++-----
 .../check-in-form-ordinal.component.scss               |  6 ++----
 frontend/src/style/custom_angular.components.scss      |  5 +++++
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
index 753a5b164e..4432682aa0 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
@@ -1,22 +1,22 @@
 <form [formGroup]="dialogForm">
   <span class="text-black">Erreichten Bereich wählen</span>
   <mat-radio-group formControlName="value" class="d-flex flex-column gap-2 mt-2">
-    <mat-radio-button [attr.data-testId]="'fail-radio'" value="{{ Zone.FAIL }}">
+    <mat-radio-button [attr.data-testId]="'fail-radio'" value="{{ Zone.FAIL }}" class="ordinal-zone">
       <div class="radio-text-container d-flex align-items-center p-3 text-black">
         Zone (Commit / Target / Stretch) noch nicht erreicht
       </div>
     </mat-radio-button>
-    <mat-radio-button [attr.data-testId]="'commit-radio'" value="{{ Zone.COMMIT }}">
+    <mat-radio-button [attr.data-testId]="'commit-radio'" value="{{ Zone.COMMIT }}" class="ordinal-zone">
       <div class="radio-text-container d-flex p-3">
         <p class="text-black"><b>Commit:&nbsp; </b> {{ keyResult.commitZone }}</p>
       </div>
     </mat-radio-button>
-    <mat-radio-button [attr.data-testId]="'target-radio'" value="{{ Zone.TARGET }}">
-      <div class="radio-text-container d-flex p-3">
+    <mat-radio-button [attr.data-testId]="'target-radio'" value="{{ Zone.TARGET }}" class="ordinal-zone">
+      <div class="radio-text-container d-flex p-3 w-100">
         <p class="text-black"><b>Target:&nbsp; </b>{{ keyResult.targetZone }}</p>
       </div>
     </mat-radio-button>
-    <mat-radio-button [attr.data-testId]="'stretch-radio'" value="{{ Zone.STRETCH }}">
+    <mat-radio-button [attr.data-testId]="'stretch-radio'" value="{{ Zone.STRETCH }}" class="ordinal-zone">
       <div class="radio-text-container d-flex p-3">
         <p class="text-black"><b>Stretch:&nbsp; </b>{{ keyResult.stretchZone }}</p>
       </div>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
index 23479c54d0..34a5c85a4d 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.scss
@@ -1,4 +1,4 @@
-@import "../style/variables";
+@import "variables";
 
 .submit {
   background-color: $pz-dark-blue;
@@ -17,8 +17,6 @@ mat-label {
   color: black;
 }
 .radio-text-container {
-  background: #f5f5f5;
+  background: $show-element;
   height: auto;
-  width: 625px;
-  border: 1px solid lightgray;
 }
diff --git a/frontend/src/style/custom_angular.components.scss b/frontend/src/style/custom_angular.components.scss
index ee9aeaf8de..5a6889f307 100644
--- a/frontend/src/style/custom_angular.components.scss
+++ b/frontend/src/style/custom_angular.components.scss
@@ -20,6 +20,11 @@
   padding: 1rem 0 1rem 0;
 }
 
+.ordinal-zone .mdc-form-field,
+.mdc-label {
+  width: 100% !important;
+}
+
 mat-dialog-content,
 mat-dialog-actions {
   padding: 0 1.62rem 0 1.62rem !important;

From bdaf2397386f2aa8a3c1bfd64f7258f50c0fa28b Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 16:30:41 +0100
Subject: [PATCH 09/12] fix tests

---
 .../check-in-form-ordinal.component.spec.ts                   | 2 +-
 .../checkin/check-in-form/check-in-form.component.spec.ts     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.spec.ts b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.spec.ts
index f6caf13f15..075022da57 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.spec.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.spec.ts
@@ -47,7 +47,7 @@ describe('CheckInFormOrdinalComponent', () => {
   });
 
   it('should set zone of check-in to fail if value is empty', waitForAsync(async () => {
-    expect(component.dialogForm.controls['value'].value).toBe(Zone.FAIL);
+    expect(component.dialogForm.controls['value'].value).toBe('');
   }));
 
   it('should set zone to Fail', waitForAsync(async () => {
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.spec.ts b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.spec.ts
index 82d8915e8f..bb5f938552 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.spec.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.spec.ts
@@ -135,7 +135,7 @@ describe('CheckInFormComponent', () => {
     component.setDefaultValues();
     expect(component.dialogForm.value).toStrictEqual({
       confidence: keyResultOrdinal.lastCheckIn!.confidence,
-      value: keyResultOrdinal.lastCheckIn!.value,
+      value: '',
       changeInfo: '',
       initiatives: '',
       actionList: [],
@@ -148,7 +148,7 @@ describe('CheckInFormComponent', () => {
     component.setDefaultValues();
     expect(component.dialogForm.value).toStrictEqual({
       confidence: keyResultActions.lastCheckIn!.confidence,
-      value: keyResultActions.lastCheckIn!.value.toString(),
+      value: '',
       changeInfo: '',
       initiatives: '',
       actionList: [action1, action2],

From 190f5315adc50424a1c35dd92053d58ec8f78ac4 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Fri, 17 Nov 2023 16:47:13 +0100
Subject: [PATCH 10/12] fix scoring e2e tests

---
 frontend/cypress/e2e/checkIn.cy.ts                        | 8 ++------
 frontend/cypress/e2e/scoring.cy.ts                        | 6 ++----
 frontend/cypress/support/commands.ts                      | 2 --
 .../checkin/check-in-form/check-in-form.component.html    | 4 ++--
 4 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/frontend/cypress/e2e/checkIn.cy.ts b/frontend/cypress/e2e/checkIn.cy.ts
index 6335938413..b4a84a3fa9 100644
--- a/frontend/cypress/e2e/checkIn.cy.ts
+++ b/frontend/cypress/e2e/checkIn.cy.ts
@@ -173,7 +173,6 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains('5/10');
       cy.getByTestId('check-in-metric-value').clear().type('200');
       cy.getByTestId('confidence-slider').realMouseDown();
-      cy.getByTestId('check-in-next').click();
       cy.contains('Here we are');
       cy.contains('A cat would be great');
       cy.getByTestId('changeInfo').clear().type('We bought a new sheep');
@@ -217,7 +216,6 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains('6/10');
       cy.getByTestId('stretch-radio').click();
       cy.getByTestId('confidence-slider').realMouseDown();
-      cy.getByTestId('check-in-next').click();
       cy.contains('There is a new car');
       cy.contains('Buy now a new pool');
       cy.getByTestId('changeInfo').clear().type('We bought a new dog');
@@ -233,17 +231,16 @@ describe('OKR Check-in e2e tests', () => {
 
 function checkForDialogTextMetric() {
   cy.contains('Very important keyresult');
-  cy.contains('Check-in erfassen (1/2)');
+  cy.contains('Check-in erfassen');
   cy.contains('Key Result');
   cy.contains('Aktueller Wert');
   cy.contains('Confidence um Target (42.7%) zu erreichen');
-  cy.contains('Weiter');
   cy.contains('Abbrechen');
 }
 
 function checkForDialogTextOrdinal() {
   cy.contains('A new ordinal keyresult for our company');
-  cy.contains('Check-in erfassen (1/2)');
+  cy.contains('Check-in erfassen');
   cy.contains('Key Result');
   cy.contains('Zone (Commit / Target / Stretch) noch nicht erreicht ');
   cy.contains('Commit:');
@@ -253,7 +250,6 @@ function checkForDialogTextOrdinal() {
   cy.contains('New house');
   cy.contains('New pool');
   cy.contains('Confidence um Target zu erreichen');
-  cy.contains('Weiter');
   cy.contains('Abbrechen');
 }
 
diff --git a/frontend/cypress/e2e/scoring.cy.ts b/frontend/cypress/e2e/scoring.cy.ts
index 2566485f31..aeaa7c25a5 100644
--- a/frontend/cypress/e2e/scoring.cy.ts
+++ b/frontend/cypress/e2e/scoring.cy.ts
@@ -22,10 +22,9 @@ describe('Scoring component e2e tests', () => {
       cy.getByTestId('key-result-metric-value').clear().type(String(value));
       cy.getByTestId('confidence-slider').click();
       cy.realPress('{rightarrow}').realPress('{rightarrow}').realPress('{rightarrow}');
-      cy.getByTestId('check-in-next').click();
       cy.getByTestId('changeInfo').click().type('Testveränderungen');
       cy.getByTestId('initiatives').click().type('Testmassnahmen');
-      cy.getByTestId('create-checkin').click();
+      cy.getByTestId('submit-check-in').click();
       const percentage = getPercentageMetric(baseline, stretchgoal, value);
       cy.validateScoring(false, percentage);
       cy.getByTestId('close-drawer').click();
@@ -41,10 +40,9 @@ describe('Scoring component e2e tests', () => {
       cy.getByTestId(`${zoneName}-radio`).click();
       cy.getByTestId('confidence-slider').click();
       cy.realPress('{rightarrow}').realPress('{rightarrow}').realPress('{rightarrow}');
-      cy.getByTestId('check-in-next').click();
       cy.getByTestId('changeInfo').click().type('Testveränderungen');
       cy.getByTestId('initiatives').click().type('Testmassnahmen');
-      cy.getByTestId('create-checkin').click();
+      cy.getByTestId('submit-check-in').click();
       const percentage = getPercentageOrdinal(zoneName);
       cy.validateScoring(false, percentage);
       cy.getByTestId('close-drawer').click();
diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts
index 8ae4fa1522..e83e04410b 100644
--- a/frontend/cypress/support/commands.ts
+++ b/frontend/cypress/support/commands.ts
@@ -49,7 +49,6 @@ Cypress.Commands.add(
   (currentValue: number, shouldChangeConfidence: boolean, changeInfo: string | null, initiatives: string | null) => {
     cy.getByTestId('check-in-metric-value').clear().type(currentValue.toString());
     changeConfidence(shouldChangeConfidence);
-    cy.getByTestId('check-in-next').click();
     if (changeInfo) {
       cy.getByTestId('changeInfo').clear().type(changeInfo!);
     }
@@ -83,7 +82,6 @@ Cypress.Commands.add(
         break;
     }
     changeConfidence(shouldChangeConfidence);
-    cy.getByTestId('check-in-next').click();
     if (changeInfo) {
       cy.getByTestId('changeInfo').clear().type(changeInfo!);
     }
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index 0903c1b52a..f1276b80c7 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -62,11 +62,11 @@
 
     <section class="d-flex flex-column justify-content-start">
       <mat-label class="text-black"
-        >Confidence um Target:
+        >Confidence um Target
         <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
           ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
         </span>
-        zu erreichen
+        zu erreichen:
       </mat-label>
       <app-confidence [checkIn]="checkIn" [edit]="true" class="w-100"></app-confidence>
     </section>

From 4f5ba7f74ec44b921e143b68c98a451a9cb94189 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Mon, 20 Nov 2023 11:13:36 +0100
Subject: [PATCH 11/12] change gap between labels and fiesl

---
 .../check-in-form-metric.component.html                |  3 +--
 .../check-in-form-ordinal.component.html               |  4 ++--
 .../checkin/check-in-form/check-in-form.component.html |  4 ++--
 .../checkin/check-in-form/check-in-form.component.scss |  6 +++++-
 frontend/src/style/styles.scss                         | 10 ----------
 5 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
index 601eda3e13..50de1bcbb9 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -6,9 +6,8 @@
         ({{ keyResult.unit | unitLabelTransformation }})</span
       >:
     </mat-label>
-    <div class="d-flex flex-column pt-1">
+    <div class="d-flex flex-column">
       <app-custom-input
-        class="custom-input"
         [formGroup]="dialogForm"
         [formControlNameGiven]="'value'"
         (focusout)="formatValue()"
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
index 4432682aa0..2bf90b45ac 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="dialogForm">
-  <span class="text-black">Erreichten Bereich wählen</span>
-  <mat-radio-group formControlName="value" class="d-flex flex-column gap-2 mt-2">
+  <span class="text-black">Erreichten Bereich wählen:</span>
+  <mat-radio-group formControlName="value" class="d-flex flex-column gap-2">
     <mat-radio-button [attr.data-testId]="'fail-radio'" value="{{ Zone.FAIL }}" class="ordinal-zone">
       <div class="radio-text-container d-flex align-items-center p-3 text-black">
         Zone (Commit / Target / Stretch) noch nicht erreicht
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index f1276b80c7..8c2dd5c826 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -22,7 +22,7 @@
       <textarea
         [attr.data-testId]="'changeInfo'"
         [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
-        class="w-100 big-dialog-form-field"
+        class="w-100"
         formControlName="changeInfo"
       ></textarea>
       <div *ngIf="isTouchedOrDirty('changeInfo')">
@@ -61,7 +61,7 @@
     </section>
 
     <section class="d-flex flex-column justify-content-start">
-      <mat-label class="text-black"
+      <mat-label class="text-black confidence-label"
         >Confidence um Target
         <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
           ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
index 51cb2f3da3..a9474868c9 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
@@ -1,4 +1,4 @@
-@import "../style/variables";
+@import "variables";
 
 .action-list-item {
   background-color: $show-element;
@@ -7,3 +7,7 @@
   margin: auto;
   color: black;
 }
+
+.confidence-label {
+  margin-bottom: -7px;
+}
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index c77212efec..add339c16d 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -119,16 +119,6 @@ input[type="text"] {
   @extend .ps-1;
 }
 
-//.big-dialog-form-field {
-//  height: 4.375rem !important;
-//  padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
-//}
-//
-//.dialog-form-field {
-//  resize: none;
-//  outline: none;
-//}
-
 .dialog-form-field-error {
   resize: none;
   outline: $error-color 2px solid !important;

From 8c88e4332af865d1886fc67a6ecd4b527eccaed5 Mon Sep 17 00:00:00 2001
From: Yanick Minder <minder@puzzle.ch>
Date: Mon, 20 Nov 2023 12:41:55 +0100
Subject: [PATCH 12/12] change gap between label

---
 .../checkin/check-in-form/check-in-form.component.html    | 2 +-
 .../checkin/check-in-form/check-in-form.component.scss    | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index 8c2dd5c826..3d65f53c81 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -6,7 +6,7 @@
 </section>
 
 <mat-dialog-content>
-  <form [formGroup]="dialogForm">
+  <form [formGroup]="dialogForm" class="d-flex gap-2 flex-column">
     <section *ngIf="getActions()?.length != 0" class="d-flex gap-1 flex-column">
       <mat-label class="text-black">Action Plan:</mat-label>
       <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
index a9474868c9..5e093c6b7d 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
@@ -11,3 +11,11 @@
 .confidence-label {
   margin-bottom: -7px;
 }
+
+section[mat-dialog-title] {
+  margin-bottom: 0.1rem;
+}
+
+app-check-in-form-ordinal {
+  padding-top: 0.1rem;
+}