Added avbrott status and updated enddate to personal information

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html

@@ -58,6 +58,17 @@
         <dd *ngIf="avropInformation.endDate; else emptyDD">
           <digi-typography-time [afDateTime]="avropInformation.endDate"></digi-typography-time>
         </dd>
+        <ng-container *ngIf="avropInformation.hasAvbrott">
+          <dt>Status:</dt>
+          <dd class="deltagare-tab-personal-information__avbrott">
+            <msfa-icon icon="warning" size="l"></msfa-icon>
+            Avbrott
+          </dd>
+          <dt>Original datum för tjänstens slut:</dt>
+          <dd *ngIf="avropInformation.originalEndDate; else emptyDD">
+            <digi-typography-time [afDateTime]="avropInformation.originalEndDate"></digi-typography-time>
+          </dd>
+        </ng-container>
         <dt>Deltagandefrekvens:</dt>
         <dd *ngIf="avropInformation.participationFrequency; else emptyDD">
           {{ avropInformation.participationFrequency }}
@@ -67,7 +78,9 @@
         <dt>Utförande verksamhet:</dt>
         <dd *ngIf="avropInformation.utforandeVerksamhet; else emptyDD">{{ avropInformation.utforandeVerksamhet }}</dd>
         <dt>Utförande adress:</dt>
-        <dd *ngIf="avropInformation.utforandeAdress; else emptyDD">{{ avropInformation.utforandeAdress + ', ' + avropInformation.kommun }}</dd>
+        <dd *ngIf="avropInformation.utforandeAdress; else emptyDD">
+          {{ avropInformation.utforandeAdress + ', ' + avropInformation.kommun }}
+        </dd>
         <dt>Genomförandereferens:</dt>
         <dd *ngIf="avropInformation.genomforandeReferens; else emptyDD">{{ avropInformation.genomforandeReferens }}</dd>
       </dl>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.scss

@@ -6,6 +6,13 @@
     flex-basis: 0;
   }
 
+  &__avbrott {
+    display: flex;
+    align-items: center;
+    gap: var(--digi--layout--gutter--xs);
+    color: var(--digi--ui--color--danger);
+  }
+
   &__loader {
     flex-grow: 1;
   }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts

@@ -9,6 +9,7 @@ import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HandledarePickerFormModule } from '@msfa-shared/components/handledare-picker-form/handledare-picker-form.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
+import { IconModule } from '@msfa-shared/components/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
@@ -44,6 +45,7 @@ import { DeltagareCardService } from './deltagare-card.service';
     DigiNgLinkButtonModule,
     DigiNgFormSelectModule,
     UiSkeletonModule,
+    IconModule,
   ],
   providers: [DeltagareCardService],
   exports: [DeltagareCardComponent],