session exparation model

src/app/modals/session-expired-modal/session-expired-modal.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { SessionExpiredModalPage } from './session-expired-modal.page';
+
+@NgModule({
+  declarations: [SessionExpiredModalPage],
+  imports: [CommonModule, IonicModule],
+  exports: [SessionExpiredModalPage],
+})
+export class SessionExpiredModalPageModule {}

src/app/modals/session-expired-modal/session-expired-modal.page.html

@@ -0,0 +1,8 @@
+<ion-content class="session-expired-content ion-padding">
+  <div class="session-expired-inner">
+    <ion-icon class="session-expired-icon" src="/assets/images/notification-error.svg"></ion-icon>
+    <h2 class="session-expired-title">Sessão expirada</h2>
+    <p class="session-expired-text">{{ message }}</p>
+    <ion-button expand="block" class="session-expired-btn" (click)="dismissAndContinue()" style="background-color: color(srgb 0.9985 0.7219 0.1138);">OK</ion-button>
+  </div>
+</ion-content>

src/app/modals/session-expired-modal/session-expired-modal.page.scss

@@ -0,0 +1,39 @@
+.session-expired-content {
+  --background: transparent;
+}
+
+.session-expired-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.session-expired-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+}
+
+.session-expired-title {
+  margin: 0 0 12px;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.session-expired-text {
+  margin: 0 0 24px;
+  line-height: 1.4;
+  font-size: 1rem;
+  color: var(--ion-color-medium-shade, #666);
+}
+
+.session-expired-btn {
+  width: 100%;
+  max-width: 280px;
+  margin: 0;
+}