From 4c8ac5b9d8371c167a320e67f54d5c8c144878f1 Mon Sep 17 00:00:00 2001
From: Luong Minh Luat <157108501+lmluat-axonivy@users.noreply.github.com>
Date: Wed, 23 Oct 2024 09:28:10 +0700
Subject: [PATCH 1/8] Feature/ivyportal 17770 UI facelift for lts 12.0.0 part 3
 (#1144)

Update new UI on:

Dashboard: Filters widget, Manage saved filters, Widget information, Profile menu dropdown, Actions on Task/Case widget dropdown
all things on Dashboard Configuration
Fix GUI test

---------

Co-authored-by: tphvu-axonivy <vu.tongphanhoang@axonactive.com>
---
 .../page/CaseWidgetNewDashBoardPage.java      |   5 +-
 .../page/DashboardConfigurationPage.java      |  56 ++++++----
 .../page/DashboardModificationPage.java       |  27 +++--
 .../page/NewDashboardDetailsEditPage.java     |  13 ++-
 .../selenium/page/NewDashboardPage.java       |  31 +++---
 .../ProcessEditWidgetNewDashBoardPage.java    |   7 +-
 .../selenium/page/ProcessWidgetPage.java      |   7 +-
 .../selenium/page/ReorderDashboardPage.java   |  10 +-
 .../page/TaskWidgetNewDashBoardPage.java      |  10 +-
 .../dashboard/DashboardProcessWidgetTest.java |   4 +-
 .../DashboardSupportMultiLanguageTest.java    |   4 +-
 .../DashboardTaskWidgetFilterTest.java        |   1 +
 AxonIvyPortal/portal/cms/cms.yaml             |   3 +-
 AxonIvyPortal/portal/cms/cms_de.yaml          |   9 +-
 AxonIvyPortal/portal/cms/cms_en.yaml          |   9 +-
 AxonIvyPortal/portal/cms/cms_es.yaml          |   9 +-
 AxonIvyPortal/portal/cms/cms_fr.yaml          |   9 +-
 .../portalkit/bean/AbstractProcessBean.java   |   2 +-
 .../dashboard/process/DashboardProcess.java   |   4 +
 .../PortalDashboardConfiguration.xhtml        |   9 +-
 .../DashboardDetails/DashboardDetails.xhtml   |  38 +++----
 .../DashboardModification.xhtml               | 102 +++++++++---------
 .../ProcessWidget/ImageModeProcess.xhtml      |  21 ++--
 .../component/ActionStep/ActionStep.xhtml     |  14 ++-
 .../ProcessWidget/ProcessWidgetDialogs.xhtml  |   2 +-
 .../component/SideStep/SideStep.xhtml         |  28 ++---
 .../ProcessGridItem/ProcessGridItem.xhtml     |   8 +-
 .../ProcessItemAction/ProcessItemAction.xhtml |   5 +-
 .../ShareLinkDialog/ShareLinkDialog.xhtml     |  13 +--
 .../DashboardImportDetails.xhtml              |  23 ++--
 .../decorator/portal-dialog-with-icon.xhtml   |   2 +-
 .../webContent/layouts/includes/topbar.xhtml  |  14 +--
 .../restricted/DashboardTemplate.xhtml        |  14 +--
 .../restricted/decorator/TableWidget.xhtml    |  76 +++++++------
 .../restricted/includes/WidgetFilter.xhtml    |   5 +-
 .../webContent/resources/css/dashboard.css    |  53 ++++++---
 .../webContent/resources/css/module.css       |  94 ++++++++++++----
 .../resources/css/portal-variables-dark.css   |  11 ++
 .../resources/css/portal-variables-light.css  |  11 ++
 .../webContent/resources/css/portal.css       |  19 ++--
 .../webContent/resources/js/dashboard.js      |   5 +-
 .../userexamples/bean/ExampleHomeBean.java    |  10 +-
 .../ExampleHomePage/ExampleHomePage.xhtml     |   2 +-
 43 files changed, 483 insertions(+), 316 deletions(-)

diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java
index 09beccb892a..02d8b6d8ab4 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java
@@ -262,11 +262,12 @@ public void removeAllFilterItems() {
   }
 
   public void openManageFiltersDialog() {
-    $("a[id*='case-case_1:filter-form-1']").shouldBe(appear, DEFAULT_TIMEOUT).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
   }
 
   public void closeManageFilterDialog() {
-    $("a[id*='delete-saved-filter-form']").shouldBe(appear, DEFAULT_TIMEOUT).click();
+    $("div[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT).$("a.ui-dialog-titlebar-close")
+        .shouldBe(appear, DEFAULT_TIMEOUT).click();
   }
 
   public ElementsCollection getSavedFilterItemsByFilterNameOnWidgetManagement() {
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java
index 57f40c103f9..aa0604186ed 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java
@@ -13,6 +13,7 @@
 import com.axonivy.portal.selenium.common.FileHelper;
 import com.codeborne.selenide.Condition;
 import com.codeborne.selenide.DragAndDropOptions;
+import com.codeborne.selenide.ElementsCollection;
 import com.codeborne.selenide.SelenideElement;
 
 public class DashboardConfigurationPage extends TemplatePage {
@@ -40,12 +41,11 @@ public SelenideElement getPublicDashboardConfigurationTypeSelection() {
     waitForDashboardConfigurationTypeSelectionAppear();
     return $("a[id$='public-dashboard-type']");
   }
-
-  public DashboardModificationPage openEditPublicDashboardsPage() {
-    selectPublicDashboardType();
-    $("button[id$='dashboard-modification-component:dashboard-table:0:edit']").shouldBe(appear, DEFAULT_TIMEOUT)
-        .shouldBe(getClickableCondition());
-    return new DashboardModificationPage();
+  
+  public SelenideElement getDashboardConfigurationActionMenu() {
+    $("button[id*='dashboard-modification-component:dashboard-table:0:dashboard-configuration-action-button']").shouldBe(appear, DEFAULT_TIMEOUT)
+    .shouldBe(getClickableCondition()).click();
+    return $$("div[id$='dashboard-configuration-action-menu']").filter(Condition.appear).first();
   }
 
   public void selectPublicDashboardType() {
@@ -62,10 +62,29 @@ public void selectPrivateDashboardType() {
 
   public DashboardModificationPage openEditPrivateDashboardsPage() {
     selectPrivateDashboardType();
-    $("button[id$='dashboard-modification-component:dashboard-table:0:edit']").shouldBe(appear, DEFAULT_TIMEOUT)
-        .shouldBe(getClickableCondition()).click();
     return new DashboardModificationPage();
   }
+  
+  public DashboardModificationPage openEditPrivateDashboardPage(String buttonName) {
+    selectPrivateDashboardType();
+    clickButtonOnDashboardConfigurationActionMenu(buttonName);
+    return new DashboardModificationPage();
+  }
+  
+  public DashboardModificationPage openEditPublicDashboardsPage(String buttonName) {
+    selectPublicDashboardType();
+    clickButtonOnDashboardConfigurationActionMenu(buttonName);
+    return new DashboardModificationPage();
+  }
+  
+  public DashboardModificationPage openEditPublicDashboardsPage() {
+    selectPublicDashboardType();
+    return new DashboardModificationPage();
+  }
+  
+  public void clickButtonOnDashboardConfigurationActionMenu(String buttonName) {
+    getDashboardConfigurationActionMenu().$$("span").filter(Condition.text(buttonName)).first().shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+  }
 
   public void openCreatePublicDashboardMenu() {
     selectPublicDashboardType();
@@ -236,12 +255,12 @@ private void selectDashboardIcon(String icon) {
   }
 
   public NewDashboardPage backToHomePage() {
-    $("[id$='back-to-home-button']").shouldBe(appear, DEFAULT_TIMEOUT).shouldBe(getClickableCondition()).click();
+    $("span[class*='si si-house-chimney-2']").shouldBe(appear, DEFAULT_TIMEOUT).shouldBe(getClickableCondition()).click();
     return new NewDashboardPage();
   }
 
   public NewDashboardPage backToHomePageBottom() {
-    $("[id$='back-to-home-button']").shouldBe(appear, DEFAULT_TIMEOUT).shouldBe(getClickableCondition()).click();
+    $("span[class*='si si-house-chimney-2']").shouldBe(appear, DEFAULT_TIMEOUT).shouldBe(getClickableCondition()).click();
     return new NewDashboardPage();
   }
 
@@ -317,8 +336,8 @@ private SelenideElement findPrivateDashboardRowByName(String dashboardName) {
   }
 
   public void reorderPrivateDashboard(String fromDashboardName, String toDashboardName) {
-    var toRow = findPrivateDashboardRowByName(toDashboardName).$("i.si-move-expand-vertical");
-    var fromRow = findPrivateDashboardRowByName(fromDashboardName).$("i.si-move-expand-vertical");
+    var toRow = findPrivateDashboardRowByName(toDashboardName).$("i.si-navigation-menu");
+    var fromRow = findPrivateDashboardRowByName(fromDashboardName).$("i.si-navigation-menu");
     dragAndDropTo(toRow, fromRow);
   }
 
@@ -328,8 +347,8 @@ private void dragAndDropTo(SelenideElement toRow, SelenideElement fromRow) {
   }
 
   public void reorderPublicDashboard(String fromDashboardName, String toDashboardName) {
-    var toRow = findPublicDashboardRowByName(toDashboardName).$("i.si-move-expand-vertical");
-    var fromRow = findPublicDashboardRowByName(fromDashboardName).$("i.si-move-expand-vertical");
+    var toRow = findPublicDashboardRowByName(toDashboardName).$("i.si-navigation-menu");
+    var fromRow = findPublicDashboardRowByName(fromDashboardName).$("i.si-navigation-menu");
     dragAndDropTo(toRow, fromRow);
   }
 
@@ -367,7 +386,8 @@ public void cancelMultiLanguageDialog() {
   }
 
   public void cancelCreateDashboard() {
-    $("a[id$='dashboard-creation-component:dashboard-detail-close-button']").shouldBe(getClickableCondition()).click();
+    $("div[id$='dashboard-creation-details-dialog']").shouldBe(appear, DEFAULT_TIMEOUT).
+    $("div[class*='ui-corner-top']").shouldBe(appear, DEFAULT_TIMEOUT).$$("a").filter(Condition.attribute("aria-label", "Close")).first().click();
     closeAddDashboardDialog();
   }
 
@@ -398,13 +418,13 @@ public void openImportPrivateDashboards() {
   }
 
   public SelenideElement getShareDashboardDialog() {
-    $("button[id$=':share-dashboard']").click();
-    $("div[id$=':share-dashboard-dialog']").shouldBe(appear, DEFAULT_TIMEOUT);
+    clickButtonOnDashboardConfigurationActionMenu("Share");
     return $("div[id$=':share-dashboard-dialog']");
   }
 
   public void cancelImportDashboard() {
-    $("a[id$=':dashboard-import-close-button']").shouldBe(getClickableCondition()).click();
+    $("div[id$='dashboard-import-dialog']").shouldBe(appear, DEFAULT_TIMEOUT).
+    $("div[class*='ui-corner-top']").shouldBe(appear, DEFAULT_TIMEOUT).$$("a").filter(Condition.attribute("aria-label", "Close")).first().click();
     closeAddDashboardDialog();
   }
 
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardModificationPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardModificationPage.java
index caccef3f032..1add57078c6 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardModificationPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardModificationPage.java
@@ -8,6 +8,7 @@
 import com.codeborne.selenide.CollectionCondition;
 import com.codeborne.selenide.Condition;
 import com.codeborne.selenide.ElementsCollection;
+import com.codeborne.selenide.ElementsCollection.SelenideElementIterable;
 import com.codeborne.selenide.SelenideElement;
 
 public class DashboardModificationPage extends TemplatePage {
@@ -39,23 +40,32 @@ private SelenideElement getEditDashboardDialog() {
   public NewDashboardDetailsEditPage navigateToEditDashboardDetailsByName(String dashboardName) {
     SelenideElement dashboardRow = getDashboardRowByName(dashboardName);
     if (dashboardRow != null) {
-      dashboardRow.$("button[id$='dashboard-modification-component:dashboard-table:0:configure-dashboard']")
-          .shouldBe(Condition.appear, DEFAULT_TIMEOUT).click();
+      clickButtonOnDashboardConfigurationActionMenu("Configuration", dashboardRow);
       NewDashboardDetailsEditPage newDashboardDetailsEditPage = new NewDashboardDetailsEditPage();
       return newDashboardDetailsEditPage;
     }
     return null;
   }
+  
+  private SelenideElement getDashboardConfigurationActionMenu(SelenideElement dashboardRow) {
+    dashboardRow.$("div#dashboard-configuration-action-group").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+    .$("button[id$='dashboard-configuration-action-button']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+    return $$("div[id$='dashboard-configuration-action-menu']").filter(Condition.appear).first();
+  }
+  
+  private void clickButtonOnDashboardConfigurationActionMenu(String buttonName, SelenideElement dashboardRow) {
+    getDashboardConfigurationActionMenu(dashboardRow).$$("span").filter(Condition.text(buttonName)).first().shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+  }
 
   public void clickEditDashboardByName(String dashboardName) {
     SelenideElement dashboardRow = getDashboardRowByName(dashboardName);
-    dashboardRow.$("[id$=':edit']").click();
+    clickButtonOnDashboardConfigurationActionMenu("Edit", dashboardRow);
     getEditDashboardDialog().shouldBe(Condition.appear, DEFAULT_TIMEOUT);
   }
 
   public void clickDeleteDashboardByName(String dashboardName) {
     SelenideElement dashboardRow = getDashboardRowByName(dashboardName);
-    dashboardRow.$("[id$=':delete-dashboard']").click();
+    clickButtonOnDashboardConfigurationActionMenu("Delete", dashboardRow);
     SelenideElement deleteConfirmDialog = $("[id$=':remove-dashboard-dialog']").shouldBe(Condition.appear,
         DEFAULT_TIMEOUT);
     deleteConfirmDialog.$("button[id$=':remove-dashboard-button']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
@@ -124,15 +134,18 @@ public SelenideElement getDashboardCellByNameAndPosition(String dashboardName, i
   public SelenideElement getDashboardExportButtonOfDashboard(String dashboardName) {
     SelenideElement dashboard = getDashboardRowByName(dashboardName);
     dashboard.shouldBe(Condition.appear);
-    return dashboard.$("td:last-child button[id $=':export-dashboard']");
+    return getDashboardConfigurationActionMenu(dashboard)
+    .$$("ul > li > a").filter(Condition.attribute("title", "Export dashboard")).first();
   }
 
   public SelenideElement getDashboardShareLinkButton() {
-    return $("button[id$='share-dashboard']");
+    SelenideElement dashboardRow = getDashboardRowByName("Dashboard");
+    return getDashboardConfigurationActionMenu(dashboardRow).$$("span").filter(Condition.text("Share")).first();
   }
 
   public void getDashboardShareLinkDialog() {
-    getDashboardShareLinkButton().shouldBe(Condition.appear, DEFAULT_TIMEOUT).shouldBe(getClickableCondition()).click();
+    SelenideElement dashboard = getDashboardRowByName("Dashboard");
+    clickButtonOnDashboardConfigurationActionMenu("Share", dashboard);
     $("div[id$=':share-dashboard-dialog']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
   }
 }
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardDetailsEditPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardDetailsEditPage.java
index d41db093dc0..6da0e31fa8d 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardDetailsEditPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardDetailsEditPage.java
@@ -102,13 +102,20 @@ public void deleteCompactModeProcess() {
   }
 
   public void deleteImageModeProcess() {
-    $("button[id$=':process-action-button']").shouldBe(Condition.appear, DEFAULT_TIMEOUT).click();
-    $("[id$=':process-action-menu']").shouldBe(Condition.appear, DEFAULT_TIMEOUT).$("span.si-bin-1")
+    getProcessActionMenu().shouldBe(Condition.appear, DEFAULT_TIMEOUT).$("span.si-bin-1")
         .shouldBe(Condition.appear, DEFAULT_TIMEOUT).click();
     getRemoveWidgetDialog().shouldBe(Condition.appear, DEFAULT_TIMEOUT).click();
     getRemoveWidgetButton().click();
     getRemoveWidgetDialog().shouldBe(Condition.disappear, DEFAULT_TIMEOUT);
   }
+  
+  private SelenideElement getProcessActionMenu() {
+    if (!$("[id$=':process-action-menu']").isDisplayed()) {
+      $("button[id$=':process-action-button']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+      .click();
+    }
+    return $("div[id$='process-action-menu']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
+  }
 
   public void deleteFullModeProcess() {
     $("button[id$=':process-action-button']").shouldBe(Condition.appear).click();
@@ -140,7 +147,7 @@ private void openDeleteCombinedModeProcessDialog() {
   }
 
   public ProcessEditWidgetNewDashBoardPage editFullModeProcess() {
-    $("button[id$=':process-action-button']").shouldBe(Condition.appear).click();
+    getProcessActionMenu();
     $("[id$=':process-item:grid-process-action-component:edit-process']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
         .$("span.si-graphic-tablet-drawing-pen").shouldBe(Condition.appear, DEFAULT_TIMEOUT).click();
     $("div[id='new-widget-configuration-dialog']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java
index 5bb3215e45b..805881e49db 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java
@@ -183,8 +183,10 @@ public SelenideElement getProcessImage() {
   }
 
   public ProcessEditWidgetNewDashBoardPage editImageModeProcess() {
-    $("button[id$='image-process-action-component:process-action-button']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
-        .click();
+    if (!$("[id$=':image-process-action-component:process-action-menu']").isDisplayed()) {
+      $("button[id$='image-process-action-component:process-action-button']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+      .click();
+    }
     $("[id$=':image-process-action-component:process-action-menu']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
         .$("span.si-graphic-tablet-drawing-pen").shouldBe(Condition.appear, DEFAULT_TIMEOUT).click();
     $("div[id='new-widget-configuration-dialog']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
@@ -212,20 +214,24 @@ public void startProcess() {
   }
 
   public void startMoreInfoLink() {
-    getMoreInformationLink().click();
+    $("div[id$='process-action-menu']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+        .$$("span[class$='ui-menuitem-text']").filter(Condition.text("More Information")).first().click();
   }
 
   public SelenideElement getDisabledMoreInformationLink() {
-    return $("span[id$=':more-information']");
+    return getProcessActionMenu().$$("span[class$='ui-menuitem-text']").filter(Condition.text("More Information")).first();
   }
   
   private SelenideElement getProcessActionMenu() {
-    $("div#process-action-group").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+    if (!$("[id$=':process-action-menu']").isDisplayed()) {
+      $("button[id$=':process-action-button']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+      .click();
+    }
     return $("div[id$='process-action-menu']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
   }
 
   public SelenideElement getMoreInformationLink() {
-    return $("a[id$=':more-information']");
+    return getProcessActionMenu().$$("span[class$='ui-menuitem-text']").filter(Condition.text("More Information")).first();
   }
 
   public SelenideElement getFullModeProcessName() {
@@ -653,8 +659,8 @@ public void openCompactModeProcessManageFilters() {
   }
 
   public void closeCompactModeProcessManagerFilters() {
-    getManageWidgetFilterDialogCloseLink().shouldBe(Condition.appear).click();
-    getManageWidgetFilterDialog().shouldBe(disappear, DEFAULT_TIMEOUT);
+    $("div[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT).$("a.ui-dialog-titlebar-close")
+        .shouldBe(appear, DEFAULT_TIMEOUT).click();
   }
 
   public void removeCompactModeProcessFilter() {
@@ -874,7 +880,7 @@ public SelenideElement getWidgetFilter(int index) {
 
   public void closeWidgetFilter(int index) {
     var widgetFilterPanel = $("div[id$=':filter-overlay-panel-" + index + "']").shouldBe(appear, DEFAULT_TIMEOUT);
-    widgetFilterPanel.$(".ui-overlaypanel-footer__cancel").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+    widgetFilterPanel.$("div[id*='widget-filter-content']").shouldBe(appear, DEFAULT_TIMEOUT).$("div[class*='filter-overlay-panel__header']").shouldBe(appear, DEFAULT_TIMEOUT).$("button[id*='filter-form-" + index + "']").should(getClickableCondition(), DEFAULT_TIMEOUT).click();
     widgetFilterPanel.shouldBe(disappear, DEFAULT_TIMEOUT);
   }
 
@@ -1029,8 +1035,7 @@ public NotificationCompactPage openNotificationPanel() {
   }
   
   public void clickOnManageFilterLink() {
-    var savedFilterContainer = $("[id$=':saved-filters-container']").shouldBe(appear, DEFAULT_TIMEOUT);
-    savedFilterContainer.$(".ui-commandlink.saved-filter__manage-filter").shouldBe(getClickableCondition()).click();
+    $("div[class*='filter-overlay-panel__footer']").shouldBe(appear, DEFAULT_TIMEOUT).$("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button[class*='saved-filter__manage-filter']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     $("[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT);
   }
   
@@ -1045,7 +1050,9 @@ public ElementsCollection getTotalSavedFilterInManageFilterDialog() {
   }
   
   public void closeManageFilterDialog() {
-    $("[id$=':manage-filter-action']").$("a").shouldBe(getClickableCondition()).click();
+    $("div[id*='manage-filter-dialog']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+    .$("div[class*='ui-widget-header']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+    .$("a[class*='ui-dialog-titlebar-close']").shouldBe(getClickableCondition()).click();
     $("[id$='manage-filter-dialog']").shouldBe(disappear, DEFAULT_TIMEOUT);
   }
 
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessEditWidgetNewDashBoardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessEditWidgetNewDashBoardPage.java
index f9e0229a8e5..bb62e2f8b61 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessEditWidgetNewDashBoardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessEditWidgetNewDashBoardPage.java
@@ -132,7 +132,12 @@ public SelenideElement getFullModeProcessPreview() {
   }
 
   public SelenideElement getDisabledMoreInformationLink() {
-    return $("span[id$=':more-information']");
+    return getProcessActionMenu().$$("span[class$='ui-menuitem-text']").filter(Condition.text("More Information")).first();
+  }
+  
+  private SelenideElement getProcessActionMenu() {
+    $("div[class*='image-process-item-container']").shouldBe(Condition.appear, DEFAULT_TIMEOUT).$("button[id$='process-action-button']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+    return $("div[id$='process-action-menu']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
   }
 
   public void selectFullModeProcessAndSaveWidget(String processName) {
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java
index 67a4fa771ac..c916f51310e 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java
@@ -351,8 +351,9 @@ public void deleteGridProcess(int index) {
   }
 
   public void clickMoreInformationLinkImage(String processName) {
-    SelenideElement processItem = getProcessItem(processName);
-    processItem.$(By.cssSelector(".more-information-wrapper")).click();
+    getProcessActionMenu(processName)
+    .$("ul[class*='ui-helper-reset']").shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+    .$$("li > a > span").filter(Condition.exactText("More Information")).first().click();;
   }
 
   public void clickMoreInformationLink(String processName) {
@@ -363,7 +364,7 @@ public void clickMoreInformationLink(String processName) {
   private SelenideElement getProcessActionMenu(String processName) {
     SelenideElement processItem = getProcessItem(processName);
     processItem.$("button[id*=':process-action-button']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
-    return $$("div[id$='process-action-menu']").filter(Condition.appear).first();  
+    return $$("div[id$='process-action-menu']").filter(Condition.appear).first();
   }
 
   public SelenideElement getProcessItem(String processName) {
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ReorderDashboardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ReorderDashboardPage.java
index 457fe157697..cf3328c8774 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ReorderDashboardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ReorderDashboardPage.java
@@ -12,7 +12,7 @@ public class ReorderDashboardPage extends TemplatePage {
 
   @Override
   protected String getLoadedLocator() {
-    return "i.si-move-expand-vertical";
+    return "i.dashboard-icon-drag-drop";
   }
 
   public void toggleVisibility(String dashboardName) {
@@ -22,8 +22,8 @@ public void toggleVisibility(String dashboardName) {
   }
 
   public void reorderPrivateDashboard(String fromDashboardName, String toDashboardName) {
-    var toRow = findPrivateDashboardRowByName(toDashboardName).$("i.si-move-expand-vertical");
-    var fromRow = findPrivateDashboardRowByName(fromDashboardName).$("i.si-move-expand-vertical");
+    var toRow = findPrivateDashboardRowByName(toDashboardName).$("i.si-navigation-menu");
+    var fromRow = findPrivateDashboardRowByName(fromDashboardName).$("i.si-navigation-menu");
     dragAndDropTo(toRow, fromRow);
   }
 
@@ -33,8 +33,8 @@ private void dragAndDropTo(SelenideElement toRow, SelenideElement fromRow) {
   }
 
   public void reorderPublicDashboard(String fromDashboardName, String toDashboardName) {
-    var toRow = findPublicDashboardRowByName(toDashboardName).$("i.si-move-expand-vertical");
-    var fromRow = findPublicDashboardRowByName(fromDashboardName).$("i.si-move-expand-vertical");
+    var toRow = findPublicDashboardRowByName(toDashboardName).$("i.si-navigation-menu");
+    var fromRow = findPublicDashboardRowByName(fromDashboardName).$("i.si-navigation-menu");
     dragAndDropTo(toRow, fromRow);
   }
 
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java
index 7f486759b4e..3b05a310903 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java
@@ -183,8 +183,7 @@ public boolean hasSavedFilterItem(String filterName) {
   }
 
   public void clickOnManageFilterLink() {
-    var savedFilterContainer = getSavedFilterContainer();
-    savedFilterContainer.$(".ui-commandlink.saved-filter__manage-filter").shouldBe(getClickableCondition()).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
     $("[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT);
   }
 
@@ -531,8 +530,7 @@ public void saveFilter(String widgetFilterName) {
   }
   
   public void openManageFiltersDialog() {
-    $("div.saved-filter-content").shouldBe(appear, DEFAULT_TIMEOUT)
-    .$("a[class*='saved-filter__manage-filter']").shouldBe(appear, DEFAULT_TIMEOUT).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
   }
   
   public void removeAllFilterItems() {
@@ -651,4 +649,8 @@ public boolean isExpandButtonAppear() {
   public boolean isWidgetInfomationIconAppear() {
     return getTaskWidgetHeader().$(".widget__info-sidebar-link").isDisplayed();
   }
+  
+  public void clickOnWidgetFilterHeader() {
+    $$("strong").filter(Condition.text("Filter options")).first().click();
+  }
 }
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardProcessWidgetTest.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardProcessWidgetTest.java
index 4ca462b702d..0a73303a87c 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardProcessWidgetTest.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardProcessWidgetTest.java
@@ -68,6 +68,7 @@ public void testPreviewButtonImageProcess() {
         newDashboardPage.editProcessWidgetConfiguration();
     editProcessWidgetConfiguration.previewImageModeProcess(CATEGORIED_LEAVE_REQUEST);
     editProcessWidgetConfiguration.getStartButton().shouldBe(Condition.disabled);
+    editProcessWidgetConfiguration.save();
     editProcessWidgetConfiguration.getDisabledMoreInformationLink().shouldBe(Condition.appear);
     editProcessWidgetConfiguration.getImageModeProcessImage()
         .shouldHave(Condition.attributeMatching(NewDashboardPage.SRC_ATTRIBUTE, NewDashboardPage.IMAGE_URI_PATTERN));
@@ -129,7 +130,8 @@ public void testPreviewFullModeProcess() {
         newDashboardPage.editProcessWidgetConfiguration();
     editProcessWidgetConfiguration.previewFullModeProcess(CATEGORIED_LEAVE_REQUEST);
     editProcessWidgetConfiguration.getStartButton().shouldBe(Condition.disabled);
-    editProcessWidgetConfiguration.getDisabledMoreInformationLink().shouldBe(Condition.appear);
+    editProcessWidgetConfiguration.save();
+    newDashboardPage.getDisabledMoreInformationLink().shouldBe(Condition.appear);
   }
 
   @Test
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardSupportMultiLanguageTest.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardSupportMultiLanguageTest.java
index e940ec715c7..cb1de13e0f2 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardSupportMultiLanguageTest.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardSupportMultiLanguageTest.java
@@ -78,7 +78,7 @@ public void testAddPublicDashboard() {
     LinkNavigator.redirectToPortalDashboardConfiguration();
     var configurationPage2 = new DashboardConfigurationPage();
 
-    DashboardModificationPage modificationPage = configurationPage2.openEditPublicDashboardsPage();
+    DashboardModificationPage modificationPage = configurationPage2.openEditPublicDashboardsPage("Bearbeiten");
     SelenideElement dashboard = modificationPage.getDashboardRowByName(updatedName);
     dashboard.shouldBe(Condition.appear);
   }
@@ -118,7 +118,7 @@ public void testAddPrivateDashboard() {
     LinkNavigator.redirectToPortalDashboardConfiguration();
     var configurationPage2 = new DashboardConfigurationPage();
 
-    DashboardModificationPage modificationPage = configurationPage2.openEditPrivateDashboardsPage();
+    DashboardModificationPage modificationPage = configurationPage2.openEditPrivateDashboardPage("Bearbeiten");
     SelenideElement dashboard = modificationPage.getDashboardRowByName(updatedName);
     dashboard.shouldBe(Condition.appear);
   }
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardTaskWidgetFilterTest.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardTaskWidgetFilterTest.java
index 84f005ef33f..538c14dcddc 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardTaskWidgetFilterTest.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardTaskWidgetFilterTest.java
@@ -193,6 +193,7 @@ public void testFilterDateOnCustomFields() {
     taskWidget.openFilterWidget();
     taskWidget.addFilter("Shipment date", FilterOperator.BETWEEN);
     taskWidget.inputValueOnLatestFilter(FilterValueType.DATE_BETWEEN, "01/01/2024","12/12/2024");
+    taskWidget.clickOnWidgetFilterHeader();
     taskWidget.applyFilter();
     taskWidget.countAllTasks().shouldHave(CollectionCondition.size(2));
   }
diff --git a/AxonIvyPortal/portal/cms/cms.yaml b/AxonIvyPortal/portal/cms/cms.yaml
index edb4596d15f..b729a8d7ebd 100644
--- a/AxonIvyPortal/portal/cms/cms.yaml
+++ b/AxonIvyPortal/portal/cms/cms.yaml
@@ -460,6 +460,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     processes: Processes
     public: Public
     remove: Remove
+    removeSelection: Remove selection
     reorder: Reorder
     requiredFieldMessage: This field is required
     reserve: Reserve
@@ -1060,7 +1061,7 @@ Dialogs:
               noResultsText: There are no results.
             dashboard:
               PortalDashboardConfiguration:
-                NewDashboard: New Dashboard
+                NewDashboard: Add new dashboard
               component:
                 CustomDashboardWidget:
                   CouldNotFindLinkedProcess: Could not find the linked process!
diff --git a/AxonIvyPortal/portal/cms/cms_de.yaml b/AxonIvyPortal/portal/cms/cms_de.yaml
index 7dce2166b85..dd91de781d5 100644
--- a/AxonIvyPortal/portal/cms/cms_de.yaml
+++ b/AxonIvyPortal/portal/cms/cms_de.yaml
@@ -462,7 +462,8 @@ ch.ivy.addon.portalkit.ui.jsf:
     detail: Details
     display: Anzeigen
     displayName: Name anzeigen
-    dragAndDrop: 'Ziehen und Ablegen eines Bildes oder '
+    dragAndDropFile: 'Ziehen und Ablegen einer Datei oder '
+    dragAndDropImage: 'Ziehen und Ablegen eines Bildes oder '
     edit: Bearbeiten
     errorAjaxMessage: Es gibt einen allgemeinen Fehler!
     errorFileUploadSize: Die Dateigrösse muss kleiner als {0} sein.
@@ -529,10 +530,12 @@ ch.ivy.addon.portalkit.ui.jsf:
     processes: Prozesse
     public: Öffentlich
     remove: Entfernen
+    removeSelection: Selektion entfernen
     reorder: Neu anordnen
     requiredFieldMessage: Dies ist ein Pflichtfeld
     reserve: Reservieren
     reset: Zurücksetzen
+    resetFilters: Filter zurücksetzen
     resetSettingHeaderText: Einstellung zurücksetzen?
     resetTaskHeaderText: Diese Aufgabe zurücksetzen?
     resetToDefaultMessage: Dieser Vorgang kann nicht rückgängig gemacht werden. Sind Sie sicher, dass Sie auf die Standard-Einstellungen zurücksetzen möchten?
@@ -791,6 +794,7 @@ ch.ivy.addon.portalkit.ui.jsf:
       dashboardIcon: Dashboard-Symbol
       dashboardPermission: Dashboard Berechtigung
       dashboardTitle: Dashboard Titel
+      deleteDashboardMessage: Sind Sie sicher, dass Sie die "{0}" dashboard?
       editDashboard: Dashboard editieren
       manageDashboard: Dashboard verwalten
       removeDashboardHeader: Dashboard "{0}" entfernen
@@ -1287,7 +1291,7 @@ Dialogs:
               noResultsText: Es liegen keine Ergebnisse vor.
             dashboard:
               PortalDashboardConfiguration:
-                NewDashboard: Neues Dashboard
+                NewDashboard: Neues Dashboard hinzufügen
               component:
                 CustomDashboardWidget:
                   CouldNotFindLinkedProcess: Der verlinkte Prozess konnte nicht gefunden werden!
@@ -1331,6 +1335,7 @@ Dialogs:
         component:
           ShareLinkDialog:
             CopyLink: Link kopieren
+            Link: Link
             LinkCopied: Link kopiert
         dashboard:
           component:
diff --git a/AxonIvyPortal/portal/cms/cms_en.yaml b/AxonIvyPortal/portal/cms/cms_en.yaml
index d55bb0e0727..709c359b613 100644
--- a/AxonIvyPortal/portal/cms/cms_en.yaml
+++ b/AxonIvyPortal/portal/cms/cms_en.yaml
@@ -461,7 +461,8 @@ ch.ivy.addon.portalkit.ui.jsf:
     detail: Details
     display: Display
     displayName: Display name
-    dragAndDrop: 'Drag and drop an image or '
+    dragAndDropFile: 'Drag and drop a file or '
+    dragAndDropImage: 'Drag and drop an image or '
     edit: Edit
     errorAjaxMessage: There is a general exception.
     errorFileUploadSize: The file size must be lower than {0}
@@ -528,10 +529,12 @@ ch.ivy.addon.portalkit.ui.jsf:
     processes: Processes
     public: Public
     remove: Remove
+    removeSelection: Remove selection
     reorder: Reorder
     requiredFieldMessage: This field is required
     reserve: Reserve
     reset: Reset
+    resetFilters: Reset filters
     resetSettingHeaderText: Reset setting?
     resetTaskHeaderText: Reset this task?
     resetToDefaultMessage: This operation cannot be undone. Are you sure you want to reset to default settings?
@@ -793,6 +796,7 @@ ch.ivy.addon.portalkit.ui.jsf:
       dashboardIcon: Dashboard icon
       dashboardPermission: Dashboard permission
       dashboardTitle: Dashboard title
+      deleteDashboardMessage: Are you sure you want to delete the "{0}" dashboard?
       editDashboard: Edit dashboard
       manageDashboard: Manage dashboard
       removeDashboardHeader: Remove the "{0}" dashboard
@@ -1288,7 +1292,7 @@ Dialogs:
               noResultsText: There are no results.
             dashboard:
               PortalDashboardConfiguration:
-                NewDashboard: New Dashboard
+                NewDashboard: Add new dashboard
               component:
                 CustomDashboardWidget:
                   CouldNotFindLinkedProcess: Could not find the linked process!
@@ -1332,6 +1336,7 @@ Dialogs:
         component:
           ShareLinkDialog:
             CopyLink: Copy link
+            Link: Link
             LinkCopied: Link copied
         dashboard:
           component:
diff --git a/AxonIvyPortal/portal/cms/cms_es.yaml b/AxonIvyPortal/portal/cms/cms_es.yaml
index 38e56cf1c46..55bf027627b 100644
--- a/AxonIvyPortal/portal/cms/cms_es.yaml
+++ b/AxonIvyPortal/portal/cms/cms_es.yaml
@@ -463,7 +463,8 @@ ch.ivy.addon.portalkit.ui.jsf:
     detail: Detalles
     display: Mostrar
     displayName: Nombre de pantalla
-    dragAndDrop: 'Arrastre y suelte una imagen o '
+    dragAndDropFile: 'Arrastre y suelte un archivo o '
+    dragAndDropImage: 'Arrastre y suelte una imagen o '
     edit: Editar
     errorAjaxMessage: Error general
     errorFileUploadSize: El tamaño deberá ser inferior a {0}
@@ -530,10 +531,12 @@ ch.ivy.addon.portalkit.ui.jsf:
     processes: Procesos
     public: Público
     remove: Retirar
+    removeSelection: Eliminar selección
     reorder: Reordenar
     requiredFieldMessage: este campo es obligatorio
     reserve: Reservar
     reset: Reiniciar
+    resetFilters: Restablecer filtros
     resetSettingHeaderText: ¿Resetear la configuración?
     resetTaskHeaderText: ¿Reiniciar esta tarea?
     resetToDefaultMessage: Esta operación no se puede deshacer. ¿Estás seguro de que quieres restablecer la configuración por defecto?
@@ -790,6 +793,7 @@ ch.ivy.addon.portalkit.ui.jsf:
       dashboardIcon: Icono del panel de control
       dashboardPermission: Permiso de tablero
       dashboardTitle: Título del tablero
+      deleteDashboardMessage: ¿Está seguro de que desea eliminar el "{0}" cuadro de mandos?
       editDashboard: Editar tablero
       manageDashboard: Administrar tablero
       removeDashboardHeader: Borrar el tablero "{0}"
@@ -1286,7 +1290,7 @@ Dialogs:
               noResultsText: No hay resultados.
             dashboard:
               PortalDashboardConfiguration:
-                NewDashboard: Nuevo panel de control
+                NewDashboard: Añadir un nuevo cuadro de mandos
               component:
                 CustomDashboardWidget:
                   CouldNotFindLinkedProcess: ¡No se pudo encontrar el proceso vinculado!
@@ -1330,6 +1334,7 @@ Dialogs:
         component:
           ShareLinkDialog:
             CopyLink: Copiar enlace
+            Link: Enlace
             LinkCopied: ¡Enlace copiado
         dashboard:
           component:
diff --git a/AxonIvyPortal/portal/cms/cms_fr.yaml b/AxonIvyPortal/portal/cms/cms_fr.yaml
index 12593affa2c..a4f0e89cadf 100644
--- a/AxonIvyPortal/portal/cms/cms_fr.yaml
+++ b/AxonIvyPortal/portal/cms/cms_fr.yaml
@@ -460,7 +460,8 @@ ch.ivy.addon.portalkit.ui.jsf:
     detail: Détails
     display: Présenter
     displayName: Affichez le nom
-    dragAndDrop: 'Glisser-déposer une image ou '
+    dragAndDropFile: 'Glisser-déposer un fichier ou '
+    dragAndDropImage: 'Glisser-déposer une image ou '
     edit: Editer
     errorAjaxMessage: Il y a une exception générale.
     errorFileUploadSize: La taille du fichier doit être inférieure à {0}.
@@ -527,10 +528,12 @@ ch.ivy.addon.portalkit.ui.jsf:
     processes: Processus
     public: Publique
     remove: Retirer
+    removeSelection: Retirer la sélection
     reorder: Réorganiser
     requiredFieldMessage: Ce champ est obligatoire
     reserve: Enregistrer
     reset: Réinitialiser
+    resetFilters: Réinitialiser les filtres
     resetSettingHeaderText: Rétablir le réglage ?
     resetTaskHeaderText: Réinitialiser cette tâche ?
     resetToDefaultMessage: Cette opération ne peut pas être annulée. Êtes-vous sûr de vouloir rétablir les paramètres par défaut ?
@@ -787,6 +790,7 @@ ch.ivy.addon.portalkit.ui.jsf:
       dashboardIcon: Icône du tableau de bord
       dashboardPermission: Autorisation du tableau de bord
       dashboardTitle: Titre du tableau de bord
+      deleteDashboardMessage: Êtes-vous sûr de vouloir supprimer le "{0}" tableau de bord?
       editDashboard: Modifier le tableau de bord
       manageDashboard: Gérer le tableau de bord
       removeDashboardHeader: Supprimez le tableau de bord "{0}".
@@ -1283,7 +1287,7 @@ Dialogs:
               noResultsText: Il n'y a pas de résultats.
             dashboard:
               PortalDashboardConfiguration:
-                NewDashboard: Nouveau tableau de bord
+                NewDashboard: Ajouter un nouveau tableau de bord
               component:
                 CustomDashboardWidget:
                   CouldNotFindLinkedProcess: Impossible de trouver le processus lié !
@@ -1327,6 +1331,7 @@ Dialogs:
         component:
           ShareLinkDialog:
             CopyLink: Copier le lien
+            Link: Lien
             LinkCopied: Lien copié
         dashboard:
           component:
diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/AbstractProcessBean.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/AbstractProcessBean.java
index 96c5d1375e4..716c9b61865 100644
--- a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/AbstractProcessBean.java
+++ b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/AbstractProcessBean.java
@@ -51,7 +51,7 @@ public String getProcessInformationPageUrl(Process process) {
     if (nestedProcess instanceof IWebStartable) {
       processId = ((IWebStartable) nestedProcess).getId();
     }
-    return PortalNavigator.buildProcessInfoUrl(processId);
+    return PortalNavigator.buildProcessInfoUrl(processId.isEmpty() ? process.getId() : processId );
   }
 
   protected abstract List<Process> findProcesses();
diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/process/DashboardProcess.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/process/DashboardProcess.java
index 3bd179fc83c..5809a8ef854 100644
--- a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/process/DashboardProcess.java
+++ b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/process/DashboardProcess.java
@@ -210,4 +210,8 @@ public void setProcessElementId(String processElementId) {
   public String getPortalProcessInformation() {
     return portalProcessInformation;
   }
+  
+  public String getDefaultImageDarkLink() {
+    return getContentImageUrl(DefaultImage.PROCESSMODELINGDARK.getPath());
+  }
 }
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml
index ddd670f9851..e9e1e26332e 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml
@@ -62,16 +62,11 @@
             </h:panelGroup>
             <h:panelGroup>
               <div class="u-text-align-right ui-g-12">
-               <p:commandButton id="back-to-home-button" actionListener="#{logic.backToHome()}"
-                  styleClass="u-mar-right-5 ui-button-secondary dashboard__restore-button"
-                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/errorPage/backToHomePage')}" update="dashboard-configuration-content"
-                  icon="#{visibilityBean.generateButtonIcon('si si-house-chimney-2')}"
-                  title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/errorPage/backToHomePage')}" />
                 <p:commandButton id="create-dashboard-action" 
                   actionListener="#{dashboardConfigurationBean.addNewDashboard(isPublicDashboard)}"
                   value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/NewDashboard')}" 
-                  styleClass="dashboard-action-container-icon #{selectedDashboardTypeStyleClass}"
-                  icon="si si-add" partialSubmit="true"
+                  styleClass="dashboard-action-container-icon #{selectedDashboardTypeStyleClass} w-full primary-color-light-button"
+                  partialSubmit="true"
                   oncomplete="PF('create-new-dashboard-dialog').show();"
                   title="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/NewDashboard')}" />
               </div>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardDetails/DashboardDetails.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardDetails/DashboardDetails.xhtml
index 47a22093885..7ac2cef7b46 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardDetails/DashboardDetails.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardDetails/DashboardDetails.xhtml
@@ -15,8 +15,8 @@
   <c:set var="managedBean" value="#{cc.attrs.managedBean}" />
 
   <p:dialog id="#{cc.attrs.detailDialogId}" widgetVar="#{cc.attrs.detailDialogId}"
-    styleClass="js-#{cc.attrs.detailDialogId} #{isPublicDashboard ? 'create-public-dashboard-dialog' : 'create-private-dashboard-dialog'}"
-    header="#{cc.attrs.title}"
+    styleClass="js-#{cc.attrs.detailDialogId} #{isPublicDashboard ? 'create-public-dashboard-dialog' : 'create-private-dashboard-dialog'} w-30rem "
+    header="#{cc.attrs.title}" 
     appendTo="@(body)" closeOnEscape="true" draggable="false" fitViewport="true" responsive="true" modal="true"
     minWidth="300">
 
@@ -24,19 +24,19 @@
       <p:messages id="dashboard-detail-messages" />
       <div class="ui-g">
 
-        <div class="ui-g-4 manage-dashboard__label">
+        <div class="ui-g-6 w-full manage-dashboard__label font-semibold">
           <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/dashboardIcon')}" />
         </div>
-        <div class="ui-g-8">
+        <div class="ui-g-6 w-full">
           <ic:ch.ivy.addon.portalkit.component.IconSelection
             value="#{managedBean.selectedDashboard.icon}" />
         </div>
 
-        <div class="ui-g-4 manage-dashboard__label">
-          <p:outputLabel for="dashboard-title"
+        <div class="ui-g-6 manage-dashboard__label w-full">
+          <p:outputLabel for="dashboard-title" styleClass="font-semibold"
             value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/dashboardTitle')}" />
         </div>
-        <div class="ui-g-8 ui-fluid  ui-inputgroup">
+        <div class="ui-g-6 w-full ui-fluid  ui-inputgroup">
           <p:inputText id="dashboard-title" value="#{managedBean.selectedDashboard.title}"
             required="#{param['skipValidator'] == null}" styleClass="manage-dashboard__input" />
           <p:commandButton id="add-language-button" icon="si si-chat-translate"
@@ -47,12 +47,12 @@
             <f:param name="skipValidator" value="true" />
           </p:commandButton>
         </div>
-        <h:panelGroup layout="block" styleClass="ui-g-4 manage-dashboard__label"
+        <h:panelGroup layout="block" styleClass="ui-g-6 w-full manage-dashboard__label"
           rendered="#{cc.attrs.isPublicDashboard}">
-          <p:outputLabel for="dashboard-permission"
+          <p:outputLabel for="dashboard-permission" styleClass="font-semibold"
             value="#{ivy.cms.co('/Labels/Permissions')}" />
         </h:panelGroup>
-        <h:panelGroup layout="block" styleClass="ui-g-8 ui-fluid" rendered="#{cc.attrs.isPublicDashboard}">
+        <h:panelGroup layout="block" styleClass="ui-g-6 w-full ui-fluid" rendered="#{cc.attrs.isPublicDashboard}">
           <p:autoComplete id="dashboard-permission" scrollHeight="210" dropdown="true" required="#{param['skipValidator'] == null}"
             completeMethod="#{managedBean.completePermissions}" styleClass="manage-dashboard__input"
             inputStyleClass="manage-dashboard__autocomplete-input"
@@ -74,13 +74,13 @@
             </p:column>
           </p:autoComplete>
         </h:panelGroup>
-        <div class="ui-g-4 manage-dashboard__label">
-          <p:outputLabel for="dashboard-description"
+        <div class="ui-g-6 w-full manage-dashboard__label">
+          <p:outputLabel for="dashboard-description" styleClass="font-semibold"
             value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/description')}" />
         </div>
-        <div class="ui-g-8 ui-fluid">
+        <div class="ui-g-6 w-full ui-fluid">
           <p:inputText id="dashboard-description" value="#{managedBean.selectedDashboard.description}"
-            required="false" styleClass="manage-dashboard__input" />
+            required="false" styleClass="manage-dashboard__input " />
         </div>
       </div>
     </h:form>
@@ -93,22 +93,16 @@
       componentToUpdateOnCreate="dashboard-template-selection-component:dashboard-creation-component:dashboard-detail-form:dashboard-title" />
     <f:facet name="footer">
       <h:panelGroup layout="block" styleClass="u-text-align-right">
-        <p:commandLink id="dashboard-detail-close-button"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-          onclick="PF('#{cc.attrs.detailDialogId}').hide(); return false;" />
-        <p:spacer width="15" />
-        <p:commandButton id="dashboard-detail-save-button"
+        <p:commandButton id="dashboard-detail-save-button" styleClass="w-full"
           rendered="#{!cc.attrs.isDashboardCreation}"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
           actionListener="#{managedBean.saveDashboardDetail()}"
           process="dashboard-detail-form" partialSubmit="true"
-          icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
           update="dashboard-detail-form #{cc.attrs.componentToUpdate}"
           oncomplete="if (args &amp;&amp; !args.validationFailed) {PF('#{cc.attrs.detailDialogId}').hide();}" />
-        <p:commandButton id="dashboard-create-button"
+        <p:commandButton id="dashboard-create-button" styleClass="w-full"
           rendered="#{cc.attrs.isDashboardCreation}"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/CreateDashboard')}"
-          icon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
           actionListener="#{managedBean.createDashboard()}"
           process="dashboard-detail-form"
           update="dashboard-detail-form"
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml
index 286dee4c9f6..b9257e11009 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml
@@ -14,7 +14,7 @@
   <f:event listener="#{dashboardModificationBean.initConfigration(isPublicDashboard)}" type="preRenderComponent" />
   <h:panelGroup id="dashboard-modification-container" styleClass="ui-g-12">
 
-    <p:dataTable id="dashboard-table" lazy="false" draggableRows="true" rowDragSelector="i.si-move-expand-vertical"
+    <p:dataTable id="dashboard-table" lazy="false" draggableRows="true" rowDragSelector="i.si-navigation-menu"
       value="#{dashboardModificationBean.dashboards}" var="dashboard"
       styleClass="ui-g-12 u-no-padding-left u-no-padding-right"
       emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/noRecordsFound')}">
@@ -40,46 +40,48 @@
         </h:panelGroup>
       </p:column>
       
-      <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}" width="#{dashboardModificationBean.hasExportDashboardPermission() ? '250' : '210'}"
-        styleClass="u-text-align-center">
-        <h:panelGroup styleClass="rounded-button ui-button-outlined action-column-icon-button u-mar-right-5">
-         <i id="reorder-button-#{dashboard.id}" class="si si-move-expand-vertical dashboard-icon-drag-drop" />
-        </h:panelGroup>
-          
-        <p:commandButton id="edit" process="@this" icon="si si-graphic-tablet-drawing-pen"
-          styleClass="rounded-button ui-button-outlined action-column-icon-button u-mar-right-5"
-          actionListener="#{dashboardModificationBean.openDashboardDetailDialog(dashboard)}"
-          update="#{cc.clientId}:configuration-dashboard-detail-component:dashboard-detail-form"
-          oncomplete="PF('configuration-dashboard-detail-dialog').show()"
-          title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
-          resetValues="true"/>
-
-        <p:commandButton id="configure-dashboard" styleClass="rounded-button ui-button-outlined action-column-icon-button u-mar-right-5" icon="si si-cog"
-          actionListener="#{dashboardModificationBean.navigateToDashboardDetailsPage(dashboard.id)}"
-          title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/configuration')}"
-          process="@this" update="@this"/>
-
-       <h:form styleClass="dashboard-configuration__export-button-form" rendered="#{dashboardModificationBean.hasExportDashboardPermission()}">
-         <p:commandButton id="export-dashboard" styleClass="rounded-button ui-button-outlined action-column-icon-button u-mar-right-5 export-dashboard" icon="si si-download-bottom"
-           title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}"
-           process="@this" update="@this" immediate="true" ajax="false">
-           <p:fileDownload value="#{dashboardModificationBean.exportToJsonFile(dashboard)}" />
-         </p:commandButton>
-        </h:form>
-
-        <p:commandButton id="share-dashboard" rendered="#{dashboardModificationBean.isShowShareButtonOnConfig(isPublicDashboard)}"
-          styleClass="rounded-button ui-button-outlined action-column-icon-button u-mar-right-5"
-          actionListener="#{dashboardModificationBean.initShareDashboardLink(dashboard)}"
-          oncomplete="PF('share-dashboard-dialog').show()"
-          icon="si si-share" update="#{cc.clientId}:share-dashboard-component:share-dashboard-dialog"
-          title="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/Share')}" global="false"/>
-
-        <p:commandButton id="delete-dashboard" process="@this"
-          styleClass="rounded-button ui-button-outlined action-column-icon-button ui-button-danger" icon="si si-bin-1"
-          actionListener="#{dashboardModificationBean.onSelectedDeleteDashboard(dashboard)}"
-          update="dashboard-modification-component:remove-dashboard-dialog"
-          oncomplete="PF('remove-dashboard-dialog').show()"
-          title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"/>
+      <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}" width="#{dashboardModificationBean.hasExportDashboardPermission() ? '120' : '210'}">
+        <div id="dashboard-configuration-action-group" class="dashboard-configuration-action-group">
+            <h:panelGroup layout="block">
+                <p:commandButton id="dashboard-configuration-action-button" icon="fa fa-ellipsis-h" styleClass="rounded-button icon-more-menu-button #{buttonStyle} ui-no-rounded-button-process-page mr-3"
+                     type="button"/>
+                <p:menu id="dashboard-configuration-action-menu" styleClass="w-12rem" overlay="true" trigger="dashboard-configuration-action-button" my="right top" at="right bottom">
+                    <p:menuitem id="edit" process="@this" actionListener="#{dashboardModificationBean.openDashboardDetailDialog(dashboard)}"
+                        icon="si si-graphic-tablet-drawing-pen" styleClass="dashboard-configuration-action-menu-icon" update="#{cc.clientId}:configuration-dashboard-detail-component:dashboard-detail-form"
+                        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}" oncomplete="PF('configuration-dashboard-detail-dialog').show()"
+                        target="_blank" resetValues="true" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
+                        rendered="true"/>
+                    <p:menuitem id="configure-dashboard" process="@this" actionListener="#{dashboardModificationBean.navigateToDashboardDetailsPage(dashboard.id)}"
+                        icon="si si-cog" update="@this" styleClass="dashboard-configuration-action-menu-icon"
+                        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/configuration')}"
+                        rendered="true" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/configuration')}"/>
+                     <p:menuitem id="export-dashboard" styleClass="pr-0 pt-0 pb-0" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}">
+                       <h:form styleClass="dashboard-configuration__export-button-form w-full" rendered="#{dashboardModificationBean.hasExportDashboardPermission()}">
+                         <p:commandButton id="export-dashboard" styleClass=" action-column-icon-button export-dashboard ui-no-rounded-button-process-page flex w-full" icon="si si-download-bottom"
+                           title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}"
+                           process="@this" update="@this" immediate="true" ajax="false" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}">
+                           <p:fileDownload value="#{dashboardModificationBean.exportToJsonFile(dashboard)}" />
+                         </p:commandButton>
+                        </h:form>
+                    </p:menuitem>
+                    <p:menuitem id="share-dashboard" rendered="#{dashboardModificationBean.isShowShareButtonOnConfig(isPublicDashboard)}"
+                          styleClass="rounded-button ui-button-outlined"
+                          actionListener="#{dashboardModificationBean.initShareDashboardLink(dashboard)}"
+                          oncomplete="PF('share-dashboard-dialog').show()" title="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/Share')}"
+                          icon="si si-share" update="#{cc.clientId}:share-dashboard-component:share-dashboard-dialog"
+                          value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/Share')}" global="false" />
+                    <p:menuitem id="delete-dashboard" process="@this"
+                          styleClass="rounded-button ui-button-outlined ui-button-danger color-destroy" icon="si si-bin-1"
+                          actionListener="#{dashboardModificationBean.onSelectedDeleteDashboard(dashboard)}"
+                          update="dashboard-modification-component:remove-dashboard-dialog"
+                          oncomplete="PF('remove-dashboard-dialog').show()" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
+                          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}" />
+                </p:menu>
+              </h:panelGroup>
+              <h:panelGroup styleClass=" ui-button-outlined action-column-icon-button u-mar-right-5">
+                <i id="reorder-button-#{dashboard.id}" class="si si-navigation-menu dashboard-icon-drag-drop" />
+               </h:panelGroup>
+        </div>
       </p:column>
     </p:dataTable>
   </h:panelGroup>
@@ -100,21 +102,23 @@
   <ui:decorate template="/layouts/decorator/portal-dialog-with-icon.xhtml">
     <ui:param name="id" value="remove-dashboard-dialog" />
     <ui:param name="widgetVar" value="remove-dashboard-dialog" />
-    <ui:param name="appendTo" value="@(body)" />
     <ui:param name="iconClass" value="si si-delete-1" />
+    <ui:param name="appendTo" value="@(body)" />
+    <ui:param name="closeable" value="true" />
+    <ui:param name="closeOnEscape" value="true" />
     <ui:param name="iconStyleClass" value="portal-dialog-error-icon portal-dialog-icon" />
     <ui:param name="headerText"
-      value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/removeDashboardHeader', [dashboardModificationBean.selectedDashboard.title])}" />
-    <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/removeWidgetMessage')}" />
-
+      value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/deleteDashboardMessage',[dashboardModificationBean.selectedDashboard.title])}" />
     <ui:define name="dialogFooter">
-      <p:link href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-        onclick="PF('remove-dashboard-dialog').hide();" styleClass="u-mar-right-15" />
-      <p:commandButton id="remove-dashboard-button"
+      <div class="flex flex-column">
+      <p:commandButton id="remove-dashboard-button" styleClass="w-full"
         value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
         actionListener="#{dashboardModificationBean.removeDashboard()}"
-        icon="#{visibilityBean.generateButtonIcon('si si-remove-circle')}" update="dashboard-modification-container"
+        update="dashboard-modification-container"
         oncomplete="PF('remove-dashboard-dialog').hide();" />
+      <p:link href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+        onclick="PF('remove-dashboard-dialog').hide();" styleClass="ui-button-flat pt-3 flex justify-content-center" />
+      </div>
     </ui:define>
   </ui:decorate>
 </cc:implementation>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/ProcessWidget/ImageModeProcess.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/ProcessWidget/ImageModeProcess.xhtml
index 8f4aa7e8c5e..cc6c424122e 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/ProcessWidget/ImageModeProcess.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/ProcessWidget/ImageModeProcess.xhtml
@@ -8,7 +8,7 @@
 
   <h:panelGroup layout="block" styleClass=" widget-content image-process-item widget-height-100" rendered="#{not empty process}" >
     <div class="card-item card image-widget-mode js-image-widget-mode ui-g-12 u-padding-0 ">
-      <div class="image-process-item-container js-image-process-item-container ui-process-image-mode">
+      <div class="image-process-item-container js-image-process-item-container">
         <h:form id="image-view-action-group-form" styleClass="image-view-action-group-form">
           <ic:ch.ivy.addon.portalkit.component.process.ProcessItemAction id="image-process-action-component" process="#{process}"
             canModify="#{!isInConfiguration and !isReadOnlyMode}"
@@ -20,20 +20,26 @@
             componentToUpdateOnDeleteProcess="remove-widget-dialog"
             outlinedButtonStyle="false"
             hideActionButton="#{isInConfiguration}"
+            isInConfiguration="#{isInConfiguration}"
+            isReadOnlyMode="#{isReadOnlyMode}"
             isDashboardProcessWidget="true"
             isInProcessList="false"/>
         </h:form>
 
         <h:panelGroup rendered="#{isDefaultProcessImage}">
-          <img class="image-process-item-image"
+          <img class="image-process-item-image default-image-mode-process"
             alt="#{process.getName()}" src="#{process.imageUrl}" />
+           <p:graphicImage 
+              styleClass="image-process-item-image default-image-mode-process-dark"
+              alt="#{process.getName()}"
+              name="#{process.imageUrl}" srcset="#{process.defaultImageDarkLink}"/>
         </h:panelGroup>
         <p:graphicImage rendered="#{!isDefaultProcessImage}"
           cache="true" styleClass="image-process-item-image"
           alt="#{process.getName()}" library="ivy-cms"
           name="#{process.imageUrl}" />
       </div>
-
+    
      <h:form id="process-item" target="#{dashboardProcessBean.targetToStartProcess(process)}" styleClass="image-view-form #{isExternalLink ? 'is-external-link' : ''}">
             <div class="process-name js-process-start-list-item-name">
               <h:outputText id="process-item-name" value="#{process.getName()}" styleClass=" process-image-view-name" />
@@ -53,15 +59,6 @@
             id="start-button" actionListener="#{dashboardProcessBean.startProcess(process)}" icon="si si-arrow-right-1"
             ajax="#{!isExternalLink}" iconPos="right"
             disabled="#{!isReadOnlyMode or isInConfiguration}" />
-          <div class="more-information-wrapper" >
-            <p:link id="more-information"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/processwidget/MoreInformation')}"
-              styleClass="process-more-info-link"
-              href="#{dashboardProcessBean.getProcessInformationPageUrl(process)}"
-              disabled="#{!isReadOnlyMode or isInConfiguration}"
-              rendered="#{dashboardProcessBean.isShowInformationLink(process) and !isExternalLink and !isCaseMap}"
-              />
-          </div>
         </div>
         
       </h:form>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
index 273cf2246f0..7601f6bf974 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
@@ -30,7 +30,7 @@
   <c:set var="isPreviewMode" value="#{cc.attrs.isPreviewMode}"/>
 
   <p:commandLink id="#{cc.attrs.actionLinkId}" onclick="event.stopPropagation(); return false;" ariaLabel="#{caseBean.getAriaLabel(case)}"
-    styleClass="#{isPreviewMode ? '' : cc.attrs.actionLinkStyleClass} #{cc.attrs.taskId} action-link portal-icon" disabled="#{cc.attrs.readOnly or isPreviewMode}">
+    styleClass="#{isPreviewMode ? '' : cc.attrs.actionLinkStyleClass} #{cc.attrs.taskId} action-link portal-icon ui-sidestep-action" disabled="#{cc.attrs.readOnly or isPreviewMode}">
     <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}" styleClass="task-action-item-label" />
     <i class="si si-arrow-down-1" />
   </p:commandLink>
@@ -39,20 +39,20 @@
     for="#{cc.attrs.actionLinkId}" my="right top" at="right bottom" showCloseIcon="true" dismissable="true"
     appendTo="@(body)" styleClass="action-steps-panel #{cc.attrs.stepsPanelStyleClass}" dynamic="true">
 
-    <p:commandLink id="case-item-open-detail-link" styleClass="case-command action-step-item"
+    <p:commandLink id="case-item-open-detail-link" styleClass="case-command action-step-item ui-menu-items"
       actionListener="#{logic.openDetails(case, inFrame)}" rendered="#{showOpenCaseDetail}">
       <span class="action-icon si si-information-circle" />
       <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/detail')}" />
     </p:commandLink>
 
-    <p:link id="show-process-overview-link" styleClass="additional-case-details-link action-step-item"
+    <p:link id="show-process-overview-link" styleClass="additional-case-details-link action-step-item ui-menu-items"
       rendered="#{showProcessOverview}"
       href="#{caseActionBean.getProcessOverviewPageUri(case)}">
       <i class="si si-presentation-statistics" />
       <span>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseDetails/showProcessOverview')}</span>
     </p:link>
 
-    <p:link id="show-additional-case-details-link" styleClass="additional-case-details-link case-command action-step-item" target="_blank"
+    <p:link id="show-additional-case-details-link" styleClass="additional-case-details-link case-command action-step-item ui-menu-items" target="_blank"
       href="#{caseActionBean.getAdditionalCaseDetailsPageUri(case)}" rendered="#{showAdditionalCaseDetails}">
       <i class="action-icon si si-business-contract-handshake-sign" />
       <h:outputText value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portalkit/component/CaseWidget/ShowBusinessDetails')}" />
@@ -60,8 +60,8 @@
 
     <p:commandLink id="destroy-case" rendered="#{renderDestroyAction}" update="#{cc.attrs.update}"
       actionListener="#{caseWidgetBean.setSelectedCase(case)}"
-      styleClass="case-command action-step-item" process="@this" oncomplete="#{cc.attrs.onDestroyComplete}">
-      <span class="action-icon si si-remove" />
+      styleClass="case-command action-step-item color-destroy ui-menu-items" process="@this" oncomplete="#{cc.attrs.onDestroyComplete}">
+      <span class="action-icon pi pi-trash" />
       <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}" />
     </p:commandLink>
 
@@ -73,8 +73,6 @@
       <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/ProcessViewer/ProcessViewerText')}" />
     </p:link>
 
-    <p:divider styleClass="case-action-separator" rendered="#{showSeparator}" />
-
     <h:panelGroup id="side-steps">
       <f:event listener="#{sideStepBean.getSideSteps(cc.attrs.taskId, case.id)}" type="preRenderComponent" />
       <h:outputText rendered="#{empty sideStepBean.currentSideSteps}" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseDetails/noSideSteps')}" styleClass="action-step-item" />
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml
index 7d72583a4b5..9d4102e3ed8 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml
@@ -356,7 +356,7 @@
         <p:outputPanel id="external-link-preview-image-panel" styleClass="ui-external-link-preview-image-panel" >
             <span class="ui-external-link-preview-image-label">
             <i class="si si-file-code-upload-1" id="ui-external-link-preview-image-icon" />
-            <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/dragAndDrop')}">
+            <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/dragAndDropImage')}">
             <p:link value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/uploadOneHere')}" onclick="PF('externalLinkUpload').show();return false"/>
             </p:outputLabel>
             </span>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml
index a9531d0d0af..7a55612da93 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml
@@ -41,63 +41,63 @@
     styleClass="options-panel #{cc.attrs.sideStepsPanelStyleClass}" dynamic="true" rendered="#{!cc.attrs.isDisabled}"
     my="right top" at="right bottom" showCloseIcon="true" dismissable="true">
 
-    <p:commandLink id="task-open-detail-command" styleClass="option-item"
+    <p:commandLink id="task-open-detail-command" styleClass="option-item ui-menu-items"
       actionListener="#{logic.openDetails(task, dataModel, cc.attrs.inFrame)}" rendered="#{cc.attrs.showDetailOption}">
       <i class="option-action-icon si si-information-circle" />
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/detail')}</span>
     </p:commandLink>
 
     <p:commandLink id="task-reset-command" onstart="event.stopPropagation();" rendered="#{taskActionBean.showResetTask}" disabled="#{!taskActionBean.canReset(task)}"
-      styleClass="option-item" actionListener="#{logic.resetTask(task)}" update="@parent #{cc.attrs.componentToUpdate}">
-      <i class="option-action-icon si si-road-sign-u-turn-left" />
+      styleClass="option-item ui-menu-items" actionListener="#{logic.resetTask(task)}" update="@parent #{cc.attrs.componentToUpdate}">
+      <i class="option-action-icon si si-undo" />
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/reset')}</span>
     </p:commandLink>
 
     <p:commandLink id="task-delegate-command" disabled="#{!taskActionBean.canDelegate(task)}" rendered="#{taskActionBean.showDelegateTask}"
-      styleClass="option-item" onstart="event.stopPropagation();"
+      styleClass="option-item ui-menu-items" onstart="event.stopPropagation();"
       oncomplete="#{cc.attrs.onDelegateComplete}" global="false"
       actionListener="#{taskActionBean.updateSelectedTaskItemId(isShowInTaskList, task.id)}"
       update="@parent #{cc.attrs.componentToUpdate} @widgetVar(task-delegate-dialog)" process="@this">
-      <i class="option-action-icon si si-road-sign-u-turn-right" />
+      <i class="option-action-icon si si-multiple-neutral-1" />
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskInformation/delegate')}</span>
     </p:commandLink>
 
     <p:commandLink id="task-reserve-command" disabled="#{!taskActionBean.canPark(task)}" rendered="#{taskActionBean.showReserveTask}" onstart="event.stopPropagation();"
-      styleClass="option-item" actionListener="#{logic.parkTask(task)}" update="@parent #{cc.attrs.componentToUpdate}" process="@this">
-      <i class="option-action-icon si si-navigation-right-circle" />
+      styleClass="option-item ui-menu-items" actionListener="#{logic.parkTask(task)}" update="@parent #{cc.attrs.componentToUpdate}" process="@this">
+      <i class="option-action-icon si si-calendar-date" />
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/reserve')}</span>
     </p:commandLink>
     
     <p:commandLink id="task-clear-delay-command" disabled="#{!taskActionBean.canChangeDelayTimestamp(task)}" rendered="#{taskActionBean.showClearDelayTime(task)}"
-      styleClass="option-item" actionListener="#{logic.clearDelay(task)}" update="@parent #{cc.attrs.componentToUpdate}">
+      styleClass="option-item ui-menu-items" actionListener="#{logic.clearDelay(task)}" update="@parent #{cc.attrs.componentToUpdate}">
       <i class="option-action-icon si si-button-refresh-arrows" />
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskInformation/clearDelay')}</span>
     </p:commandLink>
     
     <p:commandLink id="task-clear-expiry-command" disabled="#{!taskActionBean.canChangeExpiry(task)}" rendered="#{taskActionBean.showClearExpiryTime(task)}"
-      styleClass="option-item" actionListener="#{logic.clearExpiryTime(task)}" update="@parent #{cc.attrs.componentToUpdate}">
+      styleClass="option-item ui-menu-items" actionListener="#{logic.clearExpiryTime(task)}" update="@parent #{cc.attrs.componentToUpdate}">
       <i class="option-action-icon si si-button-refresh-arrows" />
       <span class="option-item-label option-item-long-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskInformation/clearExpiry')}</span>
     </p:commandLink>
     
     <p:commandLink id="task-destroy-command" disabled="#{!taskActionBean.canDestroyTask(task)}" rendered="#{taskActionBean.showDestroyTask}"
-      styleClass="option-item" update="@parent #{cc.attrs.componentToUpdate}"
+      styleClass="option-item color-destroy ui-menu-items" update="@parent #{cc.attrs.componentToUpdate}"
       actionListener="#{taskActionBean.updateSelectedTaskItemId(isShowInTaskList, task.id)}"
       oncomplete="#{cc.attrs.onDestroyComplete}" process="@this" global="false">
-      <i class="option-action-icon si si-remove" />
+      <i class="option-action-icon pi pi-trash" />
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}</span>
     </p:commandLink>
     
     <p:commandLink id="task-trigger-escalation-command" disabled="#{!taskActionBean.canExpiry(task)}"
-      styleClass="option-item" update="@parent #{cc.attrs.componentToUpdate}"
+      styleClass="option-item ui-menu-items" update="@parent #{cc.attrs.componentToUpdate}"
       actionListener="#{taskActionBean.updateSelectedTaskItemId(isShowInTaskList, task.id)}"
       oncomplete="#{cc.attrs.onEscalationComplete}" process="@this" global="false">
-      <i class="option-action-icon si si-synchronize-arrow-clock" />
+      <i class="option-action-icon si si-time-clock-circle" />
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskInformation/triggerEscalation')}</span>
     </p:commandLink>
     
     <p:commandLink id="task-workflow-event-command" disabled="#{!taskActionBean.canReadWorkflowEventTask()}" rendered="#{taskActionBean.showReadWorkflowEvent}"
-      styleClass="option-item" onstart="event.stopPropagation();" process="@this"
+      styleClass="option-item ui-menu-items" onstart="event.stopPropagation();" process="@this"
       update="@parent #{cc.attrs.componentToUpdate} @widgetVar(workflow-events-dialog)"
       actionListener="#{taskActionBean.updateSelectedTaskItemId(isShowInTaskList, task.id)}"
       oncomplete="#{cc.attrs.onWorkflowEventComplete}" global="false" >
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessGridItem/ProcessGridItem.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessGridItem/ProcessGridItem.xhtml
index 43b3be8bb36..32abdff1dcf 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessGridItem/ProcessGridItem.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessGridItem/ProcessGridItem.xhtml
@@ -48,6 +48,8 @@
           hideActionButton="#{cc.attrs.isInConfiguration}"
           isProcessGridMode="true"
           isInProcessList="false"
+          isReadOnlyMode="#{!cc.attrs.readOnlyMode}"
+          isInConfiguration="#{cc.attrs.isInConfiguration}"
           />
 
         <p:commandLink id="start-process-link" styleClass="process-grid__header"
@@ -78,12 +80,6 @@
             ajax="#{!isExternalLink}"
             disabled="#{cc.attrs.readOnlyMode}" />
         </div>
-          <div class="more-information-wrapper" >
-            <p:link id="more-information" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/processwidget/MoreInformation')}"
-              href="#{managedBean.getProcessInformationPageUrl(process)}"
-              rendered="#{cc.attrs.showInformationLink and !isExternalLink and !isCaseMap}"
-              disabled="#{cc.attrs.readOnlyMode}" styleClass="process-more-info-link"/>
-          </div>
         <p:tooltip for="process-name" value="#{process.name}" trackMouse="true" hideEvent="mouseleave click" styleClass="process-tooltip"/>
       </h:form>
     </div>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml
index 8b8604aa437..bf3bdc12550 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml
@@ -16,6 +16,8 @@
   <cc:attribute name="isDashboardProcessWidget" default="false"/>
   <cc:attribute name="status"/>
   <cc:attribute name="isInProcessList" default="true" />
+  <cc:attribute name="isReadOnlyMode" default="true"/>
+  <cc:attribute name="isInConfiguration" default="false" />
 </cc:interface>
 
 <cc:implementation>
@@ -60,7 +62,8 @@
           icon="si si-information-circle"
           url="#{processWidgetBean.getProcessInformationPageUrl(process)}"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/processwidget/MoreInformation')}"
-          rendered="#{processWidgetBean.isShowInformationLink(process) and !isExternalLink and !isCaseMap and cc.attrs.isInProcessList}"/>
+          disabled="#{!cc.attrs.isReadOnlyMode or cc.attrs.isInConfiguration}"
+          rendered="#{processWidgetBean.isShowInformationLink(process) and !isExternalLink and !isCaseMap}"/>
       </p:menu>
     </h:panelGroup>
     <div class="start-process" id="start-button-wrap-#{cc.attrs.status.index}" >
diff --git a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/component/ShareLinkDialog/ShareLinkDialog.xhtml b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/component/ShareLinkDialog/ShareLinkDialog.xhtml
index 2611cf4060d..fb691c6d305 100644
--- a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/component/ShareLinkDialog/ShareLinkDialog.xhtml
+++ b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/component/ShareLinkDialog/ShareLinkDialog.xhtml
@@ -21,24 +21,21 @@
     widgetVar="#{cc.attrs.shareDialogId}"
     styleClass="share-dialog"
     header="#{cc.attrs.title}" appendTo="@(body)" closeOnEscape="true"
-    draggable="false" fitViewport="true" responsive="true" modal="true" closable="false" 
+    draggable="false" fitViewport="true" responsive="true" modal="true" closable="true" 
     width="auto" focus="@(none)" onShow="checkCopyFeature()">
-
-    <div class="ui-fluid ui-inputgroup">
+    <p:outputLabel styleClass="text-xl pl-2 pb-2 font-semibold" value="#{ivy.cms.co('/Dialogs/com/axonivy/portal/component/ShareLinkDialog/Link')}" />
+    <div class="ui-fluid ui-inputgroup pl-2 mt-3">
       <p:inputText id="url"
         value="#{cc.attrs.url}" readonly="true"
         styleClass="manage-dashboard__input" />
     </div>
     <f:facet name="footer">
-      <h:panelGroup layout="block" styleClass="u-text-align-right">
-        <p:link id="share-link-close-button"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/close')}"
-          onclick="PF('#{cc.attrs.shareDialogId}').hide(); return false;"/>
+      <h:panelGroup layout="block" styleClass="u-text-align-right p-1">
         <p:spacer width="15" />
         <p:commandButton id="share-link-copy-button" 
           value="#{ivy.cms.co('/Dialogs/com/axonivy/portal/component/ShareLinkDialog/CopyLink')}"
           onclick="copyToClipboard('#{cc.attrs.url}')" 
-          actionListener="#{masterDataBean.showLinkCopiedMessage()}" global="false"/>
+          actionListener="#{masterDataBean.showLinkCopiedMessage()}" global="false" styleClass="w-full"/>
       </h:panelGroup>
     </f:facet>
   </p:dialog>
diff --git a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml
index a11490668e3..66dc0bc7663 100644
--- a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml
+++ b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml
@@ -34,15 +34,23 @@
         </div>
         <div class="ui-g-12">
           <p:fileUpload id="dashboard-upload" chooseIcon="#{visibilityBean.generateButtonIcon('si si-touchpad-finger')}"
-            dragDropSupport="true" fileLimit="1"
+            dragDropSupport="true" fileLimit="1" widgetVar="dashboardUpload" style="display: none;"
             label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/select')}"
             styleClass="dashboard-upload" mode="advanced"
             listener="#{managedBean.loadImportedFile}"
             allowTypes="/(\.|\/)(json)$/i"
             update="import-dashboard-form import-dashboard-dialog-message #{p:resolveFirstComponentWithId('footer-button-container', view).clientId}"
-            value="#{managedBean.importFile}" auto="true" 
+            value="#{managedBean.importFile}" auto="true" dropZone="dashboard-upload-file-panel"
             requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/requiredFieldMessage')}" oncomplete="PF('#{cc.attrs.importDialogId}').initPosition();">
           </p:fileUpload>
+          <p:outputPanel id="dashboard-upload-file-panel" styleClass="ui-dashboard-upload-file-panel" >
+              <span class="ui-dashboard-upload-file-label">
+              <i class="si si-file-code-upload-1" id="ui-dashboard-upload-file-icon" />
+              <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/dragAndDropFile')}">
+              <p:link value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/uploadOneHere')}" onclick="PF('dashboardUpload').show();return false"/>
+              </p:outputLabel>
+              </span>
+          </p:outputPanel>
         </div>  
 
         <div class="ui-g-12">
@@ -51,10 +59,10 @@
       </h:panelGroup>
 
       <h:panelGroup styleClass="ui-g" rendered="#{managedBean.loaded and not managedBean.isError}">
-        <div class="ui-g-2 import-dashboard-label mb-2">
+        <div class="ui-g-3 import-dashboard-label mb-2">
           <p:outputLabel value="#{ivy.cms.co('/Dialogs/com/axonivy/portal/dashboard/component/DashboardImportDetails/FileInfomation')}" />
         </div>
-        <div class="ui-g-10 ui-fluid">
+        <div class="ui-g-9 ui-fluid">
           <h:outputText>#{managedBean.importFile.getFileName()} | #{managedBean.fileSize}</h:outputText>
         </div>
 
@@ -158,16 +166,11 @@
     <f:facet name="footer">
       <h:panelGroup layout="block" styleClass="u-text-align-right"
         id="footer-button-container">
-        <p:commandLink id="dashboard-import-close-button"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-          onclick="PF('#{cc.attrs.importDialogId}').hide(); return false;" />
-        <p:spacer width="15" />
         <p:commandButton id="dashboard-detail-save-button"
-          disabled="#{!managedBean.loaded}"
+          disabled="#{!managedBean.loaded}" styleClass="w-full"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/CreateDashboard')}"
           actionListener="#{managedBean.createDashboard()}"
           process="import-dashboard-form" partialSubmit="true"
-          icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
           update="import-dashboard-form #{cc.attrs.componentToUpdate}"
           oncomplete="if (args &amp;&amp; !args.validationFailed) {PF('#{cc.attrs.importDialogId}').hide();}" />
       </h:panelGroup>
diff --git a/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml b/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml
index 0545cb98fed..c0b447eaece 100644
--- a/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml
@@ -18,7 +18,7 @@
   
   <div class="u-text-align-center">
     <i class="#{not empty iconClass ? iconClass : 'si si-information-circle'} #{not empty iconStyleClass? iconStyleClass : 'portal-dialog-info-icon'} portal-dialog-icon" />
-    <h2>#{not empty headerText? headerText : ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmationHeaderText')}</h2>
+    <h2 class="text-xl" >#{not empty headerText? headerText : ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmationHeaderText')}</h2>
   </div>
   
   <ui:insert name="dialogContentSection" />
diff --git a/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml b/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml
index 98ed7c7342a..f99ee46181f 100644
--- a/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml
@@ -77,30 +77,30 @@
             <pc:securityMemberNameAndAvatar displayName="#{userMenuBean.loggedInUser}" securityMember="#{ivy.session.sessionUser}" displayNameStyleClass="user-name" />
           </a>
           <ul id="user-setting-container">
-             <li><p:commandLink id="user-profile" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/userProfile/myProfileTitle')}"
+             <li class="ui-menu-items" ><p:commandLink id="user-profile" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/userProfile/myProfileTitle')}"
                process="@this"
                actionListener="#{userMenuBean.navigateToUserProfileOrDisplayWorkingTaskWarning(isWorkingOnATask, task)}" />
              </li>
 
-            <li jsf:rendered="#{userMenuBean.showDashboardConfigurationMenu}">
+            <li class="ui-menu-items" jsf:rendered="#{userMenuBean.showDashboardConfigurationMenu}">
               <p:commandLink id="dashboard-configuration"
                 process="@this"
                 value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/Title')}"
                 actionListener="#{userMenuBean.navigateToDashboardConfigurationOrDisplayWorkingTaskWarning(isWorkingOnATask, task)}"/>
             </li>
 
-            <li jsf:rendered="#{userMenuBean.showAdminSetting}">
+            <li class="ui-menu-items" jsf:rendered="#{userMenuBean.showAdminSetting}">
               <p:commandLink id="adminui-menu-item" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/applicationMenuHeader/adminSettings')}"
                 process="@this"
                 actionListener="#{userMenuBean.navigateToPortalManagementDisplayWorkingTaskWarning(isWorkingOnATask, task)}" />
             </li>
 
-            <li jsf:rendered="#{absenceManagementBean.ownAbsencesReadable}"><p:commandLink id="absence-menu-item" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/absences')}"
+            <li class="ui-menu-items" jsf:rendered="#{absenceManagementBean.ownAbsencesReadable}"><p:commandLink id="absence-menu-item" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/absences')}"
                   process="@this"
                   actionListener="#{userMenuBean.navigateToAbsencesOrDisplayWorkingTaskWarning(isWorkingOnATask, task)}"/>
             </li>
 
-            <li jsf:rendered="#{not userMenuBean.hiddenChangePassword}"><p:commandLink id="change-password-menu-item"
+            <li class="ui-menu-items" jsf:rendered="#{not userMenuBean.hiddenChangePassword}"><p:commandLink id="change-password-menu-item"
                 process="@this"
                 value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/applicationMenuHeader/changePassword')}"
                 oncomplete="PF('changePasswordDialog').show(); $('#user-setting-container').click()"
@@ -108,10 +108,10 @@
                 <p:resetInput target=":change-password-dialog" />
               </p:commandLink></li>
 
-            <li><p:link id="project-info-menu-item" href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/projectInfo/info')}"
+            <li class="ui-menu-items"><p:link id="project-info-menu-item" href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/projectInfo/info')}"
                 onclick="rcProjectInfo(); $('#user-setting-container').click();" /></li>
             
-            <li jsf:rendered="#{userMenuBean.isShowQRCode()}"><p:link id="mobile-app-item" href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/mobile/MenuName')}" 
+            <li class="ui-menu-items" jsf:rendered="#{userMenuBean.isShowQRCode()}"><p:link id="mobile-app-item" href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/mobile/MenuName')}" 
                 onclick="PF('mobile-app-dialog').show();" /></li>
 
             <c:forEach var="menu" items="#{userMenuConfigurableBean.menus}" varStatus="status">
diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml
index b84e551c5d0..e8c21ff84c6 100644
--- a/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml
@@ -267,7 +267,7 @@
           <p:dialog id="manage-filter-dialog" widgetVar="manage-filter-dialog"
             header="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/Filter/ManageWidgetFilterHeader')}"
             modal="true" fitViewport="true" styleClass="manage-filter-dialog"
-            dynamic="true" appendTo="@(body)" closable="false"
+            dynamic="true" appendTo="@(body)" closable="true" closeOnEscape="true"
             onShow="loadAllWidgetSavedFilters();">
             <h:form id="delete-saved-filter-form" styleClass="ui-g">
               <div class="ui-g-12">
@@ -275,8 +275,8 @@
                   widgetVar="quick-filter-table" scrollHeight="300" scrollable="true" reflow="true"
                   selection="#{dashboardBean.deleteFilters}" rowKey="#{quickFilter.name}"
                   emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/EmptyFilterMessage')}" lazy="false">
-
-                  <p:column selectionMode="multiple" styleClass="saved-filter-selection-column" width="40"/>
+                  
+                  <p:column selectionMode="multiple" styleClass="saved-filter-selection-column u-text-align-center" width="20"/>
 
                   <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/name')}" width="200"
                     filterBy="#{quickFilter.name}" sortBy="#{quickFilter.name}" filterMatchMode="contains">
@@ -296,14 +296,10 @@
                 </p:dataTable>
               </div>
               <h:panelGroup id="manage-filter-action" layout="block" styleClass="ui-g-12 u-text-align-right">
-                <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/close')}"
-                  onclick="PF('manage-filter-dialog').hide();"
-                  styleClass="u-mar-right-15" global="false"/>
-                <p:commandButton id="delete-widget-filter-btn" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
+                <p:commandButton id="delete-widget-filter-btn" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/removeSelection')}"
                   process="delete-saved-filter-form" update="delete-saved-filter-form:quick-filter-table"
                   actionListener="#{dashboardBean.deleteSavedFilter()}"
-                  oncomplete="PF('quick-filter-table').clearFilters()"
-                  icon="si si-remove" />
+                  oncomplete="PF('quick-filter-table').clearFilters()" />
               </h:panelGroup>
             </h:form>
           </p:dialog>
diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml
index 12ea6c96937..3170d726d9d 100644
--- a/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml
@@ -170,7 +170,7 @@
         dynamic="true">
         <div class="ui-g widget-info--type">
           <h:outputText styleClass="ui-g-8 widget-info-type--label u-no-padding-left" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/widgetType')}" />
-          <h:outputText styleClass="ui-g-4 u-no-padding-bottom u-no-padding-left" value="#{widget.type.label}" />
+          <h:outputText styleClass="ui-g-4 u-no-padding-bottom u-no-padding-left u-text-align-right" value="#{widget.type.label}" />
         </div>
 
         <p:accordionPanel id="statistic-filter-accordion-panel-#{index}"
@@ -215,8 +215,15 @@
   
             <h:panelGroup id="widget-filter-content" styleClass="ui-g-9 u-padding-0 ui-sm-12"
               layout="block">
-              <div class="ui-g-12 filter-overlay-panel__header">
+              <div class="ui-g-12 filter-overlay-panel__header pt-3 flex">
                 <strong class="ui-g-12">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/Filter/FilterOptionHeader')}</strong>
+                <p:commandButton icon="si si-remove" id="widget-filter-cancel-button"
+                    styleClass="u-mar-right-15 ui-overlaypanel-footer__cancel flex align-items-center ui-button-flat rounded-button text-2xl"
+                    oncomplete="PF('filter-overlay-panel-#{index}').hide();"
+                    actionListener="#{widget.onCancelUserFilters()}"
+                    update="filter-form-#{index}"
+                    process="filter-form-#{index}"
+                    immediate="true" global="false"/>
               </div>
               <h:panelGroup layout="block" styleClass="ui-g-12 filter-overlay-panel__content">
                 <ui:insert name="widgetFilterContent" />
@@ -224,24 +231,27 @@
             </h:panelGroup>
           </h:panelGroup>
   
-          <div class="ui-g-12 filter-overlay-panel__footer">
-            <div class="ui-g-12 u-text-align-right">
-              <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-                styleClass="u-mar-right-15 ui-overlaypanel-footer__cancel"
-                oncomplete="PF('filter-overlay-panel-#{index}').hide();"
-                actionListener="#{widget.onCancelUserFilters()}"
-                update="filter-form-#{index}"
-                process="filter-form-#{index}"
-                immediate="true" global="false"/>
-  
-              <p:commandButton id="reset-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/reset')}"
-                styleClass="secondary-btn u-mar-right-5" partialSubmit="true"
-                process="filter-form-#{index}"
-                update="#{componentToUpdateOnResetFilter} #{cc.clientId}:widget-header-actions"
-                oncomplete="PF('filter-overlay-panel-#{index}').hide(); initWidgetFilterHtml('#{widget.id}');"
-                actionListener="#{widget.onResetUserFilters()}"
-                icon="si si-button-refresh-arrows" resetValues="true"/>
-  
+          <div class="ui-g filter-overlay-panel__footer ">
+            <div id="manage-filter" class="ui-g-3 flex justify-content-center">
+               <p:commandButton icon="si si-pencil" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/ManageFilter')}"
+                    styleClass="ui-sm-hidden saved-filter__manage-filter absolute bottom-0 mb-4 ui-button-flat" global="false"
+                    onclick="hideAllDashboardOverlayPanels(); PF('manage-filter-dialog').show();" />
+            </div>
+            <div class="ui-g-9 u-text-align-right mt-6">
+              <div class="ui-g-6">
+              <p:commandButton id="save-filter" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskView/saveFilter')}"
+                partialSubmit="true"
+                oncomplete="if (!args.validationFailed) { PF('save-widget-filter-dialog').show(); }"
+                actionListener="#{widget.onClickSaveUserFilters()}"
+                process="#{componentToProcessOnApplyFilter}"
+                global="false" styleClass="ui-sm-hidden w-full ui-widget-filter-btn"
+                update="save-filter-form" resetValues="true">
+                <f:setPropertyActionListener value="loadSaveFilters#{index}"
+                  target="#{widgetFilterHelperBean.loadFiltersRemoteCommand}"/>
+              </p:commandButton>
+              </div>
+              
+              <div class="ui-g-6">
               <p:commandButton id="apply-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/apply')}"
                 partialSubmit="true"
                 update="filter-form-#{index}"
@@ -253,20 +263,18 @@
 	                }
 	                initWidgetFilterHtml('#{widget.id}');"
                 actionListener="#{widget.onApplyUserFilters()}"
-                icon="si si-check-1"
-                styleClass="u-mar-right-5" />
-  
-              <p:commandButton id="save-filter" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskView/saveFilter')}"
-                icon="si si-floppy-disk" partialSubmit="true"
-                oncomplete="if (!args.validationFailed) { PF('save-widget-filter-dialog').show(); }"
-                actionListener="#{widget.onClickSaveUserFilters()}"
-                process="#{componentToProcessOnApplyFilter}"
-                global="false" styleClass="ui-sm-hidden"
-                update="save-filter-form" resetValues="true">
-                <f:setPropertyActionListener value="loadSaveFilters#{index}"
-                  target="#{widgetFilterHelperBean.loadFiltersRemoteCommand}"/>
-              </p:commandButton>
-              <p:defaultCommand target="apply-button"/>
+                styleClass="u-mar-right-5 w-full" />
+              </div>
+              <div class="ui-g-12 flex justify-content-center">
+              <p:commandButton id="reset-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/resetFilters')}"
+                styleClass="secondary-btn u-mar-right-5 ui-button-flat" partialSubmit="true"
+                process="filter-form-#{index}" icon="si si-button-refresh-arrows"
+                update="#{componentToUpdateOnResetFilter} #{cc.clientId}:widget-header-actions"
+                oncomplete="PF('filter-overlay-panel-#{index}').hide(); initWidgetFilterHtml('#{widget.id}');"
+                actionListener="#{widget.onResetUserFilters()}"
+                resetValues="true"/>
+              </div>
+
             </div>
           </div>
         </h:form>
diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/includes/WidgetFilter.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/includes/WidgetFilter.xhtml
index ecb07c8afb5..8dbdd66251a 100644
--- a/AxonIvyPortal/portal/webContent/layouts/restricted/includes/WidgetFilter.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/restricted/includes/WidgetFilter.xhtml
@@ -12,11 +12,8 @@
   actionListener="#{widget.searchSavedFilters()}" partialSubmit="true" global="false"
   process="@this search-saved-filter-input" update="widget-saved-filters-items"/>
 
-<div class="ui-g-12 filter-overlay-panel__header">
+<div class="ui-g-12 filter-overlay-panel__header pt-3">
   <strong class="ui-g-12 u-no-padding-left">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/SavedFilterHeader')}</strong>
-  <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/ManageFilter')}"
-    styleClass="ui-sm-hidden saved-filter__manage-filter" global="false"
-    onclick="hideAllDashboardOverlayPanels(); PF('manage-filter-dialog').show();" />
 </div>
 <div class="ui-g-12 ui-fluid">
   <div class="ui-g-12 saved-filter--search-container">
diff --git a/AxonIvyPortal/portal/webContent/resources/css/dashboard.css b/AxonIvyPortal/portal/webContent/resources/css/dashboard.css
index 6635a12387e..415fcfcaf64 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/dashboard.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/dashboard.css
@@ -215,6 +215,10 @@
   width:100%;
 }
 
+.widget__content.process-widget {
+  max-height: calc(100% - 55px);
+}
+
 .table-widget-panel.task-dashboard-widget__panel .widget__content,
 .table-widget-panel.case-dashboard-widget__panel .widget__content {
   padding: 0;
@@ -517,7 +521,7 @@ body .ui-selectcheckboxmenu.task-configuration__selectcheckboxmenu .ui-selectche
 .field-add-fieldset__label, .manage-dashboard__label {
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .import-dashboard-label {
@@ -531,7 +535,7 @@ body .ui-selectcheckboxmenu.task-configuration__selectcheckboxmenu .ui-selectche
 }
 
 .filter-overlay-panel.ui-widget-content>.ui-overlaypanel-content {
-  max-width: 1100px;
+  max-width: max-content;
   padding: 0;
 }
 
@@ -575,7 +579,6 @@ body .ui-selectcheckboxmenu.task-configuration__selectcheckboxmenu .ui-selectche
 
 .filter-overlay-panel__header,
 .filter-overlay-panel__content,
-.filter-overlay-panel__footer,
 .info-overlay-panel__footer,
 .statistic-filter-accordion-panel.widget-info-panel,
 .saved-filter__items {
@@ -583,10 +586,17 @@ body .ui-selectcheckboxmenu.task-configuration__selectcheckboxmenu .ui-selectche
   padding-bottom: 1rem;
 }
 
+.filter-overlay-panel {
+  max-width: 75rem !important;
+}
+
+.filter-overlay-panel__footer > div#manage-filter {
+  border-right: 1px solid var(--widget-advanced-filter-overlay-panel-footer);
+}
+
 .filter-overlay-panel__footer,
 .info-overlay-panel__footer {
   text-align: right;
-  border-top: solid 1px var(--widget-advanced-filter-overlay-panel-footer);
 }
 
 @media screen and (max-width: 40em) {
@@ -1168,14 +1178,12 @@ body .ui-widget.new-widget-dialog__introduction {
 .saved-filter-node {
   text-align: center;
   width: 100%;
-  padding: 5px;
-  margin-bottom: 5px;
-  border: 1px solid var(--primary-color);
-  border-radius: 4px;
-  box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 26%), 0 1px 5px 0 rgb(0 0 0 / 16%);
+  padding: 9px;
+  border-radius: 8px;
   cursor: pointer;
-  transition: background-color 0.3s, 
-              color 0.3s;
+  margin-bottom: 14px;
+  transition: background-color 0.3s,color 0.3s;
+  background: var(--widget-filter-background-color);
 
 /*note: lines below to handle name too long when save filter will remove after verified*/
   white-space: nowrap;
@@ -1186,12 +1194,13 @@ body .ui-widget.new-widget-dialog__introduction {
 
 .saved-filter-node.selected, 
 .saved-filter-node:active {
-  background: var(--accent-color);
-  border-color: var(--accent-color);
+  border: 2px solid var(--ivy-primary-color);
+  color: var(--ivy-primary-color);
+  background: var(--saved-filter-button-background-color);
 }
 
 .saved-filter-node:hover {
-  color: var(--primary-dark-color);
+  color: var(--accent-color);
   border-color: var(--accent-color);
   font-weight: bold;
 }
@@ -1213,7 +1222,11 @@ body .ui-widget.new-widget-dialog__introduction {
 }
 
 .manage-filter-dialog {
-  max-width: 80vh;
+  max-width: 50vw;
+}
+
+.manage-filter-dialog .ui-dialog-titlebar {
+  padding-bottom: 0.5rem !important;
 }
 
 .expand-fullscreen {
@@ -1658,6 +1671,7 @@ body .ui-widget.new-widget-dialog__introduction {
   display: flex;
   flex-direction: column;
   height: 100%;
+  position: relative;
 }
 
 .news-widget__content {
@@ -1942,7 +1956,6 @@ body .ui-widget.new-widget-dialog__introduction {
 
 .dashboard-widget-filter__filter-wrapper {
   padding: 10px 0;
-  border-bottom: solid 1px var(--ivy-primary-color-grey-light);
 }
 
 .dashboard-widget-filter__read-only-panel .dashboard-widget-filter__filter-panel:last-child {
@@ -1964,7 +1977,7 @@ body .ui-widget.new-widget-dialog__introduction {
   display: flex;
   align-items: flex-start;
   min-width: 8vw;
-  max-width: 10vw;
+  max-width: 16vw;
   overflow-wrap: anywhere;
 }
 
@@ -2057,3 +2070,9 @@ body .ui-button.rounded-button.dashboard-widget-filter__remove-filter .ui-icon {
 body .ui-commandlink:hover, body .ui-link:active {
   color: var(--ivy-primary-color-command-link-hover);
 }
+
+body .ui-button.ui-widget.ui-widget-filter-btn {
+  background: var(--widget-filter-background-color);
+  color: var(--text-color);
+  border: none;
+}
diff --git a/AxonIvyPortal/portal/webContent/resources/css/module.css b/AxonIvyPortal/portal/webContent/resources/css/module.css
index 16c7deacef1..a833cabcc5d 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/module.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/module.css
@@ -655,6 +655,8 @@ span.case-details-document-add-link, span.task-details-document-add-link {
   line-height: 1.4rem;
   box-sizing: content-box;
   text-align: left;
+  color: var(--text-color);
+  width: 87%;
 }
 
 .case-detail-header {
@@ -1915,10 +1917,15 @@ _:-ms-input-placeholder, :root a.compact-task-start-link {
   align-items: center;
   clear: both;
   float: left;
-  padding: 10px 18px 10px 20px;
+  padding: 10px 18px 10px 0px;
   margin: 0;
   width: 160px;
   box-sizing: content-box;
+  color: var(--text-color);
+}
+
+.options-panel .option-item.color-destroy, .action-steps-panel .action-step-item.color-destroy, .ui-menu-list .ui-menuitem > .ui-menuitem-link.color-destroy > span {
+  color: var(--ivy-tertinary-color-red-medium) !important;
 }
 
 .options-panel .ui-state-disabled.option-item {
@@ -3210,6 +3217,12 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
     -webkit-box-orient: vertical;
     margin: auto;
   }
+  
+  .primary-color-light-button {
+  background: var(--portal-accessibility-bg-color) !important; 
+  color: var(--ivy-primary-color) !important;
+  font-weight: 600;
+}
 
   .line-clamp-text-5 {
     overflow:hidden;
@@ -3240,6 +3253,10 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   white-space: normal;
   padding-right: .5em;}
 
+.ui-dialog .ui-dialog-titlebar > .ui-dialog-title {
+  padding-left: 7px;
+}
+
 .process-widget .process-input-switch-selection,
 .ui-inputswitch.ui-widget.ui-widget-content.process-input-switch-selection.ui-inputswitch-checked {
   top: 3px;
@@ -4224,6 +4241,10 @@ body .ui-widget-header.portal-breadcrumb .ui-menuitem-link.ui-state-disabled .ui
   overflow: hidden;
 }
 
+body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {
+  color: var(--text-color);
+}
+
 body .portal-breadcrumb.ui-breadcrumb ul li {
   line-height: 2rem;
 }
@@ -4810,7 +4831,8 @@ body .process-compact-mode > .ui-fieldset-content {
 }
 
 .image-view-form .start-process > button > span, .image-process-actions > button > span{
-  color: var(--ivy-primary-light-color);
+  color: var(--primary-color);
+  font-weight: 500;
 }
 
 .image-view-form .start-process-image-widget {
@@ -4851,16 +4873,19 @@ body .process-compact-mode > .ui-fieldset-content {
 .image-process-container .image-process-item .card-item.card.image-widget-mode .image-process-item-container {
   width: inherit;
   position: relative;
-  height: 100% !important;
-  max-height: 296px;
+  height: 45% !important;
+  max-height: 155px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .image-process-container .image-process-item .card-item.card.image-widget-mode .image-process-item-image {
-  max-height: 296px;
-  height: 0px;
+  height: 135%;
+}
+
+.card.widget-preview .image-process-container .image-process-item .card-item.card.image-widget-mode .image-process-item-image {
+  height: 185%;
 }
 
 .image-process-container .image-process-item .card-item.card.image-widget-mode .overlay-title {
@@ -4877,14 +4902,17 @@ body .process-compact-mode > .ui-fieldset-content {
   top: 0px;
   z-index: 1;
 }
-
+.card.widget-preview .image-process-container .image-process-item .card-item.card.image-widget-mode .image-view-form {
+  padding-top: 17%;
+}
 .image-process-container .image-process-item .card-item.card.image-widget-mode .image-view-form {
   min-height: 25%;
-  height: 100%;
+  height: 75%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding-top: 5%;
+  bottom: -40px;
+  padding-bottom: 40px;
 }
 
 .image-process-container .image-process-item .card-item.card.image-widget-mode .image-view-form .process-description,
@@ -4894,6 +4922,17 @@ body .process-compact-mode > .ui-fieldset-content {
   top: 0px;
 }
 
+body.light .image-process-container .image-process-item .card-item.card.image-widget-mode .image-process-item-image.default-image-mode-process,
+body.dark .image-process-container .image-process-item .card-item.card.image-widget-mode .image-process-item-image.default-image-mode-process-dark {
+  display: block;
+  padding: 8px;
+}
+
+body.dark .image-process-container .image-process-item .card-item.card.image-widget-mode .image-process-item-image.default-image-mode-process,
+body.light .image-process-container .image-process-item .card-item.card.image-widget-mode .image-process-item-image.default-image-mode-process-dark {
+  display: none;
+}
+
 .image-process-container .image-process-item .card-item.card.image-widget-mode .image-view-form .process-description {
   height: 100%;
 }
@@ -4996,13 +5035,21 @@ body .process-compact-mode > .ui-fieldset-content {
 }
  
 .layout-topbar-light .image-process-item .default-process-image, 
-.layout-topbar-dark .image-process-item .default-process-image-dark {
+.layout-topbar-dark .image-process-item .default-process-image-dark,
+.layout-topbar-light .image-process-item-container > .default-image-mode-process,
+.layout-topbar-dark .image-process-item-container > .default-image-mode-process-dark,
+.layout-topbar-light .card.widget-preview.widget-preview--process .image-process-item-container > .default-image-mode-process,
+.layout-topbar-dark .card.widget-preview.widget-preview--process .image-process-item-container > .default-image-mode-process-dark {
   display: block;
   padding: 8px;
 }
 
 .layout-topbar-dark .image-process-item .default-process-image, 
-.layout-topbar-light .image-process-item .default-process-image-dark {
+.layout-topbar-light .image-process-item .default-process-image-dark,
+.layout-topbar-dark .image-process-item-container > .default-image-mode-process,
+.layout-topbar-light .image-process-item-container > .default-image-mode-process-dark,
+.layout-topbar-dark .card.widget-preview.widget-preview--process .image-process-item-container > .default-image-mode-process,
+.layout-topbar-light .card.widget-preview.widget-preview--process .image-process-item-container > .default-image-mode-process-dark {
   display: none;
 }
 
@@ -5153,7 +5200,8 @@ body .process-compact-mode > .ui-fieldset-content {
 }
 
 .dashboard-configuration__export-button-form .export-dashboard {
-  margin-left: 0.1em;
+  left: -6px;
+  color: var(--text-color);
 }
 
 .dashboard-configuration__content {
@@ -5391,7 +5439,7 @@ a.dashboard-action-container label {
   border-radius: 50%;
 }
 
-.ui-external-link-preview-image-panel {
+.ui-external-link-preview-image-panel, .ui-dashboard-upload-file-panel {
   width: 100%;
   border: 1px solid var(--process-list-item-border-color);
   background-color: var(--process-list-item-background-color);
@@ -5401,7 +5449,7 @@ a.dashboard-action-container label {
   display: flex;
 }
 
-.ui-external-link-preview-image-panel > .ui-external-link-preview-image-label {
+.ui-external-link-preview-image-panel > .ui-external-link-preview-image-label, .ui-dashboard-upload-file-panel > .ui-dashboard-upload-file-label {
   width: 42%;
   display: block;
   text-align: center;
@@ -5410,7 +5458,7 @@ a.dashboard-action-container label {
   top: 12px;
 }
 
-.ui-external-link-preview-image-label > #ui-external-link-preview-image-icon {
+.ui-external-link-preview-image-label > #ui-external-link-preview-image-icon, .ui-dashboard-upload-file-label > #ui-dashboard-upload-file-icon {
   width: 100%;
   font-size: 2em;
   top: -20px;
@@ -5442,14 +5490,14 @@ a.dashboard-action-container label {
 
 /* ============ DASHBOARD ======== */
 body .ui-dialog.ui-widget.import-dashboard-dialog{
-  min-width: 450px;
-  max-width: 1000px;
+  min-width: 10rem;
+  max-width: 40rem;
 }
 
 @media screen and (max-width: 40em) {
   body .ui-dialog.ui-widget.import-dashboard-dialog {
     min-width: 85vw;
-    max-width: 95%;
+    max-width: 35rem;
   }	
 }
 
@@ -5506,7 +5554,8 @@ body .ui-dialog.ui-widget.import-dashboard-dialog{
   width: 100%;
 }
 
-body .ui-link.ui-sidestep-action {
+/* =================== PORTAL BUTTON ====================== */
+body .ui-link.ui-sidestep-action, .action-container > .ui-sidestep-action {
   color: var(--sidestep-action-text-color);
 }
 
@@ -5526,6 +5575,11 @@ body .ui-button.ui-widget.ui-no-rounded-button-process-page {
 
 body .ui-button.ui-widget.ui-no-rounded-button-process-page.icon-more-menu-button {
   color: var(--widget-header-icon);
-  
 }
 
+/* =================== PORTAL BUTTON END ====================== */
+
+/* =================== MENU ITEMS ====================== */
+.ui-menu-items, body .ui-menu .ui-menu-list .ui-menuitem:not(:last-child), .action-step-item:not(:last-child) {
+  border-bottom: 1px solid var(--user-menu-items-border-color);
+}
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
index 60653041cba..5bd3306b906 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
@@ -18,6 +18,7 @@
   --cancel-button-background-color: var(--ivy-primary-color-grey-light);
   --cancel-button-state-hover-or-focus-background-color: var(--ivy-primary-color-grey-pale);
   --portal-button-color: var(--ivy-primary-color-white);
+  --saved-filter-button-background-color: var(--ivy-primary-color-grey-light);
   
   /* Color of secondary button */
   --button-secondary-bg-color: var(--ivy-primary-color-white);
@@ -79,6 +80,7 @@
   --filter-name-label-color: var(--ivy-primary-color-grey-medium);
   --filter-selection-container-group-border-color: var(--ivy-primary-color-grey-medium);
   --widget-advanced-filter-label-color: var(--ivy-primary-color-grey-medium);
+  --widget-filter-background-color: var(--ivy-primary-color-grey-dark);
 
   /* Item in Widget List */
   --item-widget-background-color: var(--ivy-primary-color-grey-dark);
@@ -195,6 +197,7 @@
   --admin-setting-no-permission-message-color: #e53935;
   --user-setting-container-box-shadow: rgba(43, 59, 93, 0.6);
   --email-setting-widget-header: var(--ivy-primary-color-white);
+  --portal-accessibility-bg-color: var(--ivy-primary-color-grey-light);
   /* Absences and Deputy */
   --substituted-user-text-color: var(--ivy-primary-color-black);
   /* Awesome Icon Selection */
@@ -291,6 +294,8 @@
   --place-holder-text-color: var(--ivy-primary-color-grey-medium);
   --text-tab-default-color: var(--ivy-primary-color-grey-medium);
   --no-item-icon-color: var(--ivy-primary-color-grey-light);
+  --user-menu-items-border-color: var(--ivy-portal-color-gray-dark);
+  
   /* Portal breadcrumb */
   --breadcrumb-background-color: transparent;
   --breadcrumb-home-icon-color: var(--primary-color);
@@ -341,4 +346,10 @@
   --accessibility-shortcut-bg-color: var(--ivy-primary-color-grey-dark);
   --accessibility-bg-color: var(--task-state-system-color);
   --accessibility-shortcut-text-color: var(--ivy-primary-color-black);
+
+    /* Dashboard configuration*/
+  --dashboard-action-container-text-color: var(--ivy-primary-color-white);
+  --dashboard-action-container-border-color: var(--ivy-primary-color-grey-medium);
+  --dashboard-action-container-description-color: var(--ivy-primary-color-grey-medium);
+  --dashboard-icon-drag-drop-color: var(--ivy-primary-color-grey-dark);
 }
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
index 621f0a15840..ca345ac891b 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
@@ -18,6 +18,8 @@
   --cancel-button-background-color: var(--ivy-primary-color-grey-light);
   --cancel-button-state-hover-or-focus-background-color: var(--ivy-primary-color-grey-pale);
   --portal-button-color: var(--ivy-primary-color-black);
+  --saved-filter-button-background-color: var(--widget-filter-background-color);
+
   /* Color of secondary button */
   --button-secondary-bg-color: var(--ivy-primary-color-white);
   --button-secondary-text-color: var(--primary-color);
@@ -88,6 +90,7 @@
   --filter-name-label-color: var(--ivy-primary-color-grey-medium);
   --filter-selection-container-group-border-color: var(--ivy-primary-color-grey-medium);
   --widget-advanced-filter-label-color: var(--ivy-primary-color-grey-medium);
+  --widget-filter-background-color: var(--ivy-primary-color-grey-pale);
 
   /* Item in Widget List */
   --item-widget-background-color: var(--ivy-primary-color-grey-pale);
@@ -204,6 +207,7 @@
   --admin-setting-no-permission-message-color: #e53935;
   --user-setting-container-box-shadow: rgba(43, 59, 93, 0.6);
   --email-setting-widget-header: var(--ivy-primary-color-white);
+  --portal-accessibility-bg-color: var(--primary-lighter-color);
   /* Absences and Deputy */
   --substituted-user-text-color: var(--ivy-primary-color-black);
   /* Awesome Icon Selection */
@@ -300,6 +304,7 @@
   --place-holder-text-color: var(--ivy-primary-color-grey-medium);
   --text-tab-default-color: var(--ivy-primary-color-grey-medium);
   --no-item-icon-color: var(--ivy-primary-color-grey-light);
+  --user-menu-items-border-color: var(--ivy-primary-color-grey-pale);
   /* Portal breadcrumb */
   --breadcrumb-background-color: transparent;
   --breadcrumb-home-icon-color: var(--primary-color);
@@ -350,4 +355,10 @@
   --accessibility-shortcut-bg-color: var(--ivy-primary-color-grey-pale);
   --accessibility-bg-color: var(--ivy-primary-color-white);
   --accessibility-shortcut-text-color: var(--ivy-primary-color-black);
+  
+    /* Dashboard configuration*/
+  --dashboard-action-container-text-color: var(--ivy-primary-color-black);
+  --dashboard-action-container-border-color: var(--ivy-primary-color-grey-light);
+  --dashboard-action-container-description-color: var(--ivy-primary-color-grey-dark);
+  --dashboard-icon-drag-drop-color: var(--ivy-primary-color-black);
 }
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal.css b/AxonIvyPortal/portal/webContent/resources/css/portal.css
index 16682952aaa..380503b4f7f 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal.css
@@ -1178,7 +1178,8 @@ ul.users-in-role {
   font-size: var(--header-font-size); }
 
 .action-link span {
-  font-weight: var(--task-action-item-label-font-weight); }
+  font-weight: var(--task-action-item-label-font-weight);
+}
 
 .task-action-item.start-task-action .task-action-item-label {
   font-weight: var(--task-start-action-font-weight);
@@ -1275,6 +1276,10 @@ color: var(--button-text-color);
   color: var(--primary-color);
 }
 
+.dasboard-configuration-action-menu-icon {
+  color: white;
+}
+
 .portal-dialog-warning-icon {
   color: var(--ivy-tertinary-color-yellow-dark);
 }
@@ -1374,8 +1379,7 @@ body.in-dialog .ui-widget-overlay {
 }
 
 .dashboard-action-container {
-  box-shadow:  var(--item-widget-box-shadow);
-  background-color: var(--item-widget-background-color);
+  border: 1px solid var(--dashboard-action-container-border-color);
 }
 
 .dashboard-action-container:hover {
@@ -1384,15 +1388,15 @@ body.in-dialog .ui-widget-overlay {
 }
 
 .dashboard-action-container-label {
-  color: var(--primary-dark-text-color);
+  color: var(--dashboard-action-container-text-color);
 }
 
 .dashboard-action-container-description {
-  color: var(--primary-dark-text-color);
+  color: var(--dashboard-action-container-description-color);
 }
 
 .dashboard-action-container-icon {
-  color: var(--primary-dark-text-color);
+  color: var(--dashboard-action-container-text-color);
 }
 
 .dashboard-type-list li a {
@@ -1607,8 +1611,7 @@ body .notification-checkbox .ui-chkbox-box {
 }
 
 i.dashboard-icon-drag-drop {
-    border: 1px solid var(--ivy-primary-color);
-    color: var(--ivy-primary-color);
+    color: var(--dashboard-icon-drag-drop-color);
     width: 2.357rem;
     border-radius: 50%;
     text-align: center;
diff --git a/AxonIvyPortal/portal/webContent/resources/js/dashboard.js b/AxonIvyPortal/portal/webContent/resources/js/dashboard.js
index 4b96c7a7026..72f4073402f 100644
--- a/AxonIvyPortal/portal/webContent/resources/js/dashboard.js
+++ b/AxonIvyPortal/portal/webContent/resources/js/dashboard.js
@@ -321,10 +321,7 @@ function hideAllDashboardOverlayPanels() {
 
 // Start Process Dashboard Widget
 function respondProcessWidget(displayMode) {
-  if (displayMode === 'IMAGE_MODE') {
-    setupImageProcessWidget();
-  }
-  else if (displayMode === 'FULL_MODE') {
+ if (displayMode === 'FULL_MODE') {
     setupGridProcessWidget();
   }
 }
diff --git a/Showcase/portal-user-examples/src/com/axonivy/portal/userexamples/bean/ExampleHomeBean.java b/Showcase/portal-user-examples/src/com/axonivy/portal/userexamples/bean/ExampleHomeBean.java
index 9484f7b2276..c47c8bba004 100644
--- a/Showcase/portal-user-examples/src/com/axonivy/portal/userexamples/bean/ExampleHomeBean.java
+++ b/Showcase/portal-user-examples/src/com/axonivy/portal/userexamples/bean/ExampleHomeBean.java
@@ -34,7 +34,7 @@ public void initData() {
       UserProcess userProcess = new UserProcess();
       userProcess.setLink(leaveRequestStartLink);
       userProcess.setProcessName(Ivy.cms().co("/Processes/LeaveRequest/leaveRequest"));
-      userProcess.setIcon("/Images/user-logout");
+      userProcess.setIcon("si si-user-logout");
       userProcess.setDescription(Ivy.cms().co("/Processes/LeaveRequest/description"));
       processes.add(userProcess);
     }
@@ -44,26 +44,26 @@ public void initData() {
           var userProcess = new UserProcess();
           userProcess.setLink(lendingCaseMap.getLink().getRelativeEncoded());
           userProcess.setProcessName(Ivy.cms().co("/Processes/CaseMap/name"));
-          userProcess.setIcon("/Images/monetization-approve");
+          userProcess.setIcon("si si-monetization-approve");
           userProcess.setDescription(Ivy.cms().co("/Processes/CaseMap/description"));
           processes.add(userProcess);
         });
 
     var procurementProcess = new UserProcess();
     procurementProcess.setProcessName(Ivy.cms().co("/Processes/Procurement/name"));
-    procurementProcess.setIcon("/Images/shopping-cart-check");
+    procurementProcess.setIcon("si si-shopping-cart-check");
     procurementProcess.setDescription(Ivy.cms().co("/Processes/UserExampleGuide/comingSoon"));
     processes.add(procurementProcess);
 
     var contractNegotiationProcess = new UserProcess();
     contractNegotiationProcess.setProcessName(Ivy.cms().co("/Processes/ContractNegotiation/name"));
-    contractNegotiationProcess.setIcon("/Images/business-contract-handshake-sign");
+    contractNegotiationProcess.setIcon("si si-business-contract-handshake-sign");
     contractNegotiationProcess.setDescription(Ivy.cms().co("/Processes/UserExampleGuide/comingSoon"));
     processes.add(contractNegotiationProcess);
 
     var marketingProcess = new UserProcess();
     marketingProcess.setProcessName(Ivy.cms().co("/Processes/MarketingCampaign/name"));
-    marketingProcess.setIcon("/Images/advertising-megaphone");
+    marketingProcess.setIcon("si si-advertising-megaphone");
     marketingProcess.setDescription(Ivy.cms().co("/Processes/UserExampleGuide/comingSoon"));
     processes.add(marketingProcess);
   }
diff --git a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/ExampleHomePage/ExampleHomePage.xhtml b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/ExampleHomePage/ExampleHomePage.xhtml
index 88c3ea73d8f..7a354ff3f73 100644
--- a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/ExampleHomePage/ExampleHomePage.xhtml
+++ b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/ExampleHomePage/ExampleHomePage.xhtml
@@ -29,7 +29,7 @@
                 <div style="padding: 2rem;" id="panel-#{itemStatus.index}">
 
                   <div class="ui-g-12 TexAlCenter">
-                    <p:graphicImage library="ivy-cms" name="#{item.icon}" id="icon" />
+                    <i class="#{item.icon} text-8xl" id="icon" />
                   </div>
                   <div class="ui-g-12 TexAlCenter" style="height: 8rem;">
                     <h2>#{item.processName}</h2>

From 53323e0c47e349d2ac70d438f228469dbea3e942 Mon Sep 17 00:00:00 2001
From: Thai Phan <117443490+pvthai-axonivy@users.noreply.github.com>
Date: Wed, 23 Oct 2024 10:15:30 +0700
Subject: [PATCH 2/8] IVYPORTAL-17768: Adapt Put descriptive information of the
 Case/Task (#1126)

---
 .../ch/ivy/addon/portalkit/bean/CaseBean.java | 46 ++++++++++---------
 .../ch/ivy/addon/portalkit/bean/TaskBean.java | 42 +++++++++++------
 .../component/CaseWidget/ActionsCell.xhtml    |  3 +-
 .../component/CaseWidget/CaseWidget.xhtml     |  4 +-
 .../component/TaskWidget/StartCell.xhtml      |  2 +-
 .../component/TaskWidget/TaskWidget.xhtml     |  4 +-
 .../component/ActionStep/ActionStep.xhtml     |  3 +-
 7 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/CaseBean.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/CaseBean.java
index 7c88c3cba19..58294196828 100644
--- a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/CaseBean.java
+++ b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/CaseBean.java
@@ -2,6 +2,7 @@
 
 import java.io.Serializable;
 import java.text.SimpleDateFormat;
+import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;
 
@@ -9,13 +10,14 @@
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.ViewScoped;
 
-import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
 
 import com.axonivy.portal.components.publicapi.ProcessStartAPI;
 import com.axonivy.portal.components.util.ProcessStartUtils;
 
 import ch.ivy.addon.portal.generic.navigation.PortalNavigator;
+import ch.ivy.addon.portalkit.dto.dashboard.casecolumn.CaseColumnModel;
+import ch.ivy.addon.portalkit.enums.DashboardStandardCaseColumn;
 import ch.ivy.addon.portalkit.service.DateTimeGlobalSettingService;
 import ch.ivy.addon.portalkit.service.GlobalSettingService;
 import ch.ivy.addon.portalkit.util.DateTimeFormatterUtils;
@@ -24,7 +26,6 @@
 import ch.ivyteam.ivy.environment.Ivy;
 import ch.ivyteam.ivy.workflow.ICase;
 import ch.ivyteam.ivy.workflow.caze.CaseBusinessState;
-import ch.ivyteam.ivy.workflow.caze.owner.CaseOwner;
 
 @ManagedBean(name = "caseBean")
 @ViewScoped
@@ -114,27 +115,30 @@ public boolean isCaseOwnerEnabled() {
   public void setCaseOwnerEnabled(boolean isCaseOwnerEnabled) {
     this.isCaseOwnerEnabled = isCaseOwnerEnabled;
   }
-  
-  public String getAriaLabel(ICase icase) {
-    String ariaLabel = Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/common/caseName") + ": " + icase.getName();
-    ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/common/state") + ": " + getState(icase);
-
-    if (icase.getStartTimestamp() != null) {
-      String createdDateString = new SimpleDateFormat(DateTimeGlobalSettingService.getInstance().getGlobalDateTimePattern()).format(icase.getStartTimestamp());
-      ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/caseList/defaultColumns/CREATION_TIME") + ": " + createdDateString;
-    }
-
-    if (icase.getEndTimestamp() != null) {
-      String finishedDateString = new SimpleDateFormat(DateTimeGlobalSettingService.getInstance().getGlobalDateTimePattern()).format(icase.getEndTimestamp());
-      ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/caseList/defaultColumns/FINISHED_TIME") + ": " + finishedDateString;
-    }
 
-    List<CaseOwner> owners = icase.owners().all();
-    if (CollectionUtils.isNotEmpty(owners)) {
-      ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/caseList/defaultColumns/OWNER") + ": " + owners.getFirst().member().getDisplayName();
+  public String getAriaLabel(ICase icase, List<CaseColumnModel> columns) {
+    List<String> displayTexts = new ArrayList<>();
+    for (CaseColumnModel col : columns) {
+      if (col.getVisible()) {
+        if (DashboardStandardCaseColumn.STATE.getField().equalsIgnoreCase(col.getField())) {
+          displayTexts.add(col.getHeaderText() + ": " + getState(icase));
+        } else if (DashboardStandardCaseColumn.CREATED.getField().equalsIgnoreCase(col.getField())) {
+          String createdDateString = new SimpleDateFormat(DateTimeGlobalSettingService.getInstance().getGlobalDateTimePattern()).format(icase.getStartTimestamp());
+          displayTexts.add(col.getHeaderText() + ": " + createdDateString);
+        } else if (DashboardStandardCaseColumn.FINISHED.getField().equalsIgnoreCase(col.getField())) {
+          if (icase.getEndTimestamp() != null) {
+            String finishDateString = new SimpleDateFormat(DateTimeGlobalSettingService.getInstance().getGlobalDateTimePattern()).format(icase.getEndTimestamp());
+            displayTexts.add(col.getHeaderText() + ": " + finishDateString);
+          }
+        } else {
+          Object displayObject = col.display(icase);
+          if (displayObject != null && StringUtils.isNotEmpty(displayObject.toString())) {
+            displayTexts.add(col.getHeaderText() + ": " + displayObject.toString());
+          }
+        }
+      }
     }
-
-    return ariaLabel;
+    return String.join(" - ", displayTexts);
   }
 
 }
diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/TaskBean.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/TaskBean.java
index 11e719aeb13..7c66011583b 100644
--- a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/TaskBean.java
+++ b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/TaskBean.java
@@ -13,6 +13,8 @@
 import org.apache.commons.lang3.StringUtils;
 import org.primefaces.model.SortMeta;
 
+import ch.ivy.addon.portalkit.dto.dashboard.taskcolumn.TaskColumnModel;
+import ch.ivy.addon.portalkit.enums.DashboardStandardTaskColumn;
 import ch.ivy.addon.portalkit.service.DateTimeGlobalSettingService;
 import ch.ivy.addon.portalkit.util.SortFieldUtil;
 import ch.ivyteam.ivy.environment.Ivy;
@@ -119,20 +121,32 @@ public SortMeta getTaskWorkflowEventSortByTimestamp() {
     return SortFieldUtil.buildSortMeta("timestamp", true);
   }
   
-  public String getAriaLabel(ITask task) {
-    String ariaLabel = Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/dashboard/taskStart");
-    ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/common/taskName") + ": " + task.getName();
-    ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/taskList/defaultColumns/PRIORITY") + ": "
-        + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/taskPriority/" + task.getPriority().name());
-    ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/taskList/defaultColumns/STATE") + ": "
-        + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/taskState/" + task.getState().name());
-
-    if (task.getExpiryTimestamp() != null) {
-      String expiryDateString = new SimpleDateFormat(
-          DateTimeGlobalSettingService.getInstance().getGlobalDateTimePattern()).format(task.getExpiryTimestamp());
-      ariaLabel += " - " + Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/taskList/defaultColumns/EXPIRY_TIME") + ": "
-          + expiryDateString;
+  public String getAriaLabel(ITask task, List<TaskColumnModel> columns) {
+    List<String> displayTexts = new ArrayList<>();
+    for (TaskColumnModel col : columns) {
+      if (col.getVisible()) {
+        if (DashboardStandardTaskColumn.START.getField().equalsIgnoreCase(col.getField())) {
+          displayTexts.add(cms("/ch.ivy.addon.portalkit.ui.jsf/dashboard/taskStart"));
+        } else if (DashboardStandardTaskColumn.PRIORITY.getField().equalsIgnoreCase(col.getField())) {
+          displayTexts.add(col.getHeaderText() + ": " + getPriority(task.getPriority()));
+        } else if (DashboardStandardTaskColumn.STATE.getField().equalsIgnoreCase(col.getField())) {
+          displayTexts.add(col.getHeaderText() + ": " + getTaskBusinessState(task.getBusinessState()));
+        } else if (DashboardStandardTaskColumn.CREATED.getField().equalsIgnoreCase(col.getField())) {
+          String createdDateString = new SimpleDateFormat(DateTimeGlobalSettingService.getInstance().getGlobalDateTimePattern()).format(task.getStartTimestamp());
+          displayTexts.add(col.getHeaderText() + ": " + createdDateString);
+        } else if (DashboardStandardTaskColumn.EXPIRY.getField().equalsIgnoreCase(col.getField())) {
+          if (task.getExpiryTimestamp() != null) {
+            String expiryDateString = new SimpleDateFormat(DateTimeGlobalSettingService.getInstance().getGlobalDateTimePattern()).format(task.getExpiryTimestamp());
+            displayTexts.add(col.getHeaderText() + ": " + expiryDateString);
+          }
+        } else {
+          Object displayObject = col.display(task);
+          if (displayObject != null && StringUtils.isNotEmpty(displayObject.toString())) {
+            displayTexts.add(col.getHeaderText() + ": " + displayObject.toString());
+          }
+        }
+      }
     }
-    return ariaLabel;
+    return String.join(" - ", displayTexts);
   }
 }
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/ActionsCell.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/ActionsCell.xhtml
index 50a4b5de11b..7ca5b517464 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/ActionsCell.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/ActionsCell.xhtml
@@ -8,6 +8,7 @@
        update="#{cc.attrs.componentToUpdateCaseWidget}" onDestroyComplete="PF('destroy-case-dialog').show()"
        actionLinkStyleClass="ui-inplace-editor"
        stepsPanelStyleClass="js-case-side-steps-panel-#{cc.attrs.caseWidget.id}-#{rowIndex}"
-       isPreviewMode="#{cc.attrs.isPreviewMode}" />
+       isPreviewMode="#{cc.attrs.isPreviewMode}"
+       ariaLabel="#{ariaLabel}"/>
   </div>
 </html>
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/CaseWidget.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/CaseWidget.xhtml
index 6daa56c2410..39be2c2c017 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/CaseWidget.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/CaseWidget/CaseWidget.xhtml
@@ -111,7 +111,9 @@
           </h:panelGroup>
           
           <h:panelGroup rendered="#{column.field eq 'actions'}" id="action-cell-item">
-            <ui:include src="ActionsCell.xhtml" />
+            <ui:include src="ActionsCell.xhtml">
+              <ui:param name="ariaLabel" value="#{caseBean.getAriaLabel(caseItem, caseWidget.columns)}"></ui:param>
+            </ui:include>
           </h:panelGroup>
         </p:columns>
       </p:dataTable>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/StartCell.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/StartCell.xhtml
index 9d42b9066c5..a548226b6f0 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/StartCell.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/StartCell.xhtml
@@ -5,7 +5,7 @@
 
 <p:commandLink id="start-task" actionListener="#{dashboardBean.handleStartTask(task)}" onclick="event.stopPropagation();"
   disabled="#{!taskActionBean.isNotDone(task) or !taskActionBean.canResume(task)}" oncomplete="resetPortalLeftMenuState()"
-  ariaLabel="#{taskBean.getAriaLabel(task)}"
+  ariaLabel="#{ariaLabel}"
   process="@this">
   <span class="si si-controls-play" />
 </p:commandLink>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/TaskWidget.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/TaskWidget.xhtml
index 540c904e941..e00a8accdd0 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/TaskWidget.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/TaskWidget/TaskWidget.xhtml
@@ -57,7 +57,9 @@
           style="#{column.format eq 'TIMESTAMP' or column.format eq 'NUMBER' ? 'text-align: center;' : ''} #{column.style}">
 
           <h:panelGroup rendered="#{column.field eq 'start'}" styleClass="dashboard-tasks__start-container">
-            <ui:include src="StartCell.xhtml" />
+            <ui:include src="StartCell.xhtml">
+              <ui:param name="ariaLabel" value="#{taskBean.getAriaLabel(task, taskWidget.columns)}"></ui:param>
+            </ui:include>
           </h:panelGroup>
 
           <h:panelGroup rendered="#{column.field eq 'priority'}">
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
index 7601f6bf974..36da98afad9 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
@@ -16,6 +16,7 @@
   <cc:attribute name="readOnly" default="false" />
   <cc:attribute name="inFrame" default="false"/>
   <cc:attribute name="isPreviewMode" default="false" type="java.lang.Boolean"/>
+  <cc:attribute name="ariaLabel" />
 </cc:interface>
 
 <cc:implementation>
@@ -29,7 +30,7 @@
   <c:set var="showSeparator" value="#{renderDestroyAction or showAdditionalCaseDetails or showOpenCaseDetail or showProcessOverview or showProcessViewer}"/>
   <c:set var="isPreviewMode" value="#{cc.attrs.isPreviewMode}"/>
 
-  <p:commandLink id="#{cc.attrs.actionLinkId}" onclick="event.stopPropagation(); return false;" ariaLabel="#{caseBean.getAriaLabel(case)}"
+  <p:commandLink id="#{cc.attrs.actionLinkId}" onclick="event.stopPropagation(); return false;" ariaLabel="#{cc.attrs.ariaLabel}"
     styleClass="#{isPreviewMode ? '' : cc.attrs.actionLinkStyleClass} #{cc.attrs.taskId} action-link portal-icon ui-sidestep-action" disabled="#{cc.attrs.readOnly or isPreviewMode}">
     <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}" styleClass="task-action-item-label" />
     <i class="si si-arrow-down-1" />

From 72ae337651051c2468bb19e3b377563550f1ce2e Mon Sep 17 00:00:00 2001
From: Le Ngoc Danh <127722015+lndanh-axonivy@users.noreply.github.com>
Date: Wed, 23 Oct 2024 11:01:24 +0700
Subject: [PATCH 3/8] IVYPORTAL-17533 Create Accessibility Mode Dashboard
 Template (#1149)

* IVYPORTAL-17533 Create Accessibility Mode Dashboard Template: Highlight 2 menu items issue

* IVYPORTAL-17533 Create Accessibility Mode Dashboard Template: remove duplicated column "start"
---
 .../portal/config/variables/Portal/DashboardTemplates.json    | 4 ----
 AxonIvyPortal/portal/webContent/resources/js/portal.js        | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/AxonIvyPortal/portal/config/variables/Portal/DashboardTemplates.json b/AxonIvyPortal/portal/config/variables/Portal/DashboardTemplates.json
index 32b01d244b0..30fbe808df6 100644
--- a/AxonIvyPortal/portal/config/variables/Portal/DashboardTemplates.json
+++ b/AxonIvyPortal/portal/config/variables/Portal/DashboardTemplates.json
@@ -647,10 +647,6 @@
             {
               "field": "expiryTimestamp"
             },
-            {
-              "field": "start",
-              "visible": false
-            },
             {
               "field": "id",
               "visible": false,
diff --git a/AxonIvyPortal/portal/webContent/resources/js/portal.js b/AxonIvyPortal/portal/webContent/resources/js/portal.js
index a84d4369f1e..219c563f7ee 100644
--- a/AxonIvyPortal/portal/webContent/resources/js/portal.js
+++ b/AxonIvyPortal/portal/webContent/resources/js/portal.js
@@ -356,7 +356,7 @@ function highlightDashboardItem(menuId) {
 function activeMenuItemOnLeftMenu(menuId) {
   PF('main-menu').addMenuitem(menuId);
   let $selectedMenu = $("[id$='" + menuId + "']");
-  if (!$selectedMenu.hasClass('active-menuitem')) {
+  if (!$selectedMenu.hasClass('active-menuitem') && !$selectedMenu.siblings('.active-menuitem').length) {
     $selectedMenu.addClass('active-menuitem');
   }
 }

From 99b71df1f0e150a7fdbd4c872dbe7ed579f1c482 Mon Sep 17 00:00:00 2001
From: Tung Le <76459536+lttung-axonivy@users.noreply.github.com>
Date: Wed, 23 Oct 2024 11:10:27 +0700
Subject: [PATCH 4/8] IVYPORTAL-17707 Provide No-Code Configurations for the
 IFrame Task Template in the Neo Designer (#1133)

* IVYPORTAL-17707 Provide No-Code Configurations for the IFrame Task Template in the Neo Designer

* Document/ivyportal 17707 provide no code configurations for the i frame task template in the neo designer (#1132)

---------

Co-authored-by: Loc Nguyen <loc.nguyenthanh@axonactive.com>
---
 .../IFrameTaskConfig/IFrameTaskConfig.xhtml   |  68 ++++++++
 .../IFrameTaskConfigData.d.json               |   6 +
 .../IFrameTaskConfigProcess.p.json            |  50 ++++++
 .../restricted/IFrameTaskTemplate.xhtml       | 100 +++++++-----
 .../customization/business-details-page.rst   |  12 +-
 ...omization-business-details-page-iframe.png | Bin 39310 -> 0 bytes
 .../documents/available_other_options.csv     |   4 +-
 .../available_process_steps_options.csv       |   4 +-
 .../portal-developer-guide/iframe/index.rst   | 150 +++++++++++-------
 .../installation/index.rst                    |   1 +
 .../ui/SaleDepartment/SaleDepartment.xhtml    |   8 +-
 .../CustomizedDocumentTableExample.xhtml      |   4 +-
 .../DocumentTableExample.xhtml                |   4 +-
 ...InvestmentRequestBusinessDetailsPage.xhtml |  10 +-
 .../LeaveRequestApproval.xhtml                |   6 +-
 .../LeaveRequestCreation.xhtml                |   5 +-
 .../LeaveRequestSummary.xhtml                 |   5 +-
 ...oLibraryOfDefaultProcessImageExample.xhtml |   7 +-
 .../testdata/Approve/Approve.xhtml            |  21 +--
 .../CreateInvestment/CreateInvestment.xhtml   |  17 +-
 .../CustomParamsForIFrame.xhtml               |  12 +-
 .../CustomTaskNameForIFrame.xhtml             |   8 +-
 .../EmployeeDetailsInFrame.xhtml              |   5 +-
 .../EmployeeSearchInFrame.xhtml               |   4 +-
 .../LeaveRequestForm/LeaveRequestForm.xhtml   |   4 +-
 .../testdata/NewPayment/NewPayment.xhtml      |   4 +-
 .../testdata/Review/Review.xhtml              |   4 +
 .../TemplateExampleInFrame.xhtml              |  19 ++-
 .../LeaveRequestApproval.xhtml                |   6 +-
 .../LeaveRequestCreation.xhtml                |   6 +-
 .../LeaveRequestSummary.xhtml                 |   6 +-
 31 files changed, 347 insertions(+), 213 deletions(-)
 create mode 100644 AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfig.xhtml
 create mode 100644 AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigData.d.json
 create mode 100644 AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigProcess.p.json
 delete mode 100644 Documentation/portal-guide/source/portal-developer-guide/customization/images/business-details-page/customization-business-details-page-iframe.png

diff --git a/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfig.xhtml b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfig.xhtml
new file mode 100644
index 00000000000..2b1ba460ec2
--- /dev/null
+++ b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfig.xhtml
@@ -0,0 +1,68 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
+  xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+  xmlns:cc="http://xmlns.jcp.org/jsf/composite" xmlns:ic="http://ivyteam.ch/jsf/component"
+  xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions">
+<cc:interface componentType="IvyComponent">
+  <cc:attribute name="taskName" shortDescription="Custom text for task name" />
+  <cc:attribute name="taskIcon" shortDescription="Task icon to be displayed, using Streamline or Awesome font, e.g., `si si-arrow-right`" />
+  <cc:attribute name="isHideTaskName" shortDescription="Hide task name, false (default) or true" />
+  <cc:attribute name="caseId" shortDescription="ID of case to be displayed in case information dialog" />
+  <cc:attribute name="isHideCaseInfo" shortDescription="Hide `Show Information` button, false (default) or true" />
+  <cc:attribute name="currentProcessStep" shortDescription="Current process step, could be the index of the step or the step name" />
+  <cc:attribute name="processSteps" shortDescription="List of process steps, e.g., `[&quot;Create Investment Request&quot;, &quot;Approve Investment Reques&quot;]`
+    or `# {portalComponentUtilsBean.convertToJSON(data.steps)}`" />
+  <cc:attribute name="isShowAllSteps" shortDescription="Shows all steps on large screens, false (default) or true" />
+  <cc:attribute name="processChainDirection" shortDescription="HORIZONTAL (default) or VERTICAL" />
+  <cc:attribute name="processChainShape" shortDescription="CIRCLE (default) or LINE" />
+  <cc:attribute name="isHideTaskAction" shortDescription="Hide task action button, false (default) or true" />
+  <cc:attribute name="isWorkingOnATask" shortDescription="Working on a task in order to display warning when leaving page, true (default) or false" />
+  <cc:attribute name="announcementInvisible" shortDescription="Make announcement invisible, true (default) or false" />
+  <cc:attribute name="isCardFrame" shortDescription="Display content of the IFrame inside a card style" />
+  <cc:attribute name="viewName" shortDescription="Custom breadcrum, value could be HOME, PROCESS, TASK, TASK_DETAIL, CASE_DETAIL, CASE, TECHNICAL_CASE, RELATED_TASK, USER_PROFILE,
+    ABSENCES_MANAGEMENT, DASHBOARD_CONFIGURATION, EDIT_DASHBOARD_DETAILS, PROCESS_VIEWER, PORTAL_MANAGEMENT, NOTIFICATION" />
+</cc:interface> 
+
+<cc:implementation>
+  <ui:fragment rendered="#{not empty cc.attrs.taskName}"><script>window.taskName = `#{cc.attrs.taskName}`;</script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.taskIcon}"><script>window.taskIcon = `#{cc.attrs.taskIcon}`;</script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.isHideTaskName}"><script>
+    window.isHideTaskName = (`#{cc.attrs.isHideTaskName}`.toLowerCase() === "true");
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.caseId}"><script>window.caseId = `#{cc.attrs.caseId}`;</script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.isHideCaseInfo}"><script>
+    window.isHideCaseInfo = (`#{cc.attrs.isHideCaseInfo}`.toLowerCase() === "true");
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.currentProcessStep}"><script>
+    window.currentProcessStep = `#{cc.attrs.currentProcessStep}`;
+    if (!isNaN(Number(window.currentProcessStep))) {
+      window.currentProcessStep = Number(window.currentProcessStep);
+    }
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.processSteps}"><script>
+    try {
+      window.processSteps = JSON.parse(`#{cc.attrs.processSteps}`);
+    } catch (error) {
+      // Just ignore parsing JSON processSteps
+    }
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.isShowAllSteps}"><script>
+    window.isShowAllSteps = (`#{cc.attrs.isShowAllSteps}`.toLowerCase() === "true");
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.processChainDirection}"><script>window.processChainDirection = `#{cc.attrs.processChainDirection}`;</script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.processChainShape}"><script>window.processChainShape = `#{cc.attrs.processChainShape}`;</script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.isHideTaskAction}"><script>
+    window.isHideTaskAction = (`#{cc.attrs.isHideTaskAction}`.toLowerCase() === "true");
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.isWorkingOnATask}"><script>
+    window.isWorkingOnATask = (`#{cc.attrs.isWorkingOnATask}`.toLowerCase() === "true");
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.announcementInvisible}"><script>
+    window.announcementInvisible = (`#{cc.attrs.announcementInvisible}`.toLowerCase() === "true");
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.isCardFrame}"><script>
+    window.isCardFrame = (`#{cc.attrs.isCardFrame}`.toLowerCase() === "true");
+  </script></ui:fragment>
+  <ui:fragment rendered="#{not empty cc.attrs.viewName}"><script>window.viewName = `#{cc.attrs.viewName}`;</script></ui:fragment>
+</cc:implementation>
+
+</html>
diff --git a/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigData.d.json b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigData.d.json
new file mode 100644
index 00000000000..603f9806fef
--- /dev/null
+++ b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigData.d.json
@@ -0,0 +1,6 @@
+{
+  "$schema" : "https://json-schema.axonivy.com/data-class/12.0.0/data-class.json",
+  "simpleName" : "IFrameTaskConfigData",
+  "namespace" : "com.axonivy.portal.components.IFrameTaskConfig",
+  "isBusinessCaseData" : false
+}
\ No newline at end of file
diff --git a/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigProcess.p.json b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigProcess.p.json
new file mode 100644
index 00000000000..cd3641265c8
--- /dev/null
+++ b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/IFrameTaskConfig/IFrameTaskConfigProcess.p.json
@@ -0,0 +1,50 @@
+{
+  "$schema" : "https://json-schema.axonivy.com/process/12.0.0/process.json",
+  "id" : "19274BA8B8973F00",
+  "kind" : "HTML_DIALOG",
+  "config" : {
+    "data" : "com.axonivy.portal.components.IFrameTaskConfig.IFrameTaskConfigData"
+  },
+  "elements" : [ {
+      "id" : "f0",
+      "type" : "HtmlDialogStart",
+      "name" : "start()",
+      "config" : {
+        "signature" : "start",
+        "guid" : "19274BA8B8C633D4"
+      },
+      "visual" : {
+        "at" : { "x" : 96, "y" : 64 }
+      },
+      "connect" : [
+        { "id" : "f2", "to" : "f1" }
+      ]
+    }, {
+      "id" : "f1",
+      "type" : "HtmlDialogEnd",
+      "visual" : {
+        "at" : { "x" : 224, "y" : 64 },
+        "labelOffset" : { "x" : 10, "y" : 30 }
+      }
+    }, {
+      "id" : "f3",
+      "type" : "HtmlDialogEventStart",
+      "name" : "close",
+      "config" : {
+        "guid" : "19274BA8B8F47AD0"
+      },
+      "visual" : {
+        "at" : { "x" : 96, "y" : 160 }
+      },
+      "connect" : [
+        { "id" : "f5", "to" : "f4" }
+      ]
+    }, {
+      "id" : "f4",
+      "type" : "HtmlDialogExit",
+      "visual" : {
+        "at" : { "x" : 224, "y" : 160 },
+        "labelOffset" : { "x" : 10, "y" : 30 }
+      }
+    } ]
+}
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/IFrameTaskTemplate.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/IFrameTaskTemplate.xhtml
index 597817e442c..eb85ed0512f 100644
--- a/AxonIvyPortal/portal/webContent/layouts/restricted/IFrameTaskTemplate.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/restricted/IFrameTaskTemplate.xhtml
@@ -9,51 +9,69 @@
     <!-- THIS TEMPLATE IS ONLY USED BY PORTAL. DON'T USE IT. -->
     <!-- Follow the comments to know how to pass the params in your HTML dialog to Portal area outside IFrame. -->
     
-    <!-- AVAILABLE PARAMS in this template: -->
-    <!-- currentProcessStep: current process step -->
-    <!-- processSteps: list of process steps -->
-    <!-- isShowAllSteps: shows all of steps on large resolution, false (default) or true -->
-    <!-- isHideCaseInfo: hide case info button, false (default) or true -->
-    <!-- isHideTaskName: hide task name, false (default) or true -->
-    <!-- isHideTaskAction: hide task action button, false (default) or true -->
-    <!-- isWorkingOnATask: working on a task in order to display warning if leave page, false or true (default) -->
+    <!-- Available params in this template: -->
+    <!-- taskName: Custom text for task name -->
+    <!-- taskIcon: Task icon to be displayed, using Streamline or Awesome font, e.g., `si si-arrow-right` -->
+    <!-- isHideTaskName: Hide task name, false (default) or true -->
+    <!-- caseId: ID of case to be displayed in case information dialog -->
+    <!-- isHideCaseInfo: Hide `Show Information` button, false (default) or true -->
+    <!-- currentProcessStep: Current process step, could be the index of the step or the step name -->
+    <!-- processSteps: List of process steps, e.g., `[&quot;Create Investment Request&quot;, &quot;Approve Investment Reques&quot;]` -->
+    <!--   or `#{portalComponentUtilsBean.convertToJSON(data.steps)}` -->
+    <!-- isShowAllSteps: Shows all steps on large screens, false (default) or true -->
     <!-- processChainDirection: VERTICAL or HORIZONTAL (default) -->
     <!-- processChainShape: LINE or CIRCLE (default) -->
-    <!-- announcementInvisible: false or true (default) -->
-    <!-- caseId: ID of case to be displayed in case information -->
-    <!-- taskName: a custom task name -->
-    <!-- isCardFrame: display content of the IFrame inside a card style -->
-    <!-- PASS PARAMS TO THIS TEMPLATE VIA JAVASCRIPT IN YOUR HTML DIALOG: -->
-    <!-- <script> -->
-    <!--   // Set process steps directly as Array. -->
-    <!--   window.processSteps = ["Create Investment Request", "Approve Investment Request"]; -->
-    
-    <!--   // If process steps are set in HTML dialog logic or java code, convert it to JSON format -->
-    <!--   // Use this code if process steps are a java String list -->
-    <!--   window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)}; -->
-    
-    <!--   // Current process step could be a number or String: -->
-    <!--   window.currentProcessStep = 0; -->
-    <!--   window.currentProcessStep = #{data.currentProcessStep}; -->
-    <!--   window.currentProcessStep = "#{data.currentProcessStep}"; -->
-    
-    <!--   window.isShowAllSteps = true; -->
-    <!--   window.isHideCaseInfo = false; -->
-    <!--   window.isHideTaskName = false; -->
-    <!--   window.isHideTaskAction = false; -->
-    <!--   window.isWorkingOnATask = false; -->
-    <!--   window.processChainDirection = "VERTICAL"; -->
-    <!--   window.processChainShape = "LINE"; -->
-    <!--   window.announcementInvisible = false; -->
-    <!--   window.taskName = "Task Name"; -->
+    <!-- isHideTaskAction: Hide task action button, false (default) or true -->
+    <!-- isWorkingOnATask: Working on a task in order to display warning when leaving page, false or true (default) -->
+    <!-- announcementInvisible: Make announcement invisible, false or true (default) -->
+    <!-- isCardFrame: Display content of the IFrame inside a card style -->
+    <!-- viewName: Custom breadcrum, value could be HOME, PROCESS, TASK, TASK_DETAIL, CASE_DETAIL, CASE, TECHNICAL_CASE, RELATED_TASK, USER_PROFILE, -->
+    <!--   ABSENCES_MANAGEMENT, DASHBOARD_CONFIGURATION, EDIT_DASHBOARD_DETAILS, PROCESS_VIEWER, PORTAL_MANAGEMENT, NOTIFICATION -->
 
-    <!--   Use this code to show case details of a case different from current case of working task
-           by send the case ID of that case. -->
-    <!--   window.caseId = 123456; -->
+    <!-- You could configure UI in either of these two ways -->
+    <!-- 1. Using component IFrameTaskConfig, this way is recommended -->
+    <!--   <ic:com.axonivy.portal.components.IFrameTaskConfig  -->
+    <!--     taskName="Approve Investment"  -->
+    <!--     taskIcon="si si-bulb" -->
+    <!--     isHideTaskName="false" -->
+    <!--     caseId="123456"  -->
+    <!--     isHideCaseInfo="false" -->
+    <!--     currentProcessStep="0" -->
+    <!--     processSteps='["Create Investment Request", "Approve Investment Request"]' -->
+    <!--     isShowAllSteps="true" -->
+    <!--     processChainDirection="VERTICAL" -->
+    <!--     processChainShape="LINE" -->
+    <!--     isHideTaskAction="true" -->
+    <!--     isWorkingOnATask="false" -->
+    <!--     announcementInvisible="false" -->
+    <!--     isCardFrame="true" -->
+    <!--     viewName="TASK_DETAIL" -->
+    <!--   /> -->
 
-    <!--   // If the variable is set to true, the dialog will be displayed with a card -->
-    <!--   window.isCardFrame = true; -->
-    <!-- </script> -->
+    <!-- 2. Using Javascript -->
+    <!--   <script> -->
+    <!--     window.taskName = "Approve Investment"; -->
+    <!--     window.taskIcon = "si bulb"; -->
+    <!--     window.isHideTaskName = false; -->
+    <!--     window.caseId = "123456"; -->
+    <!--     window.isHideCaseInfo = false; -->
+    <!--     window.currentProcessStep = 0; -->
+    <!--     window.currentProcessStep = #{data.currentProcessStep}; -->
+    <!--     window.currentProcessStep = "#{data.currentProcessStep}"; -->
+    <!--     // Set process steps directly as Array. -->
+    <!--     window.processSteps = ["Create Investment Request", "Approve Investment Request"]; -->
+    <!--     // If process steps are set in HTML dialog logic or java code, convert it to JSON format -->
+    <!--     // Use this code if process steps are a java String list -->
+    <!--     window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)}; -->
+    <!--     window.isShowAllSteps = true; -->
+    <!--     window.processChainDirection = "VERTICAL"; -->
+    <!--     window.processChainShape = "LINE"; -->
+    <!--     window.isHideTaskAction = false; -->
+    <!--     window.isWorkingOnATask = false; -->
+    <!--     window.announcementInvisible = false; -->
+    <!--     window.isCardFrame = true; -->
+    <!--     window.viewName = TASK_DETAIL; -->
+    <!--   </script> -->
 
     <ui:param name="contentContainerStyleClass" value="task-frame-container js-task-frame-container" />
     <ui:param name="layoutContentStyleClass" value="frame-container" />
diff --git a/Documentation/portal-guide/source/portal-developer-guide/customization/business-details-page.rst b/Documentation/portal-guide/source/portal-developer-guide/customization/business-details-page.rst
index 235698a1dba..b8c6849de29 100644
--- a/Documentation/portal-guide/source/portal-developer-guide/customization/business-details-page.rst
+++ b/Documentation/portal-guide/source/portal-developer-guide/customization/business-details-page.rst
@@ -44,16 +44,7 @@ How to customize the business details page
 
 Customization
 -------------
--  If your custom Business Details page uses an IFrame, you may want to set some additional
-   Window properties on your page: 
-
-   - window.isHideCaseInfo = true;
-   - window.isHideTaskAction = true;
-   - window.isHideTaskName = true;
-   - window.isWorkingOnATask = false;
-   - window.viewName = '';
-
-   |customization-business-details-page-iframe|
+-  If your custom Business Details page uses an IFrame, you could configure the UI accordingly. Refer to :ref:`iframe-configure-template` for more information.
 
 -  Using the Public API, you can control whether the business details page will start inside IFrame or not by setting the ``BusinessDetailsDTO.builder().isEmbedInFrame(Boolean)`` value to 
    
@@ -86,7 +77,6 @@ Or search :bdg-ref-warning:`🔑ShowCaseDetails <ShowCaseDetails>` in the permis
 
 
 .. |start-business-details-page-iframe| image:: images/business-details-page/start-business-details-page-iframe.png
-.. |customization-business-details-page-iframe| image:: images/business-details-page/customization-business-details-page-iframe.png
 .. |set-business-details-page-callable-process| image:: images/business-details-page/set-business-details-page-callable-process.png
 .. |customize-business-details-with-public-api| image:: images/business-details-page/customize-business-details-with-public-api.png
 .. |customization-business-details-page-start-request| image:: images/business-details-page/customization-business-details-page-start-request.png
\ No newline at end of file
diff --git a/Documentation/portal-guide/source/portal-developer-guide/customization/images/business-details-page/customization-business-details-page-iframe.png b/Documentation/portal-guide/source/portal-developer-guide/customization/images/business-details-page/customization-business-details-page-iframe.png
deleted file mode 100644
index 2f4ffab227289deb6932dc220fb548f0968edcc0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 39310
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
NqXW&p?DGS${{(7l%*p@&

diff --git a/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_other_options.csv b/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_other_options.csv
index 5f048ee84cc..6d62f7e9369 100644
--- a/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_other_options.csv
+++ b/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_other_options.csv
@@ -1,5 +1,5 @@
 Variable,Description
 isHideTaskAction,"hide task action button, false (default) or true"
-isWorkingOnATask,"working on a task in order to display warning when leaving page, false or true (default)"
-announcementInvisible,false or true (default)
+isWorkingOnATask,"working on a task in order to display warning when leaving page, true (default) or false"
+announcementInvisible,true (default) or false 
 isCardFrame,display content of the IFrame inside a card style
diff --git a/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_process_steps_options.csv b/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_process_steps_options.csv
index 38899b0dd4c..6e03259f991 100644
--- a/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_process_steps_options.csv
+++ b/Documentation/portal-guide/source/portal-developer-guide/iframe/documents/available_process_steps_options.csv
@@ -2,5 +2,5 @@ Variable,Description
 currentProcessStep,current process step
 processSteps,list of process steps
 isShowAllSteps,"shows all of steps on large screens, false (default) or true"
-processChainDirection,VERTICAL or HORIZONTAL (default)
-processChainShape,LINE or CIRCLE (default)
+processChainDirection,HORIZONTAL (default) or VERTICAL
+processChainShape,CIRCLE (default) or LINE
diff --git a/Documentation/portal-guide/source/portal-developer-guide/iframe/index.rst b/Documentation/portal-guide/source/portal-developer-guide/iframe/index.rst
index 377f954c3e1..9f7d54fbd8f 100644
--- a/Documentation/portal-guide/source/portal-developer-guide/iframe/index.rst
+++ b/Documentation/portal-guide/source/portal-developer-guide/iframe/index.rst
@@ -57,52 +57,84 @@ Follow these steps to use the IFrame approach:
        ``Portal.EmbedInFrame`` Portal setting. refer to
        :ref:`update-portal-settings`
 
+.. _iframe-configure-template:
+
 Configure template
 ==================
 
-**Portal** supports some layout options for the templates mentioned above.
+**Portal** supports some configurations for templates like:
 
-#. ``Task name``: name of the working task.
+#. Name and icon of the working task.
 
-#. ``Process steps``: Refer to :ref:`components-portal-components-process-chain`.
+#. Configuration of :ref:`components-portal-components-process-chain`.
 
-#. ``Show Information``: button to show Case details and other actions.
+#. Show/hide case details and other actions.
 
 |task-name-template|
 
-You can configure those options by using Javascript from your HTML dialog as follows:
-
-.. code-block:: xml
-
-   <h:body>
-      <ui:composition template="/layouts/frame-10.xhtml">
-         ...
-         <script>
-            // Set the process steps directly as Array.
-            window.processSteps = ["Create Investment Request", "Approve Investment Request"];
-
-            // If the process steps are set in HTML dialog logic or java code, convert it to JSON format
-            // Use this code if the process steps are a Java String list
-            window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-
-            window.currentProcessStep = 0;
-            window.currentProcessStep = #{data.currentProcessStep};
-            window.isHideTaskName= false;
-            window.isHideCaseInfo = false;
-            window.isWorkingOnATask = false;
-            window.taskName = "Your New Task Name";
-            // Define task icon using Streamline or Awesome font
-            window.taskIcon = "si si-arrow-right";
-
-            // show case details of a case different from current case.
-            window.caseId = "Case-Id";
-
-            // Display content of the IFrame inside a card style.
-            window.isCardFrame = true;
-         </script>
-         ...
-      </ui:composition>
-   </h:body>
+You could configure UI in either of these two ways:
+
+#. Using the component IFrameTaskConfig (recommended)
+
+   .. code-block:: xml
+
+      <h:body>
+         <ui:composition template="/layouts/frame-10.xhtml">
+            ...
+            <ic:com.axonivy.portal.components.IFrameTaskConfig 
+               taskName="Approve Investment" 
+               taskIcon="si si-bulb"
+               isHideTaskName="false"
+               caseId="123456"
+               isHideCaseInfo="false"
+               currentProcessStep="0"
+               processSteps='["Create Investment Request", "Approve Investment Request"]'
+               isShowAllSteps="true"
+               processChainDirection="VERTICAL"
+               processChainShape="LINE"
+               isHideTaskAction="true"
+               isWorkingOnATask="false"
+               announcementInvisible="false"
+               isCardFrame="true"
+               viewName="TASK_DETAIL"
+            />
+            ...
+         </ui:composition>
+      </h:body>
+
+#. Using Javascript
+
+   .. code-block:: xml
+
+      <h:body>
+         <ui:composition template="/layouts/frame-10.xhtml">
+            ...   
+            <script>
+               window.taskName = "Approve Investment";
+               window.taskIcon = "si si-bulb";
+               window.isHideTaskName = false;
+               window.caseId = "123456";
+               window.isHideCaseInfo = false;
+               window.currentProcessStep = 0;
+               window.currentProcessStep = #{data.currentProcessStep};
+               window.currentProcessStep = "#{data.currentProcessStep}";
+               // Set process steps directly as Array.
+               window.processSteps = ["Create Investment Request", "Approve Investment Request"];
+               // If process steps are set in HTML dialog logic or java code, convert it to JSON format
+               // Use this code if process steps are a java String list
+               window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
+               window.isShowAllSteps = true;
+               window.processChainDirection = "VERTICAL";
+               window.processChainShape = "LINE";
+               window.isHideTaskAction = true;
+               window.isWorkingOnATask = false;
+               window.announcementInvisible = false;
+               window.isCardFrame = true;
+               window.viewName = TASK_DETAIL;
+            </script>
+            ...
+         </ui:composition>
+      </h:body>
 
 Configure Task name
 -------------------
@@ -117,16 +149,16 @@ Options for ``Task name``
   :header-rows: 1
   :class: longtable
 
-Example:
+Example using IFrameTaskConfig:
 
 .. code-block:: xml
 
    <h:body>
       <ui:composition template="/layouts/frame-10.xhtml">
          ...
-         <script>
-            window.taskName = "Your New Task Name";
-         </script>
+         <ic:com.axonivy.portal.components.IFrameTaskConfig 
+            taskName="Approve Investment"
+         />
          ...
       </ui:composition>
    </h:body>
@@ -148,16 +180,16 @@ Options for ``Show Information``
   :header-rows: 1
   :class: longtable
 
-Example:
+Example using IFrameTaskConfig:
 
 .. code-block:: xml
 
    <h:body>
       <ui:composition template="/layouts/frame-10.xhtml">
          ...
-         <script>
-            window.caseId = "Case-Id";
-         </script>
+         <ic:com.axonivy.portal.components.IFrameTaskConfig 
+            caseId="123456"
+         />
          ...
       </ui:composition>
    </h:body>
@@ -181,19 +213,19 @@ Options for ``Process steps``
        When defining parameter ``processSteps``, please make sure that you add this JSP function tag to your HTML dialog:
        ``xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"``
 
-Example:
+Example using IFrameTaskConfig:
 
 .. code-block:: xml
 
    <h:body>
       <ui:composition template="/layouts/frame-10.xhtml">
          ...
-         <script>
-            window.currentProcessStep = 0;
-            window.processSteps = ["Create Investment Request", "Approve Investment Request"];
-            window.processChainDirection = "VERTICAL";
-            window.processChainShape = "LINE";
-         </script>
+         <ic:com.axonivy.portal.components.IFrameTaskConfig 
+            currentProcessStep="0"
+            processSteps='["Create Investment Request", "Approve Investment Request"]'
+            processChainDirection="VERTICAL"
+            processChainShape="LINE"
+         />
          ...
       </ui:composition>
    </h:body>
@@ -209,17 +241,19 @@ Various options can affect functions and layout.
   :header-rows: 1
   :class: longtable
 
-Example:
+Example using IFrameTaskConfig:
 
 .. code-block:: xml
 
    <h:body>
       <ui:composition template="/layouts/frame-10.xhtml">
          ...
-         <script>
-            window.isHideTaskAction = true;
-            window.isWorkingOnATask = false;
-         </script>
+         <ic:com.axonivy.portal.components.IFrameTaskConfig 
+            isHideTaskAction="true"
+            isWorkingOnATask="false"
+            announcementInvisible="false"
+            isCardFrame="true"
+         />
          ...
       </ui:composition>
    </h:body>
@@ -234,4 +268,4 @@ to the page you want to display (i.e., default pages like application home, task
 .. |case-embedInFrame| image:: images/case-embedInFrame.png
 .. |case-list-template| image:: ../../screenshots/case/case-key-information.png
 .. |task-list-template| image:: ../../screenshots/task/task-key-information.png
-.. |task-name-template| image:: ../../screenshots/layout-template/task-template.png
\ No newline at end of file
+.. |task-name-template| image:: ../../screenshots/layout-template/task-template.png
diff --git a/Documentation/portal-guide/source/portal-developer-guide/installation/index.rst b/Documentation/portal-guide/source/portal-developer-guide/installation/index.rst
index 1573f3f6f17..9aa72f939f2 100644
--- a/Documentation/portal-guide/source/portal-developer-guide/installation/index.rst
+++ b/Documentation/portal-guide/source/portal-developer-guide/installation/index.rst
@@ -481,6 +481,7 @@ Changes in 12
 -------------
 
 - The old statistic chart is removed, use the new :ref:`statistic-chart` instead.
+- Introduce the component IFrameTaskConfig to configure IFrame tasks. Refer to :ref:`iframe-configure-template` for more information.
 
 Changes in 11.2.0
 -----------------
diff --git a/Showcase/InternalSupport/src_hd/internaltest/ui/SaleDepartment/SaleDepartment.xhtml b/Showcase/InternalSupport/src_hd/internaltest/ui/SaleDepartment/SaleDepartment.xhtml
index 9101c8675a9..488a793ed32 100644
--- a/Showcase/InternalSupport/src_hd/internaltest/ui/SaleDepartment/SaleDepartment.xhtml
+++ b/Showcase/InternalSupport/src_hd/internaltest/ui/SaleDepartment/SaleDepartment.xhtml
@@ -6,9 +6,7 @@
   <ui:composition template="/layouts/frame-10-full-width.xhtml">
     <ui:define name="title">Task: #{ivy.task.names().current()}</ui:define>
     <ui:define name="content">
-      <script>
-        window.viewName="TASK_DETAIL";
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig viewName="TASK_DETAIL" />
       <h3>This is private page for Sale employees</h3>
 
       <h:form id="form">
@@ -21,9 +19,7 @@
           <p:commandButton actionListener="#{logic.close}" value="Proceed" update="form" icon="ui-icon-check" />
         </h:panelGrid>
       </h:form>
-      <script>
-        window.taskName = 'nam mai';
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig taskName="nam mai" />
 
     </ui:define>
   </ui:composition>
diff --git a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/CustomizedDocumentTableExample/CustomizedDocumentTableExample.xhtml b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/CustomizedDocumentTableExample/CustomizedDocumentTableExample.xhtml
index a29b1a19f6c..24441f98e24 100644
--- a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/CustomizedDocumentTableExample/CustomizedDocumentTableExample.xhtml
+++ b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/CustomizedDocumentTableExample/CustomizedDocumentTableExample.xhtml
@@ -35,9 +35,7 @@
         </ic:com.axonivy.portal.components.DocumentTable>
       </h:form>
       </div>
-      <script>
-        window.isWorkingOnATask = false;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig isWorkingOnATask="false" />
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/DocumentTableExample/DocumentTableExample.xhtml b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/DocumentTableExample/DocumentTableExample.xhtml
index 4c17e0eae7c..62e80dea910 100644
--- a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/DocumentTableExample/DocumentTableExample.xhtml
+++ b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/DocumentTableExample/DocumentTableExample.xhtml
@@ -14,9 +14,7 @@
           <ic:com.axonivy.portal.components.DocumentTable />
         </h:form>
       </div>
-      <script>
-        window.isWorkingOnATask = false;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig isWorkingOnATask="false" />
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/InvestmentRequestBusinessDetailsPage/InvestmentRequestBusinessDetailsPage.xhtml b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/InvestmentRequestBusinessDetailsPage/InvestmentRequestBusinessDetailsPage.xhtml
index e526b106f4b..820588b407c 100644
--- a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/InvestmentRequestBusinessDetailsPage/InvestmentRequestBusinessDetailsPage.xhtml
+++ b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/InvestmentRequestBusinessDetailsPage/InvestmentRequestBusinessDetailsPage.xhtml
@@ -27,14 +27,8 @@
         </p:column>
       </p:dataTable>
       </h:panelGrid>
-      <script>
-          window.isHideCaseInfo = true;
-          window.isHideTaskAction = true;
-          window.isHideTaskName = true;
-          window.isWorkingOnATask = false;
-          window.viewName = '';
-      </script>
-      
+      <ic:com.axonivy.portal.components.IFrameTaskConfig isHideCaseInfo="true" isHideTaskAction="true"
+        isHideTaskName="true" isWorkingOnATask="false" viewName="" />
     </ui:define>
 
   </ui:composition>
diff --git a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml
index a9add2d9188..1fc68243303 100644
--- a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml
+++ b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml
@@ -73,11 +73,7 @@
           id="rejected-btn" styleClass="secondary-btn Fright MarTop10" actionListener="#{logic.rejected}"
           process=":leave-request" update=":leave-request" style="width: auto" />
       </h:form>
-
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 1;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="1" />
 
     </ui:define>
   </ui:composition>
diff --git a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml
index dde0b41b481..4ec9ab1e917 100644
--- a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml
+++ b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml
@@ -81,10 +81,7 @@
           <div class="ui-g-12 ui-md-12 ui-lg-1 ui-xl-3"></div>
         </h:panelGroup>
       </h:form>
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 0;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="0" />
 
     </ui:define>
   </ui:composition>
diff --git a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml
index 6d14b8187ce..064af40686f 100644
--- a/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml
+++ b/Showcase/portal-components-examples/src_hd/com/axonivy/portal/components/examples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml
@@ -68,10 +68,7 @@
           styleClass="Fright MarTop10" partialSubmit="true" id="finish-btn" actionListener="#{logic.close}"
           process=":leave-request" update=":leave-request" style="width: auto" />
       </h:form>
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 2;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="2" />
 
     </ui:define>
   </ui:composition>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/showcase/PhotoLibraryOfDefaultProcessImageExample/PhotoLibraryOfDefaultProcessImageExample.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/showcase/PhotoLibraryOfDefaultProcessImageExample/PhotoLibraryOfDefaultProcessImageExample.xhtml
index e0c2e4ff04e..efed1e3d6f8 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/showcase/PhotoLibraryOfDefaultProcessImageExample/PhotoLibraryOfDefaultProcessImageExample.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/showcase/PhotoLibraryOfDefaultProcessImageExample/PhotoLibraryOfDefaultProcessImageExample.xhtml
@@ -21,12 +21,7 @@
           </ui:fragment>
         </ui:repeat>
       </h:panelGroup>
-      <script type="text/javascript">
-        window.isWorkingOnATask = false;
-        window.isHideTaskAction = true;
-        window.isHideCaseInfo = true;
-        window.isHideTaskName = true;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig isWorkingOnATask="false" isHideTaskAction="true" isHideCaseInfo="true" isHideTaskName="true" />
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Approve/Approve.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Approve/Approve.xhtml
index bcaa5e67a35..65717f7cc0c 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Approve/Approve.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Approve/Approve.xhtml
@@ -104,15 +104,18 @@
           <p:commandButton id="home-btn" value="Back to Home" actionListener="#{logic.home}" immediate="true" />
         </div>
       </h:form>
-      <script>
-        window.processSteps = ["Create Investment Request", "Approve Investment Request", "Review Request" ];
-        window.currentProcessStep = 1;
-        window.isShowAllSteps = true;
-        window.isWorkingOnATask = false;
-        window.announcementInvisible = false;
-        window.viewName="TASK_DETAIL";
-        window.taskIcon = "fa fa-anchor";
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps='["Create Investment Request", "Approve Investment Request", "Review Request" ]'
+        currentProcessStep="1" isShowAllSteps="true" isWorkingOnATask="false" announcementInvisible="false" viewName="TASK_DETAIL" taskIcon="fa fa-anchor"/>
+      <!-- You could also configure by Javascript -->
+      <!-- <script> -->
+      <!--   window.processSteps = ["Create Investment Request", "Approve Investment Request", "Review Request" ]; -->
+      <!--   window.currentProcessStep = 1; -->
+      <!--   window.isShowAllSteps = true; -->
+      <!--   window.isWorkingOnATask = false; -->
+      <!--   window.announcementInvisible = false; -->
+      <!--   window.viewName="TASK_DETAIL"; -->
+      <!--   window.taskIcon = "fa fa-anchor"; -->
+      <!-- </script> -->
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CreateInvestment/CreateInvestment.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CreateInvestment/CreateInvestment.xhtml
index 206b901f719..70af807251e 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CreateInvestment/CreateInvestment.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CreateInvestment/CreateInvestment.xhtml
@@ -67,13 +67,16 @@
             style="float: right; margin-top: 20px;" />
         </div>
       </h:form>
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 0;
-        window.processChainDirection = "VERTICAL";
-        window.processChainShape = "LINE";
-        window.viewName = "TASK_DETAIL";
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="0"
+        processChainDirection="VERTICAL" processChainShape="LINE" viewName="TASK_DETAIL"/>
+      <!-- You could also configure by Javascript -->
+      <!-- <script> -->
+      <!--   window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)}; -->
+      <!--   window.currentProcessStep = 0; -->
+      <!--   window.processChainDirection = "VERTICAL"; -->
+      <!--   window.processChainShape = "LINE"; -->
+      <!--   window.viewName = "TASK_DETAIL"; -->
+      <!-- </script> -->
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomParamsForIFrame/CustomParamsForIFrame.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomParamsForIFrame/CustomParamsForIFrame.xhtml
index 213e57ca12c..31c234d31ce 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomParamsForIFrame/CustomParamsForIFrame.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomParamsForIFrame/CustomParamsForIFrame.xhtml
@@ -25,11 +25,13 @@
           <p:commandButton actionListener="#{logic.close}" value="Proceed" update="form" icon="ui-icon-check" />
         </p:panelGrid>
       </h:form>
-      <script>
-          window.isHideCaseInfo = true;
-          window.isHideTaskAction = true;
-          window.isHideTaskName = true;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig isHideCaseInfo="true" isHideTaskAction="true" isHideTaskName="true" />
+      <!-- You could also configure by Javascript -->
+      <!-- <script> -->
+      <!--   window.isHideCaseInfo = true; -->
+      <!--   window.isHideTaskAction = true; -->
+      <!--   window.isHideTaskName = true; -->
+      <!-- </script> -->
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomTaskNameForIFrame/CustomTaskNameForIFrame.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomTaskNameForIFrame/CustomTaskNameForIFrame.xhtml
index 892b9c38905..7dd7ca1267b 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomTaskNameForIFrame/CustomTaskNameForIFrame.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/CustomTaskNameForIFrame/CustomTaskNameForIFrame.xhtml
@@ -25,9 +25,11 @@
           <p:commandButton actionListener="#{logic.close}" value="Proceed" update="form" icon="ui-icon-check" />
         </p:panelGrid>
       </h:form>
-      <script>
-          window.taskName = '#{data.taskName}';
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig taskName='#{data.taskName}' />
+      <!-- You could also configure by Javascript -->
+      <!-- <script> -->
+      <!--    window.taskName = '#{data.taskName}'; -->
+      <!--</script> -->
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeDetailsInFrame/EmployeeDetailsInFrame.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeDetailsInFrame/EmployeeDetailsInFrame.xhtml
index dfc790dfb6b..e40d88c6e5e 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeDetailsInFrame/EmployeeDetailsInFrame.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeDetailsInFrame/EmployeeDetailsInFrame.xhtml
@@ -35,10 +35,7 @@
 					<h:outputText id="last-name" value="#{data.employee.lastName}" />
 				</div>
 			</div>
-			<script>
-				window.isHideCaseInfo = false;
-				window.caseId = "#{employeeDetailsBean.findCaseByEmployeeId(data.employee.id).getId()}";
-			</script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig isHideCaseInfo="false" caseId="#{employeeDetailsBean.findCaseByEmployeeId(data.employee.id).getId()}" />
 		</ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeSearchInFrame/EmployeeSearchInFrame.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeSearchInFrame/EmployeeSearchInFrame.xhtml
index 5cedfa475ca..0215d3fa8ec 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeSearchInFrame/EmployeeSearchInFrame.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/EmployeeSearchInFrame/EmployeeSearchInFrame.xhtml
@@ -30,9 +30,7 @@
 					<p:commandButton id="proceed" actionListener="#{logic.close}" value="Proceed" update="form" icon="ui-icon-check" />
 				</div>
 			</h:form>
-			<script>
-				window.isHideCaseInfo = false;
-			</script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig isHideCaseInfo="false" />
 		</ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/LeaveRequestForm/LeaveRequestForm.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/LeaveRequestForm/LeaveRequestForm.xhtml
index 87a1f301e8c..2269436bfbf 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/LeaveRequestForm/LeaveRequestForm.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/LeaveRequestForm/LeaveRequestForm.xhtml
@@ -5,9 +5,7 @@
 <h:body>
   <ui:composition template="/layouts/frame-10.xhtml">
     <ui:define name="content">
-      <script>
-        window.viewName="TASK_DETAIL";
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig viewName="TASK_DETAIL" />
       <h:form id="leave-request" styleClass="container">
         <p:focus></p:focus>
         <h:panelGroup styleClass="ui-g">
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/NewPayment/NewPayment.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/NewPayment/NewPayment.xhtml
index e62be89eb3c..9ce85aef67b 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/NewPayment/NewPayment.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/NewPayment/NewPayment.xhtml
@@ -7,9 +7,7 @@
     <ui:define name="title">NewPayment</ui:define>
 
     <ui:define name="content">
-      <script>
-        window.viewName="TASK_DETAIL";
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig viewName="TASK_DETAIL" />
       <h:form id="payment-request" styleClass="container ui-g">
         <p:focus for="payment-request" />
         <p:messages redisplay="false" showIcon="false" styleClass="ui-g-12">
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Review/Review.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Review/Review.xhtml
index 8761aca9c9c..b9999c3de3a 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Review/Review.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/Review/Review.xhtml
@@ -108,6 +108,10 @@
         window.viewName="TASK_DETAIL";
         window.taskIcon = "si si-module";
       </script>
+      <!-- Actually, using IFrameTaskConfig is recommended to configure IFrame tasks. Above configuration is just an another way to configure IFrame tasks. -->
+      <!-- <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps='["Create Investment Request", "Approve Investment Request", "Review Request" ]' -->
+      <!--   currentProcessStep="2" isShowAllSteps="true" isWorkingOnATask="true" announcementInvisible="false" viewName="TASK_DETAIL" taskIcon="si si-module"/> -->
+      
     </ui:define>
   </ui:composition>
 </h:body>
diff --git a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/TemplateExampleInFrame/TemplateExampleInFrame.xhtml b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/TemplateExampleInFrame/TemplateExampleInFrame.xhtml
index 3cf99430eb2..9ff026acb0b 100644
--- a/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/TemplateExampleInFrame/TemplateExampleInFrame.xhtml
+++ b/Showcase/portal-developer-examples/src_hd/com/axonivy/portal/developerexamples/testdata/TemplateExampleInFrame/TemplateExampleInFrame.xhtml
@@ -69,14 +69,17 @@
             style="float: right; margin-top: 20px;" />
         </div>
       </h:form>
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 0;
-        window.processChainShape = "LINE";
-        window.viewName = "TASK_DETAIL";
-        window.isCardFrame = true;
-        window.taskName = "Create new investment request";
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="0"
+        processChainShape="LINE" viewName="TASK_DETAIL" isCardFrame="true" taskName="Create new investment request" />
+      <!-- You could also configure by Javascript -->
+      <!-- <script> -->
+      <!--   window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)}; -->
+      <!--   window.currentProcessStep = 0; -->
+      <!--   window.processChainShape = "LINE"; -->
+      <!--   window.viewName = "TASK_DETAIL"; -->
+      <!--   window.isCardFrame = true; -->
+      <!--   window.taskName = "Create new investment request"; -->
+      <!-- </script> -->
 
     </ui:define>
   </ui:composition>
diff --git a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml
index 293e0507593..85e77337a25 100644
--- a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml
+++ b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestApproval/LeaveRequestApproval.xhtml
@@ -75,11 +75,7 @@
           id="rejected-btn" styleClass="secondary-btn Fright MarTop10" actionListener="#{logic.rejected}"
           process=":leave-request" update=":leave-request" style="width: auto" />
       </h:form>
-
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 1;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="1" />
 
     </ui:define>
   </ui:composition>
diff --git a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml
index d9bdb89b100..60f444c818b 100644
--- a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml
+++ b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestCreation/LeaveRequestCreation.xhtml
@@ -85,11 +85,7 @@
           <div class="ui-g-12 ui-md-12 ui-lg-1 ui-xl-3"></div>
         </h:panelGroup>
       </h:form>
-
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 0;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="0" />
 
     </ui:define>
   </ui:composition>
diff --git a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml
index 712dd88b512..59ab345aa7e 100644
--- a/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml
+++ b/Showcase/portal-user-examples/src_hd/com/axonivy/portal/userexamples/leaverequest/LeaveRequestSummary/LeaveRequestSummary.xhtml
@@ -70,11 +70,7 @@
           styleClass="Fright MarTop10" partialSubmit="true" id="finish-btn" actionListener="#{logic.close}"
           process=":leave-request" update=":leave-request" style="width: auto" />
       </h:form>
-
-      <script>
-        window.processSteps = #{portalComponentUtilsBean.convertToJSON(data.steps)};
-        window.currentProcessStep = 2;
-      </script>
+      <ic:com.axonivy.portal.components.IFrameTaskConfig processSteps="#{portalComponentUtilsBean.convertToJSON(data.steps)}" currentProcessStep="2" />
 
     </ui:define>
   </ui:composition>

From 5c49adf443d452890ccfb908b58f872c553f8c9b Mon Sep 17 00:00:00 2001
From: Thai Phan <117443490+pvthai-axonivy@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:54:43 +0700
Subject: [PATCH 5/8] 
 feature/IVYPORTAL-17777-add-cancel-button-for-complex-filter-diallog (#1152)

---
 .../restricted/decorator/SidebarWidgetConfiguration.xhtml | 8 ++++++--
 .../resources/js/sidebar-widget-configuration.js          | 6 +++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/SidebarWidgetConfiguration.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/SidebarWidgetConfiguration.xhtml
index 31e8f7ee988..6796eefbd1b 100644
--- a/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/SidebarWidgetConfiguration.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/SidebarWidgetConfiguration.xhtml
@@ -130,7 +130,7 @@
             actionListener="#{taskWidgetConfigurationFilterBean.updateWidgetFilterBeforeApply(widget)}"
             styleClass="Fright preview-button u-hidden-sm-down" icon="si si-check-1"
             update="predefined-filter configuration-filter-messages-panel"
-            oncomplete="closeFilterPanel(); if (args &amp;&amp; !args.validationFailed) { updateComponentOnPreviewCmd(); }" />
+            oncomplete="closeFilterPanelWithValidation(); if (args &amp;&amp; !args.validationFailed) { updateComponentOnPreviewCmd(); }" />
           <p:commandButton id="reset-filter" icon="si si-button-refresh-arrows"
             update="predefined-filter configuration-filter-messages-panel" process="predefined-filter" styleClass="Fright ui-button-secondary preview-button u-hidden-sm-down u-mar-right-5"
             actionListener="#{taskWidgetConfigurationFilterBean.resetFilter(widget)}"
@@ -138,7 +138,11 @@
             title="#{ivy.cms.co('/Dialogs/com/axonivy/portal/dashboard/component/TaskWidgetConfiguration/ResetFilter')}">
               <f:param name="skipValidator" value="true" />
           </p:commandButton>
-            
+          <p:commandLink id="cancel-filter" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+            styleClass="Fright u-mar-right-5 ui-overlaypanel-footer__cancel"
+            onclick="closeFilterPanel();return false;"
+            update="predefined-filter"
+            immediate="true" global="false"/> 
         </div>
       </div>
       <div class="ui-g-12 filter-area" >
diff --git a/AxonIvyPortal/portal/webContent/resources/js/sidebar-widget-configuration.js b/AxonIvyPortal/portal/webContent/resources/js/sidebar-widget-configuration.js
index a3e356c4e40..60b16e23c96 100644
--- a/AxonIvyPortal/portal/webContent/resources/js/sidebar-widget-configuration.js
+++ b/AxonIvyPortal/portal/webContent/resources/js/sidebar-widget-configuration.js
@@ -8,11 +8,15 @@ function openFilterPanel(event) {
   calculateFilterPaneltPosition();
 }
 
-function closeFilterPanel() {
+function closeFilterPanelWithValidation() {
   if (filterHasValidationError()) {
     return;
   }
 
+  closeFilterPanel();
+}
+
+function closeFilterPanel() {
   $('#new-widget-configuration-dialog').find('#widget-configuration-save-button').show();
   document.getElementById(filterPanelId).classList.remove("active");
 }

From 6e0e1e9383e655c99cac7ccef11dad6441e1f267 Mon Sep 17 00:00:00 2001
From: Thai Phan <117443490+pvthai-axonivy@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:38:49 +0700
Subject: [PATCH 6/8] IVYPORTAL-17831: Fix upload case document error (#1157)

---
 .../portalkit/component/CaseItemDocument/CaseItemDocument.xhtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml
index 1a567550f5a..31c58f7120b 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml
@@ -31,7 +31,7 @@
           <p:commandLink id="add-document-command"
             styleClass="case-details-document-add-link u-mar-right-10"
             rendered="#{caseTaskDocumentBean.canWriteDocument(case)}"
-            actionListener="#{data.setICase(case)}" oncomplete="PF('document-upload-dialog').show()">
+            onclick="PF('document-upload-dialog').show()">
             <span class="si si-common-file-add" />
             <span class="display-full-text">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/addDocument')}</span>
             <span class="display-short-text">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/add')}</span>

From 5173788e0e28938732f27d9214f0a0aeb27efd55 Mon Sep 17 00:00:00 2001
From: Thai Phan <117443490+pvthai-axonivy@users.noreply.github.com>
Date: Thu, 24 Oct 2024 17:53:12 +0700
Subject: [PATCH 7/8] IVYPORTAL-17764: Check shoutcuts keys pressed (#1127)
 (#1162)

(cherry picked from commit d2e13279a8074e81092afdc97f4384ece127106a)
---
 .../portal/webContent/resources/js/portal.js  | 279 +++++++++---------
 1 file changed, 141 insertions(+), 138 deletions(-)

diff --git a/AxonIvyPortal/portal/webContent/resources/js/portal.js b/AxonIvyPortal/portal/webContent/resources/js/portal.js
index 219c563f7ee..323b43a6d87 100644
--- a/AxonIvyPortal/portal/webContent/resources/js/portal.js
+++ b/AxonIvyPortal/portal/webContent/resources/js/portal.js
@@ -504,6 +504,10 @@ $(document).ready(function() {
     let focusedResetTaskFormEl = 0;
     let focusedTaskSideStepEl;
 
+    function onlyAltPressed(event) {
+      return event ? event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey : false;
+    }
+
     function removeFocusClass(element) {
       if(element) {
         element.removeClass('focused');
@@ -541,166 +545,165 @@ $(document).ready(function() {
     });
 
     $(document).on('keydown', function(event) {
-      if (event.key === 'Tab') {
-        removeFocusedElements();
-    }
-    var caseActionStepsPanel = $('[id*="action-steps-panel"]:visible');
-    var caseActionStepsPanelVisible = caseActionStepsPanel.length > 0;
-
-    var resetTaskConfirmForm = $('[id$="task-component:reset-task-confirmation-form"]:visible');
-    var resetTaskConfirmFormVisible = resetTaskConfirmForm.length > 0;
 
-    var taskActionStepsPanel = $('[id$=":side-steps-panel"]:visible');
-    var taskActionStepsPanelVisible = taskActionStepsPanel.length > 0;
-    
-
-    if (event.altKey && !isNaN(event.key) && event.key >= '1' && event.key <= '9') {
-      var index = parseInt(event.key) - 1;
-      if (index >= 0 && index < focusableElements.length) {
-          event.preventDefault();
-          var focusedElement = $(focusableElements[index]);
-          removeFocusedElements();
-          taskIndex = 0;
-          taskSideStepIndex = 0;
-          processIndex = 0;
-          if(caseActionStepsPanelVisible) {
-            caseSideStepIndex = 0;
-          } else {
-            caseIndex = 0;
+      if (event.key === 'Escape') {
+        var collapseWidgetBtn = $('[id*="collapse-link"]:visible');
+        if (collapseWidgetBtn.length > 0) {
+          collapseWidgetBtn.click();
+        }
+  
+        var caseSideActionCloseBtn = $('[id*="action-steps-panel"]:visible').find('.ui-overlaypanel-close');
+        if (caseSideActionCloseBtn.length > 0) {
+          caseSideActionCloseBtn.click();
+  
+          if(focusedCaseEl) {
+            focusedCaseEl.addClass('focused');
+            focusedCaseEl.focus();
           }
-          addFocusClass(focusedElement);
+        }
+  
+        var taskSideActionCloseBtn = $('[id*="side-steps-panel"]:visible').find('.ui-overlaypanel-close');
+        if (taskSideActionCloseBtn.length > 0) {
+          taskSideActionCloseBtn.click();
+        }
+        return;
       }
-    }
 
-    if (event.altKey) {
-      //Short cuts for Task widget
-      var key = event.key.toLowerCase();
-      if (key == 'w') {
-        if(resetTaskConfirmFormVisible) {
-          var cancelOk = [
-            resetTaskConfirmForm.find('a:first'),
-            resetTaskConfirmForm.find('button:first')
-          ];
-
-          if(resetTaskFormIndex >= cancelOk.length) {
-            resetTaskFormIndex = 0;
-          }
+      if (event.key === 'Tab') {
+        removeFocusedElements();
+        return;
+      }
 
-          removeFocusedElements();
-  
-          focusedResetTaskFormEl = $(cancelOk[resetTaskFormIndex]);
-          addFocusClass(focusedResetTaskFormEl);
-          resetTaskFormIndex++;
-        } else if(taskActionStepsPanelVisible) {
+      var caseActionStepsPanel = $('[id*="action-steps-panel"]:visible');
+      var caseActionStepsPanelVisible = caseActionStepsPanel.length > 0;
+
+      var resetTaskConfirmForm = $('[id$="task-component:reset-task-confirmation-form"]:visible');
+      var resetTaskConfirmFormVisible = resetTaskConfirmForm.length > 0;
+
+      var taskActionStepsPanel = $('[id$=":side-steps-panel"]:visible');
+      var taskActionStepsPanelVisible = taskActionStepsPanel.length > 0;
+      
+
+      if (onlyAltPressed(event)) {
+        var key = event.key.toLowerCase();
+        if (!isNaN(key) && key >= '1' && key <= '9') {
+          //Short cuts main menu item
+          var index = parseInt(key) - 1;
+          if (index >= 0 && index < focusableElements.length) {
+              event.preventDefault();
+              var focusedElement = $(focusableElements[index]);
+              removeFocusedElements();
+              taskIndex = 0;
+              taskSideStepIndex = 0;
+              processIndex = 0;
+              if(caseActionStepsPanelVisible) {
+                caseSideStepIndex = 0;
+              } else {
+                caseIndex = 0;
+              }
+              addFocusClass(focusedElement);
+          }
+        } else if (key == 'w') {
+          //Short cuts for Task widget
+          if(resetTaskConfirmFormVisible) {
+            var cancelOk = [
+              resetTaskConfirmForm.find('a:first'),
+              resetTaskConfirmForm.find('button:first')
+            ];
+
+            if(resetTaskFormIndex >= cancelOk.length) {
+              resetTaskFormIndex = 0;
+            }
 
-          var steps = taskActionStepsPanel.find('div.ui-overlaypanel-content a');
-          if(taskSideStepIndex >= steps.length) {
+            removeFocusedElements();
+    
+            focusedResetTaskFormEl = $(cancelOk[resetTaskFormIndex]);
+            addFocusClass(focusedResetTaskFormEl);
+            resetTaskFormIndex++;
+          } else if(taskActionStepsPanelVisible) {
+
+            var steps = taskActionStepsPanel.find('div.ui-overlaypanel-content a');
+            if(taskSideStepIndex >= steps.length) {
+              taskSideStepIndex = 0;
+            }
+    
+            removeFocusedElements();
+    
+            focusedTaskSideStepEl = $(steps[taskSideStepIndex]);
+            addFocusClass(focusedTaskSideStepEl);
+            taskSideStepIndex++;
+          } else {
+            var taskList = $('[id$=":task-component:dashboard-tasks"] table tr td:visible [id$=":start-task"]');
+            if(taskIndex >= taskList.length) {
+              taskIndex = 0;
+            }
+    
+            removeFocusedElements();
+            processIndex = 0;
             taskSideStepIndex = 0;
+            if(caseActionStepsPanelVisible) {
+              caseSideStepIndex = 0;
+            } else {
+              caseIndex = 0;
+            }
+    
+            focusedTaskEl = $(taskList[taskIndex]);
+            addFocusClass(focusedTaskEl);
+            taskIndex++;
           }
-  
-          removeFocusedElements();
-  
-          focusedTaskSideStepEl = $(steps[taskSideStepIndex]);
-          addFocusClass(focusedTaskSideStepEl);
-          taskSideStepIndex++;
-        } else {
-          var taskList = $('[id$=":start-task"]');
-          if(taskIndex >= taskList.length) {
-            taskIndex = 0;
-          }
-  
-          removeFocusedElements();
-          processIndex = 0;
-          taskSideStepIndex = 0;
+        } else if (key == 'q') {
+          //Short cuts for Case widget
           if(caseActionStepsPanelVisible) {
-            caseSideStepIndex = 0;
+            var steps = caseActionStepsPanel.find('div.ui-overlaypanel-content a');
+            
+            if(caseSideStepIndex >= steps.length) {
+              caseSideStepIndex = 0;
+            }
+    
+            removeFocusedElements();
+    
+            focusedCaseSideStepEl = $(steps[caseSideStepIndex]);
+            addFocusClass(focusedCaseSideStepEl);
+            caseSideStepIndex++;
           } else {
-            caseIndex = 0;
-          }
-  
-          focusedTaskEl = $(taskList[taskIndex]);
-          addFocusClass(focusedTaskEl);
-          taskIndex++;
-        }
-      }
+            var caseList = $('[id$="case-component:dashboard-cases"] table tr td:visible [id$=":dashboard-case-side-steps-menu"]');
+            
+            if(caseIndex >= caseList.length) {
+              caseIndex = 0;
+            }
 
-      //Short cuts for Case widget
-      if (key == 'q') {
-        if(caseActionStepsPanelVisible) {
-          var steps = caseActionStepsPanel.find('div.ui-overlaypanel-content a');
-          
-          if(caseSideStepIndex >= steps.length) {
+            removeFocusedElements();
+            taskIndex = 0;
+            taskSideStepIndex = 0;
+            processIndex = 0;
             caseSideStepIndex = 0;
+
+            focusedCaseEl = $(caseList[caseIndex]);
+            addFocusClass(focusedCaseEl);
+            caseIndex++;
           }
-  
-          removeFocusedElements();
-  
-          focusedCaseSideStepEl = $(steps[caseSideStepIndex]);
-          addFocusClass(focusedCaseSideStepEl);
-          caseSideStepIndex++;
-        } else {
-          var caseList = $('[id$="case-component:dashboard-cases"]').find('[id$=":dashboard-case-side-steps-menu"]');
+        } else if (key == 'a') {
+          //Short cuts for Process widget
+          var processList = $('[id$=":process-component:process-list"]').find('a');
           
-          if(caseIndex >= caseList.length) {
-            caseIndex = 0;
+          if(processIndex >= processList.length) {
+            processIndex = 0;
           }
 
           removeFocusedElements();
           taskIndex = 0;
           taskSideStepIndex = 0;
-          processIndex = 0;
-          caseSideStepIndex = 0;
-
-          focusedCaseEl = $(caseList[caseIndex]);
-          addFocusClass(focusedCaseEl);
-          caseIndex++;
-        }
-      }
-
-      //Short cuts for Process widget
-      if (key == 'a') {
-        var processList = $('[id$=":process-component:process-list"]').find('a');
-        
-        if(processIndex >= processList.length) {
-          processIndex = 0;
-        }
-
-        removeFocusedElements();
-        taskIndex = 0;
-        taskSideStepIndex = 0;
-        if(caseActionStepsPanelVisible) {
-          caseSideStepIndex = 0;
-        } else {
-          caseIndex = 0;
-        }
-
-        focusedProcessEl = $(processList[processIndex]);
-        addFocusClass(focusedProcessEl);
-        processIndex++;
-      }
-    }
-
-    if (event.key === 'Escape') {
-      var collapseWidgetBtn = $('[id*="collapse-link"]:visible');
-      if (collapseWidgetBtn.length > 0) {
-        collapseWidgetBtn.click();
-      }
-
-      var caseSideActionCloseBtn = $('[id*="action-steps-panel"]:visible').find('.ui-overlaypanel-close');
-      if (caseSideActionCloseBtn.length > 0) {
-        caseSideActionCloseBtn.click();
+          if(caseActionStepsPanelVisible) {
+            caseSideStepIndex = 0;
+          } else {
+            caseIndex = 0;
+          }
 
-        if(focusedCaseEl) {
-          focusedCaseEl.addClass('focused');
-          focusedCaseEl.focus();
+          focusedProcessEl = $(processList[processIndex]);
+          addFocusClass(focusedProcessEl);
+          processIndex++;
         }
       }
-
-      var taskSideActionCloseBtn = $('[id*="side-steps-panel"]:visible').find('.ui-overlaypanel-close');
-      if (taskSideActionCloseBtn.length > 0) {
-        taskSideActionCloseBtn.click();
-      }
-    }
   }); 
 });
 // End of accessibility for shortcuts navigation

From 3931c6c60fba9bdc78c38ab9f8bf8d527ab572c9 Mon Sep 17 00:00:00 2001
From: Nam Chu <117632090+chnam-axonivy@users.noreply.github.com>
Date: Mon, 28 Oct 2024 13:38:19 +0700
Subject: [PATCH 8/8] Release 12.0.0-m266

---
 Documentation/maven/pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Documentation/maven/pom.xml b/Documentation/maven/pom.xml
index c44488c518c..7ed91a06899 100644
--- a/Documentation/maven/pom.xml
+++ b/Documentation/maven/pom.xml
@@ -7,7 +7,7 @@
     <version>${revision}</version>
 
     <properties>
-        <revision>9.1.0.0-SNAPSHOT</revision>
+        <revision>12.0.0-m266</revision>
     </properties>
 
     <distributionManagement>