diff --git a/frontend/src/app/features/portal/my-claims/my-claims.html b/frontend/src/app/features/portal/my-claims/my-claims.html
index 74ad322..22d3485 100644
--- a/frontend/src/app/features/portal/my-claims/my-claims.html
+++ b/frontend/src/app/features/portal/my-claims/my-claims.html
@@ -1,5 +1,9 @@
+
diff --git a/frontend/src/app/features/portal/my-claims/my-claims.scss b/frontend/src/app/features/portal/my-claims/my-claims.scss
index 42674a3..81a5ddc 100644
--- a/frontend/src/app/features/portal/my-claims/my-claims.scss
+++ b/frontend/src/app/features/portal/my-claims/my-claims.scss
@@ -5,10 +5,16 @@
margin-bottom: 24px;
h1 {
- margin: 0;
+ margin: 0 0 2px;
}
}
+.page-subtitle {
+ margin: 0;
+ font-size: 14px;
+ color: var(--mat-sys-on-surface-variant);
+}
+
.center {
display: flex;
justify-content: center;
diff --git a/frontend/src/app/features/portal/my-claims/my-claims.spec.ts b/frontend/src/app/features/portal/my-claims/my-claims.spec.ts
index 1a55310..98fd251 100644
--- a/frontend/src/app/features/portal/my-claims/my-claims.spec.ts
+++ b/frontend/src/app/features/portal/my-claims/my-claims.spec.ts
@@ -48,7 +48,7 @@ function renderMyClaims({ policyHolderId = 'user-001', claims = [], apiError = f
return render(MyClaims, {
providers: [
provideRouter([]),
- { provide: AuthService, useValue: { policyHolderId } },
+ { provide: AuthService, useValue: { policyHolderId, username: () => 'Jose' } },
{ provide: ClaimsApiService, useValue: { getByPolicyHolder: vi.fn().mockReturnValue(claimsApi$) } },
],
});
diff --git a/frontend/src/app/features/portal/my-claims/my-claims.ts b/frontend/src/app/features/portal/my-claims/my-claims.ts
index 67c0621..6f8b7f6 100644
--- a/frontend/src/app/features/portal/my-claims/my-claims.ts
+++ b/frontend/src/app/features/portal/my-claims/my-claims.ts
@@ -27,7 +27,7 @@ import { Claim } from '../../../core/api/models/claim.model';
})
export class MyClaims implements OnInit {
private readonly claimsApi = inject(ClaimsApiService);
- private readonly authService = inject(AuthService);
+ protected readonly authService = inject(AuthService);
readonly claims = signal([]);
readonly loading = signal(true);
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 8ba3af6..54d36e8 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -28,7 +28,7 @@ body {
// Set a default background, font and text colors for the application using
// Angular Material's system-level CSS variables. Learn more about these
// variables at https://material.angular.dev/guide/system-variables
- background-color: var(--mat-sys-surface);
+ background-color: var(--mat-sys-surface-container-low);
color: var(--mat-sys-on-surface);
font: var(--mat-sys-body-medium);
@@ -36,4 +36,13 @@ body {
margin: 0;
height: 100%;
}
-/* You can add global styles to this file, and also import other style files */
+
+// Shared card surface for table/list pages.
+// Gray canvas (body) + white card = standard SaaS depth.
+.page-card {
+ background: var(--mat-sys-surface);
+ border-radius: 12px;
+ border: 1px solid var(--mat-sys-outline-variant);
+ overflow: hidden; // clips table header to card corner radius
+ padding: 24px;
+}
diff --git a/keycloak/insurtech-realm.json b/keycloak/insurtech-realm.json
index 94f810f..d722cd0 100644
--- a/keycloak/insurtech-realm.json
+++ b/keycloak/insurtech-realm.json
@@ -86,9 +86,10 @@
],
"users": [
{
+ "id": "6a35eebc-9170-4d43-b468-37a7207ebab1",
"username": "backoffice",
"email": "backoffice@insurtech-demo.ch",
- "firstName": "Backoffice",
+ "firstName": "Romen",
"lastName": "Analyst",
"enabled": true,
"emailVerified": true,
@@ -104,9 +105,10 @@
]
},
{
+ "id": "d22c39e7-d4ac-45ca-b7b7-e6fc5d23c81b",
"username": "customer",
"email": "customer@insurtech-demo.ch",
- "firstName": "Maria",
+ "firstName": "Jose",
"lastName": "Muster",
"enabled": true,
"emailVerified": true,