diff --git a/cypress.config.js b/cypress.config.js
index 3f2d6e8..0af0a7f 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -16,11 +16,11 @@ const { defineConfig } = require("cypress");
 module.exports = defineConfig({
   defaultCommandTimeout: 6000,
   viewportWidth: 1280,
-  viewportHeight:720,
+  viewportHeight: 720,
   e2e: {
     baseUrl: "http://localhost:4173",
     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
   },
   includeShadowDom: true,
-  env: {}
+  env: {},
 });
diff --git a/cypress/e2e/accountAdmin.cy.js b/cypress/e2e/accountAdmin.cy.js
index 2038923..68b16af 100644
--- a/cypress/e2e/accountAdmin.cy.js
+++ b/cypress/e2e/accountAdmin.cy.js
@@ -3,32 +3,32 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Account Management', () => {
+describe("Account Management", () => {
   beforeEach(() => {
     loginWithFixtures();
   });
 
-  it('displays user list on account admin page', () => {
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+  it("displays user list on account admin page", () => {
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
     // Should display users from fixture
-    cy.contains('Test Admin').should('exist');
-    cy.contains('Alice Wang').should('exist');
-    cy.contains('Bob Chen').should('exist');
+    cy.contains("Test Admin").should("exist");
+    cy.contains("Alice Wang").should("exist");
+    cy.contains("Bob Chen").should("exist");
   });
 
-  it('shows active/inactive status badges', () => {
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+  it("shows active/inactive status badges", () => {
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
     // The user list should show status indicators
-    cy.contains('testadmin').should('exist');
+    cy.contains("testadmin").should("exist");
   });
 
-  it('navigates to my-account page', () => {
-    cy.visit('/my-account');
-    cy.wait('@getMyAccount');
-    cy.url().should('include', '/my-account');
+  it("navigates to my-account page", () => {
+    cy.visit("/my-account");
+    cy.wait("@getMyAccount");
+    cy.url().should("include", "/my-account");
   });
 });
diff --git a/cypress/e2e/accountAdmin/accountDuplicationCheck.cy.js b/cypress/e2e/accountAdmin/accountDuplicationCheck.cy.js
index e20aa7e..464cd34 100644
--- a/cypress/e2e/accountAdmin/accountDuplicationCheck.cy.js
+++ b/cypress/e2e/accountAdmin/accountDuplicationCheck.cy.js
@@ -4,55 +4,61 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/07/03
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../../support/intercept';
+import { loginWithFixtures } from "../../support/intercept";
 
-const MSG_ACCOUNT_NOT_UNIQUE = 'Account has already been registered.';
+const MSG_ACCOUNT_NOT_UNIQUE = "Account has already been registered.";
 
-describe('Account duplication check.', () => {
+describe("Account duplication check.", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
   });
 
-  it('When an account already exists, show error message on confirm.', () => {
-    const testAccountName = '000000';
+  it("When an account already exists, show error message on confirm.", () => {
+    const testAccountName = "000000";
 
     // First creation: account doesn't exist yet
-    cy.intercept('GET', '/api/users/000000', {
+    cy.intercept("GET", "/api/users/000000", {
       statusCode: 404,
-      body: { detail: 'Not found' },
-    }).as('checkNewUser');
+      body: { detail: "Not found" },
+    }).as("checkNewUser");
 
-    cy.contains('button', 'Create New').should('be.visible').click();
-    cy.get('#input_account_field').type(testAccountName);
-    cy.get('#input_name_field').type(testAccountName);
-    cy.get('#input_first_pwd').type(testAccountName);
-    cy.get('.checkbox-and-text').first().find('div').first().click();
+    cy.contains("button", "Create New").should("be.visible").click();
+    cy.get("#input_account_field").type(testAccountName);
+    cy.get("#input_name_field").type(testAccountName);
+    cy.get("#input_first_pwd").type(testAccountName);
+    cy.get(".checkbox-and-text").first().find("div").first().click();
 
-    cy.contains('button', 'Confirm')
-      .should('be.visible')
-      .and('be.enabled')
+    cy.contains("button", "Confirm")
+      .should("be.visible")
+      .and("be.enabled")
       .click();
-    cy.wait('@postUser');
-    cy.contains('Account added').should('be.visible');
+    cy.wait("@postUser");
+    cy.contains("Account added").should("be.visible");
 
     // Second creation: now account exists — override to return 200
-    cy.intercept('GET', '/api/users/000000', {
+    cy.intercept("GET", "/api/users/000000", {
       statusCode: 200,
-      body: { username: '000000', name: '000000', is_admin: false, is_active: true, roles: [] },
-    }).as('checkExistingUser');
+      body: {
+        username: "000000",
+        name: "000000",
+        is_admin: false,
+        is_active: true,
+        roles: [],
+      },
+    }).as("checkExistingUser");
 
-    cy.contains('button', 'Create New').should('be.visible').click();
-    cy.get('#input_account_field').type(testAccountName);
-    cy.get('#input_name_field').type(testAccountName);
-    cy.get('#input_first_pwd').type(testAccountName);
-    cy.get('.checkbox-and-text').first().find('div').first().click();
+    cy.contains("button", "Create New").should("be.visible").click();
+    cy.get("#input_account_field").type(testAccountName);
+    cy.get("#input_name_field").type(testAccountName);
+    cy.get("#input_first_pwd").type(testAccountName);
+    cy.get(".checkbox-and-text").first().find("div").first().click();
 
-    cy.contains('button', 'Confirm')
-      .should('be.visible')
-      .and('be.enabled')
+    cy.contains("button", "Confirm")
+      .should("be.visible")
+      .and("be.enabled")
       .click();
-    cy.contains(MSG_ACCOUNT_NOT_UNIQUE).should('be.visible');
+    cy.contains(MSG_ACCOUNT_NOT_UNIQUE).should("be.visible");
   });
 });
diff --git a/cypress/e2e/accountAdmin/confirmPasswordMessage.cy.js b/cypress/e2e/accountAdmin/confirmPasswordMessage.cy.js
index ed700df..ec5bd88 100644
--- a/cypress/e2e/accountAdmin/confirmPasswordMessage.cy.js
+++ b/cypress/e2e/accountAdmin/confirmPasswordMessage.cy.js
@@ -4,33 +4,33 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/07/02
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../../support/intercept';
+import { loginWithFixtures } from "../../support/intercept";
 
-describe('Password validation on create account.', () => {
+describe("Password validation on create account.", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
   });
 
-  it('When password is too short, confirm button stays disabled.', () => {
-    cy.contains('button', 'Create New').should('be.visible').click();
+  it("When password is too short, confirm button stays disabled.", () => {
+    cy.contains("button", "Create New").should("be.visible").click();
 
-    cy.get('#input_account_field').type('unit-test-0001');
-    cy.get('#input_name_field').type('unit-test-0001');
+    cy.get("#input_account_field").type("unit-test-0001");
+    cy.get("#input_name_field").type("unit-test-0001");
     // Password shorter than 6 characters
-    cy.get('#input_first_pwd').type('aaa');
+    cy.get("#input_first_pwd").type("aaa");
 
-    cy.contains('button', 'Confirm').should('be.disabled');
+    cy.contains("button", "Confirm").should("be.disabled");
   });
 
-  it('When password meets minimum length, confirm button enables.', () => {
-    cy.contains('button', 'Create New').should('be.visible').click();
+  it("When password meets minimum length, confirm button enables.", () => {
+    cy.contains("button", "Create New").should("be.visible").click();
 
-    cy.get('#input_account_field').type('unit-test-0001');
-    cy.get('#input_name_field').type('unit-test-0001');
-    cy.get('#input_first_pwd').type('aaaaaa');
+    cy.get("#input_account_field").type("unit-test-0001");
+    cy.get("#input_name_field").type("unit-test-0001");
+    cy.get("#input_first_pwd").type("aaaaaa");
 
-    cy.contains('button', 'Confirm').should('be.enabled');
+    cy.contains("button", "Confirm").should("be.enabled");
   });
 });
diff --git a/cypress/e2e/accountAdmin/createAccount.cy.js b/cypress/e2e/accountAdmin/createAccount.cy.js
index cc9cf60..b3080a6 100644
--- a/cypress/e2e/accountAdmin/createAccount.cy.js
+++ b/cypress/e2e/accountAdmin/createAccount.cy.js
@@ -4,39 +4,39 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/07/02
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../../support/intercept';
+import { loginWithFixtures } from "../../support/intercept";
 
-describe('Create an Account', () => {
+describe("Create an Account", () => {
   beforeEach(() => {
     loginWithFixtures();
     // Override: new usernames should return 404 (account doesn't exist yet)
-    cy.intercept('GET', '/api/users/unit-test-*', {
+    cy.intercept("GET", "/api/users/unit-test-*", {
       statusCode: 404,
-      body: { detail: 'Not found' },
-    }).as('checkNewUser');
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+      body: { detail: "Not found" },
+    }).as("checkNewUser");
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
   });
 
-  it('Create a new account with admin role; should show saved message.', () => {
-    cy.contains('button', 'Create New').should('be.visible').click();
+  it("Create a new account with admin role; should show saved message.", () => {
+    cy.contains("button", "Create New").should("be.visible").click();
 
-    cy.get('#input_account_field').type('unit-test-0001');
-    cy.get('#input_name_field').type('unit-test-0001');
-    cy.get('#input_first_pwd').type('aaaaaa');
-    cy.get('.checkbox-and-text').first().find('div').first().click();
+    cy.get("#input_account_field").type("unit-test-0001");
+    cy.get("#input_name_field").type("unit-test-0001");
+    cy.get("#input_first_pwd").type("aaaaaa");
+    cy.get(".checkbox-and-text").first().find("div").first().click();
 
-    cy.contains('button', 'Confirm')
-      .should('be.visible')
-      .and('be.enabled')
+    cy.contains("button", "Confirm")
+      .should("be.visible")
+      .and("be.enabled")
       .click();
-    cy.wait('@postUser');
-    cy.contains('Account added').should('be.visible');
+    cy.wait("@postUser");
+    cy.contains("Account added").should("be.visible");
   });
 
-  it('Confirm button is disabled when required fields are empty.', () => {
-    cy.contains('button', 'Create New').should('be.visible').click();
-    cy.get('#input_account_field').type('test');
-    cy.contains('button', 'Confirm').should('be.disabled');
+  it("Confirm button is disabled when required fields are empty.", () => {
+    cy.contains("button", "Create New").should("be.visible").click();
+    cy.get("#input_account_field").type("test");
+    cy.contains("button", "Confirm").should("be.disabled");
   });
 });
diff --git a/cypress/e2e/accountAdmin/deleteAccount.cy.js b/cypress/e2e/accountAdmin/deleteAccount.cy.js
index dbac1fc..5494821 100644
--- a/cypress/e2e/accountAdmin/deleteAccount.cy.js
+++ b/cypress/e2e/accountAdmin/deleteAccount.cy.js
@@ -4,27 +4,27 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/07/03
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../../support/intercept';
+import { loginWithFixtures } from "../../support/intercept";
 
-describe('Delete an Account', () => {
+describe("Delete an Account", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
   });
 
-  it('Delete button opens confirmation modal and deletes on confirm.', () => {
-    cy.get('img.delete-account').first().click();
-    cy.contains('ARE YOU SURE TO DELETE').should('be.visible');
-    cy.get('#sure_to_delete_acct_btn').click();
-    cy.wait('@deleteUser');
-    cy.contains('Account deleted').should('be.visible');
+  it("Delete button opens confirmation modal and deletes on confirm.", () => {
+    cy.get("img.delete-account").first().click();
+    cy.contains("ARE YOU SURE TO DELETE").should("be.visible");
+    cy.get("#sure_to_delete_acct_btn").click();
+    cy.wait("@deleteUser");
+    cy.contains("Account deleted").should("be.visible");
   });
 
-  it('Cancel button closes the delete confirmation modal.', () => {
-    cy.get('img.delete-account').first().click();
-    cy.contains('ARE YOU SURE TO DELETE').should('be.visible');
-    cy.get('#calcel_delete_acct_btn').click();
-    cy.contains('ARE YOU SURE TO DELETE').should('not.exist');
+  it("Cancel button closes the delete confirmation modal.", () => {
+    cy.get("img.delete-account").first().click();
+    cy.contains("ARE YOU SURE TO DELETE").should("be.visible");
+    cy.get("#calcel_delete_acct_btn").click();
+    cy.contains("ARE YOU SURE TO DELETE").should("not.exist");
   });
 });
diff --git a/cypress/e2e/accountAdmin/editAccount.cy.js b/cypress/e2e/accountAdmin/editAccount.cy.js
index 2ab6de0..86d2579 100644
--- a/cypress/e2e/accountAdmin/editAccount.cy.js
+++ b/cypress/e2e/accountAdmin/editAccount.cy.js
@@ -4,30 +4,30 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/07/03
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../../support/intercept';
+import { loginWithFixtures } from "../../support/intercept";
 
-const MODAL_TITLE_ACCOUNT_EDIT = 'Account Edit';
-const MSG_ACCOUNT_EDITED = 'Saved';
+const MODAL_TITLE_ACCOUNT_EDIT = "Account Edit";
+const MSG_ACCOUNT_EDITED = "Saved";
 
-describe('Edit an account', () => {
+describe("Edit an account", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
   });
 
-  it('Edit an account; modify name and see saved message.', () => {
-    cy.get('.btn-edit').first().click();
-    cy.wait('@getUserDetail');
+  it("Edit an account; modify name and see saved message.", () => {
+    cy.get(".btn-edit").first().click();
+    cy.wait("@getUserDetail");
 
-    cy.contains('h1', MODAL_TITLE_ACCOUNT_EDIT).should('exist');
-    cy.get('#input_name_field').clear().type('Updated Name');
+    cy.contains("h1", MODAL_TITLE_ACCOUNT_EDIT).should("exist");
+    cy.get("#input_name_field").clear().type("Updated Name");
 
-    cy.contains('button', 'Confirm')
-      .should('be.visible')
-      .and('be.enabled')
+    cy.contains("button", "Confirm")
+      .should("be.visible")
+      .and("be.enabled")
       .click();
-    cy.wait('@putUser');
-    cy.contains(MSG_ACCOUNT_EDITED).should('be.visible');
+    cy.wait("@putUser");
+    cy.contains(MSG_ACCOUNT_EDITED).should("be.visible");
   });
 });
diff --git a/cypress/e2e/accountCrud.cy.js b/cypress/e2e/accountCrud.cy.js
index 00981d7..88f7e89 100644
--- a/cypress/e2e/accountCrud.cy.js
+++ b/cypress/e2e/accountCrud.cy.js
@@ -3,94 +3,94 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Account Management CRUD', () => {
+describe("Account Management CRUD", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
   });
 
-  it('shows Create New button', () => {
-    cy.get('#create_new_acct_btn').should('exist');
-    cy.get('#create_new_acct_btn').should('contain', 'Create New');
+  it("shows Create New button", () => {
+    cy.get("#create_new_acct_btn").should("exist");
+    cy.get("#create_new_acct_btn").should("contain", "Create New");
   });
 
-  it('opens create new account modal', () => {
-    cy.get('#create_new_acct_btn').click();
-    cy.get('#modal_container').should('be.visible');
-    cy.get('#modal_account_edit_or_create_new').should('be.visible');
+  it("opens create new account modal", () => {
+    cy.get("#create_new_acct_btn").click();
+    cy.get("#modal_container").should("be.visible");
+    cy.get("#modal_account_edit_or_create_new").should("be.visible");
     // Should show account, name, password fields
-    cy.get('#input_account_field').should('exist');
-    cy.get('#input_name_field').should('exist');
-    cy.get('#input_first_pwd').should('exist');
+    cy.get("#input_account_field").should("exist");
+    cy.get("#input_name_field").should("exist");
+    cy.get("#input_first_pwd").should("exist");
   });
 
-  it('create account confirm is disabled when fields are empty', () => {
-    cy.get('#create_new_acct_btn').click();
-    cy.get('.confirm-btn').should('be.disabled');
+  it("create account confirm is disabled when fields are empty", () => {
+    cy.get("#create_new_acct_btn").click();
+    cy.get(".confirm-btn").should("be.disabled");
   });
 
-  it('create account confirm enables when fields are filled', () => {
-    cy.get('#create_new_acct_btn').click();
-    cy.get('#input_account_field').type('newuser');
-    cy.get('#input_name_field').type('New User');
-    cy.get('#input_first_pwd').type('password1234');
-    cy.get('.confirm-btn').should('not.be.disabled');
+  it("create account confirm enables when fields are filled", () => {
+    cy.get("#create_new_acct_btn").click();
+    cy.get("#input_account_field").type("newuser");
+    cy.get("#input_name_field").type("New User");
+    cy.get("#input_first_pwd").type("password1234");
+    cy.get(".confirm-btn").should("not.be.disabled");
   });
 
-  it('cancel button closes the modal', () => {
-    cy.get('#create_new_acct_btn').click();
-    cy.get('#modal_container').should('be.visible');
-    cy.get('.cancel-btn').click();
-    cy.get('#modal_container').should('not.exist');
+  it("cancel button closes the modal", () => {
+    cy.get("#create_new_acct_btn").click();
+    cy.get("#modal_container").should("be.visible");
+    cy.get(".cancel-btn").click();
+    cy.get("#modal_container").should("not.exist");
   });
 
-  it('close (X) button closes the modal', () => {
-    cy.get('#create_new_acct_btn').click();
-    cy.get('#modal_container').should('be.visible');
+  it("close (X) button closes the modal", () => {
+    cy.get("#create_new_acct_btn").click();
+    cy.get("#modal_container").should("be.visible");
     cy.get('img[alt="X"]').click();
-    cy.get('#modal_container').should('not.exist');
+    cy.get("#modal_container").should("not.exist");
   });
 
-  it('double-click username opens account info modal', () => {
+  it("double-click username opens account info modal", () => {
     // Double-click on the first account username
-    cy.get('.account-cell').first().dblclick();
-    cy.get('#modal_container').should('be.visible');
+    cy.get(".account-cell").first().dblclick();
+    cy.get("#modal_container").should("be.visible");
   });
 
-  it('delete button opens delete confirmation modal', () => {
+  it("delete button opens delete confirmation modal", () => {
     // Click the delete icon for a non-current user
-    cy.get('.delete-account').first().click();
-    cy.get('#modal_container').should('be.visible');
-    cy.get('#modal_delete_acct_alert').should('be.visible');
+    cy.get(".delete-account").first().click();
+    cy.get("#modal_container").should("be.visible");
+    cy.get("#modal_delete_acct_alert").should("be.visible");
   });
 
-  it('delete modal has Yes and No buttons', () => {
-    cy.get('.delete-account').first().click();
-    cy.get('#calcel_delete_acct_btn').should('exist');
-    cy.get('#sure_to_delete_acct_btn').should('exist');
+  it("delete modal has Yes and No buttons", () => {
+    cy.get(".delete-account").first().click();
+    cy.get("#calcel_delete_acct_btn").should("exist");
+    cy.get("#sure_to_delete_acct_btn").should("exist");
   });
 
-  it('delete modal No button closes the modal', () => {
-    cy.get('.delete-account').first().click();
-    cy.get('#calcel_delete_acct_btn').click();
-    cy.get('#modal_container').should('not.exist');
+  it("delete modal No button closes the modal", () => {
+    cy.get(".delete-account").first().click();
+    cy.get("#calcel_delete_acct_btn").click();
+    cy.get("#modal_container").should("not.exist");
   });
 
-  it('shows checkboxes for Set as Admin and Activate in create modal', () => {
-    cy.get('#create_new_acct_btn').click();
-    cy.get('#account_create_checkboxes_section').should('be.visible');
-    cy.contains('Set as admin.').should('exist');
-    cy.contains('Activate now.').should('exist');
+  it("shows checkboxes for Set as Admin and Activate in create modal", () => {
+    cy.get("#create_new_acct_btn").click();
+    cy.get("#account_create_checkboxes_section").should("be.visible");
+    cy.contains("Set as admin.").should("exist");
+    cy.contains("Activate now.").should("exist");
   });
 
-  it('search bar filters user list', () => {
+  it("search bar filters user list", () => {
     // Search filters by username, not display name
-    cy.get('#input_search').type('user1');
+    cy.get("#input_search").type("user1");
     cy.get('img[alt="search"]').click();
     // Should only show user1 (Alice Wang)
-    cy.contains('user1').should('exist');
+    cy.contains("user1").should("exist");
   });
 });
diff --git a/cypress/e2e/accountInfo.cy.js b/cypress/e2e/accountInfo.cy.js
index 30b6d36..7820346 100644
--- a/cypress/e2e/accountInfo.cy.js
+++ b/cypress/e2e/accountInfo.cy.js
@@ -3,38 +3,38 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Account Info Modal', () => {
+describe("Account Info Modal", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/account-admin');
-    cy.wait('@getUsers');
+    cy.visit("/account-admin");
+    cy.wait("@getUsers");
   });
 
-  it('double-click username opens info modal with user data', () => {
-    cy.get('.account-cell').first().dblclick();
-    cy.get('#modal_container').should('be.visible');
-    cy.get('#acct_info_user_name').should('exist');
+  it("double-click username opens info modal with user data", () => {
+    cy.get(".account-cell").first().dblclick();
+    cy.get("#modal_container").should("be.visible");
+    cy.get("#acct_info_user_name").should("exist");
   });
 
-  it('info modal shows Account Information header', () => {
-    cy.get('.account-cell').first().dblclick();
-    cy.get('#modal_container').should('be.visible');
-    cy.contains('Account Information').should('exist');
+  it("info modal shows Account Information header", () => {
+    cy.get(".account-cell").first().dblclick();
+    cy.get("#modal_container").should("be.visible");
+    cy.contains("Account Information").should("exist");
   });
 
-  it('info modal shows account visit info', () => {
-    cy.get('.account-cell').first().dblclick();
-    cy.get('#modal_container').should('be.visible');
-    cy.get('#account_visit_info').should('exist');
-    cy.get('#account_visit_info').should('contain', 'Account:');
+  it("info modal shows account visit info", () => {
+    cy.get(".account-cell").first().dblclick();
+    cy.get("#modal_container").should("be.visible");
+    cy.get("#account_visit_info").should("exist");
+    cy.get("#account_visit_info").should("contain", "Account:");
   });
 
-  it('info modal can be closed via X button', () => {
-    cy.get('.account-cell').first().dblclick();
-    cy.get('#modal_container').should('be.visible');
+  it("info modal can be closed via X button", () => {
+    cy.get(".account-cell").first().dblclick();
+    cy.get("#modal_container").should("be.visible");
     cy.get('img[alt="X"]').click();
-    cy.get('#modal_container').should('not.exist');
+    cy.get("#modal_container").should("not.exist");
   });
 });
diff --git a/cypress/e2e/compare.cy.js b/cypress/e2e/compare.cy.js
index 0cfb486..be5e99d 100644
--- a/cypress/e2e/compare.cy.js
+++ b/cypress/e2e/compare.cy.js
@@ -5,78 +5,86 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/05/30
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Compare', () => {
+describe("Compare", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/files');
-    cy.wait('@getFiles');
-    cy.contains('li', 'COMPARE').click();
+    cy.visit("/files");
+    cy.wait("@getFiles");
+    cy.contains("li", "COMPARE").click();
   });
 
-  it('Compare dropdown sorting options', () => {
+  it("Compare dropdown sorting options", () => {
     const expectedOptions = [
-      'By File Name (A to Z)', 'By File Name (Z to A)',
-      'By Dependency (A to Z)', 'By Dependency (Z to A)',
-      'By File Type (A to Z)', 'By File Type (Z to A)',
-      'By Last Update (A to Z)', 'By Last Update (Z to A)',
+      "By File Name (A to Z)",
+      "By File Name (Z to A)",
+      "By Dependency (A to Z)",
+      "By Dependency (Z to A)",
+      "By File Type (A to Z)",
+      "By File Type (Z to A)",
+      "By Last Update (A to Z)",
+      "By Last Update (Z to A)",
     ];
 
-    cy.get('.p-select').click();
-    cy.get('.p-select-list')
-      .find('.p-select-option')
-      .then($options => {
+    cy.get(".p-select").click();
+    cy.get(".p-select-list")
+      .find(".p-select-option")
+      .then(($options) => {
         const actualOptions = $options
-          .map((index, elem) => Cypress.$(elem).find('.p-select-option-label').text())
+          .map((index, elem) =>
+            Cypress.$(elem).find(".p-select-option-label").text(),
+          )
           .get();
         expect(actualOptions).to.deep.equal(expectedOptions);
       });
   });
 
-  it('Grid cards are rendered for compare file selection', () => {
-    cy.get('#compareGridCards').find('li').should('have.length.greaterThan', 0);
+  it("Grid cards are rendered for compare file selection", () => {
+    cy.get("#compareGridCards").find("li").should("have.length.greaterThan", 0);
   });
 
-  it('Compare button is disabled until two files are dragged', () => {
-    cy.contains('button', 'Compare').should('be.disabled');
-    cy.get('#compareFile0').drag('#primaryDragCard');
-    cy.get('#compareFile1').drag('#secondaryDragCard');
-    cy.contains('button', 'Compare').should('be.enabled');
+  it("Compare button is disabled until two files are dragged", () => {
+    cy.contains("button", "Compare").should("be.disabled");
+    cy.get("#compareFile0").drag("#primaryDragCard");
+    cy.get("#compareFile1").drag("#secondaryDragCard");
+    cy.contains("button", "Compare").should("be.enabled");
   });
 
-  it('Enter Compare dashboard and see charts', () => {
-    cy.get('#compareFile0').drag('#primaryDragCard');
-    cy.get('#compareFile1').drag('#secondaryDragCard');
-    cy.contains('button', 'Compare').click();
-    cy.wait('@getCompare');
-    cy.url().should('include', 'compare');
+  it("Enter Compare dashboard and see charts", () => {
+    cy.get("#compareFile0").drag("#primaryDragCard");
+    cy.get("#compareFile1").drag("#secondaryDragCard");
+    cy.contains("button", "Compare").click();
+    cy.wait("@getCompare");
+    cy.url().should("include", "compare");
 
     // Assert chart title spans are visible
-    cy.contains('span', 'Average Cycle Time').should('exist');
-    cy.contains('span', 'Cycle Efficiency').should('exist');
-    cy.contains('span', 'Average Processing Time').should('exist');
-    cy.contains('span', 'Average Processing Time by Activity').should('exist');
-    cy.contains('span', 'Average Waiting Time').should('exist');
-    cy.contains('span', 'Average Waiting Time between Activity').should('exist');
+    cy.contains("span", "Average Cycle Time").should("exist");
+    cy.contains("span", "Cycle Efficiency").should("exist");
+    cy.contains("span", "Average Processing Time").should("exist");
+    cy.contains("span", "Average Processing Time by Activity").should("exist");
+    cy.contains("span", "Average Waiting Time").should("exist");
+    cy.contains("span", "Average Waiting Time between Activity").should(
+      "exist",
+    );
   });
 
-  it('Compare State button exists on dashboard', () => {
-    cy.get('#compareFile0').drag('#primaryDragCard');
-    cy.get('#compareFile1').drag('#secondaryDragCard');
-    cy.contains('button', 'Compare').click();
-    cy.wait('@getCompare');
+  it("Compare State button exists on dashboard", () => {
+    cy.get("#compareFile0").drag("#primaryDragCard");
+    cy.get("#compareFile1").drag("#secondaryDragCard");
+    cy.contains("button", "Compare").click();
+    cy.wait("@getCompare");
 
-    cy.get('#compareState').should('exist').and('be.visible');
+    cy.get("#compareState").should("exist").and("be.visible");
   });
 
-  it('Sidebar shows time usage and frequency sections', () => {
-    cy.get('#compareFile0').drag('#primaryDragCard');
-    cy.get('#compareFile1').drag('#secondaryDragCard');
-    cy.contains('button', 'Compare').click();
-    cy.wait('@getCompare');
+  it("Sidebar shows time usage and frequency sections", () => {
+    cy.get("#compareFile0").drag("#primaryDragCard");
+    cy.get("#compareFile1").drag("#secondaryDragCard");
+    cy.contains("button", "Compare").click();
+    cy.wait("@getCompare");
 
-    cy.get('aside').should('exist');
-    cy.get('aside li').should('have.length.greaterThan', 0);
+    cy.get("aside").should("exist");
+    cy.get("aside li").should("have.length.greaterThan", 0);
   });
 });
diff --git a/cypress/e2e/discoverConformance.cy.js b/cypress/e2e/discoverConformance.cy.js
index 810b2c0..466f248 100644
--- a/cypress/e2e/discoverConformance.cy.js
+++ b/cypress/e2e/discoverConformance.cy.js
@@ -3,53 +3,53 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Discover Conformance Page', () => {
+describe("Discover Conformance Page", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/discover/log/297310264/conformance');
-    cy.wait('@getLogCheckParams');
+    cy.visit("/discover/log/297310264/conformance");
+    cy.wait("@getLogCheckParams");
   });
 
-  it('page loads and loading overlay disappears', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
+  it("page loads and loading overlay disappears", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
   });
 
-  it('displays Rule Settings sidebar', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Rule Settings').should('be.visible');
+  it("displays Rule Settings sidebar", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Rule Settings").should("be.visible");
   });
 
-  it('displays Conformance Checking Results heading', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Conformance Checking Results').should('be.visible');
+  it("displays Conformance Checking Results heading", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Conformance Checking Results").should("be.visible");
   });
 
-  it('displays rule type radio options', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Have activity').should('be.visible');
-    cy.contains('Activity sequence').should('be.visible');
-    cy.contains('Activity duration').should('be.visible');
-    cy.contains('Processing time').should('be.visible');
-    cy.contains('Waiting time').should('be.visible');
-    cy.contains('Cycle time').should('be.visible');
+  it("displays rule type radio options", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Have activity").should("be.visible");
+    cy.contains("Activity sequence").should("be.visible");
+    cy.contains("Activity duration").should("be.visible");
+    cy.contains("Processing time").should("be.visible");
+    cy.contains("Waiting time").should("be.visible");
+    cy.contains("Cycle time").should("be.visible");
   });
 
-  it('displays Clear and Apply buttons', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('button', 'Clear').should('be.visible');
-    cy.contains('button', 'Apply').should('exist');
+  it("displays Clear and Apply buttons", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("button", "Clear").should("be.visible");
+    cy.contains("button", "Apply").should("exist");
   });
 
-  it('displays Activity list area', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Activity list').should('be.visible');
+  it("displays Activity list area", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Activity list").should("be.visible");
   });
 
-  it('displays default placeholder values in results', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Conformance Rate').should('be.visible');
-    cy.contains('Cases').should('be.visible');
+  it("displays default placeholder values in results", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Conformance Rate").should("be.visible");
+    cy.contains("Cases").should("be.visible");
   });
 });
diff --git a/cypress/e2e/discoverMap.cy.js b/cypress/e2e/discoverMap.cy.js
index 6467171..81b4514 100644
--- a/cypress/e2e/discoverMap.cy.js
+++ b/cypress/e2e/discoverMap.cy.js
@@ -3,49 +3,55 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Discover Map Page', () => {
+describe("Discover Map Page", () => {
   beforeEach(() => {
     loginWithFixtures();
     // Suppress Cytoscape rendering errors in headless mode
-    cy.on('uncaught:exception', () => false);
-    cy.visit('/discover/log/297310264/map');
-    cy.wait('@getDiscover');
+    cy.on("uncaught:exception", () => false);
+    cy.visit("/discover/log/297310264/map");
+    cy.wait("@getDiscover");
   });
 
-  it('page loads and cytoscape container exists', () => {
-    cy.get('#cy').should('exist');
+  it("page loads and cytoscape container exists", () => {
+    cy.get("#cy").should("exist");
   });
 
-  it('displays left sidebar buttons', () => {
+  it("displays left sidebar buttons", () => {
     // Visualization Setting, Filter, Traces buttons
-    cy.get('.material-symbols-outlined').contains('track_changes').should('exist');
-    cy.get('.material-symbols-outlined').contains('tornado').should('exist');
-    cy.get('.material-symbols-outlined').contains('rebase').should('exist');
+    cy.get(".material-symbols-outlined")
+      .contains("track_changes")
+      .should("exist");
+    cy.get(".material-symbols-outlined").contains("tornado").should("exist");
+    cy.get(".material-symbols-outlined").contains("rebase").should("exist");
   });
 
-  it('displays right sidebar Summary button', () => {
-    cy.get('#sidebar_state').should('exist');
-    cy.get('#iconState').should('exist');
+  it("displays right sidebar Summary button", () => {
+    cy.get("#sidebar_state").should("exist");
+    cy.get("#iconState").should("exist");
   });
 
-  it('clicking Visualization Setting button toggles sidebar', () => {
+  it("clicking Visualization Setting button toggles sidebar", () => {
     // Click the track_changes icon (Visualization Setting)
-    cy.contains('span.material-symbols-outlined', 'track_changes').parent('li').click();
+    cy.contains("span.material-symbols-outlined", "track_changes")
+      .parent("li")
+      .click();
     // SidebarView should open
-    cy.contains('Visualization Setting').should('be.visible');
+    cy.contains("Visualization Setting").should("be.visible");
   });
 
-  it('clicking Summary button toggles sidebar', () => {
-    cy.get('#iconState').click();
+  it("clicking Summary button toggles sidebar", () => {
+    cy.get("#iconState").click();
     // SidebarState should open with insights/stats
-    cy.contains('Summary').should('be.visible');
+    cy.contains("Summary").should("be.visible");
   });
 
-  it('clicking Traces button toggles sidebar', () => {
-    cy.contains('span.material-symbols-outlined', 'rebase').parent('li').click();
+  it("clicking Traces button toggles sidebar", () => {
+    cy.contains("span.material-symbols-outlined", "rebase")
+      .parent("li")
+      .click();
     // SidebarTraces should open
-    cy.contains('Traces').should('be.visible');
+    cy.contains("Traces").should("be.visible");
   });
 });
diff --git a/cypress/e2e/discoverPerformance.cy.js b/cypress/e2e/discoverPerformance.cy.js
index d690b75..ea9ea22 100644
--- a/cypress/e2e/discoverPerformance.cy.js
+++ b/cypress/e2e/discoverPerformance.cy.js
@@ -3,64 +3,64 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Discover Performance Page', () => {
+describe("Discover Performance Page", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/discover/log/297310264/performance');
-    cy.wait('@getPerformance');
+    cy.visit("/discover/log/297310264/performance");
+    cy.wait("@getPerformance");
   });
 
-  it('page loads and loading overlay disappears', () => {
+  it("page loads and loading overlay disappears", () => {
     // Loading overlay should not be visible after data loads
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
   });
 
-  it('displays Time Usage sidebar section', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Time Usage').should('be.visible');
+  it("displays Time Usage sidebar section", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Time Usage").should("be.visible");
   });
 
-  it('displays Frequency sidebar section', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Frequency').should('be.visible');
+  it("displays Frequency sidebar section", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Frequency").should("be.visible");
   });
 
-  it('displays sidebar navigation items', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Cycle Time & Efficiency').should('be.visible');
-    cy.contains('Processing Time').should('be.visible');
-    cy.contains('Waiting Time').should('be.visible');
-    cy.contains('Number of Cases').should('be.visible');
+  it("displays sidebar navigation items", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Cycle Time & Efficiency").should("be.visible");
+    cy.contains("Processing Time").should("be.visible");
+    cy.contains("Waiting Time").should("be.visible");
+    cy.contains("Number of Cases").should("be.visible");
   });
 
-  it('displays chart titles', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('Average Cycle Time').should('be.visible');
-    cy.contains('Cycle Efficiency').should('be.visible');
-    cy.contains('Average Processing Time').should('be.visible');
-    cy.contains('Average Processing Time by Activity').should('be.visible');
-    cy.contains('Average Waiting Time').should('be.visible');
+  it("displays chart titles", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("Average Cycle Time").should("be.visible");
+    cy.contains("Cycle Efficiency").should("be.visible");
+    cy.contains("Average Processing Time").should("be.visible");
+    cy.contains("Average Processing Time by Activity").should("be.visible");
+    cy.contains("Average Waiting Time").should("be.visible");
   });
 
-  it('displays frequency chart titles', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-    cy.contains('New Cases').should('be.visible');
-    cy.contains('Number of Cases by Activity').should('be.visible');
+  it("displays frequency chart titles", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+    cy.contains("New Cases").should("be.visible");
+    cy.contains("Number of Cases by Activity").should("be.visible");
   });
 
-  it('renders canvas elements for charts', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
+  it("renders canvas elements for charts", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
     // Chart.js renders into canvas elements
-    cy.get('canvas').should('have.length.at.least', 5);
+    cy.get("canvas").should("have.length.at.least", 5);
   });
 
-  it('sidebar navigation scrolls to section', () => {
-    cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
+  it("sidebar navigation scrolls to section", () => {
+    cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
     // Click on "Waiting Time" in sidebar
-    cy.contains('li', 'Waiting Time').click();
+    cy.contains("li", "Waiting Time").click();
     // The Waiting Time section should be in view
-    cy.get('#waitingTime').should('exist');
+    cy.get("#waitingTime").should("exist");
   });
 });
diff --git a/cypress/e2e/discoverTabs.cy.js b/cypress/e2e/discoverTabs.cy.js
index 0cd55f3..1ed86b7 100644
--- a/cypress/e2e/discoverTabs.cy.js
+++ b/cypress/e2e/discoverTabs.cy.js
@@ -3,94 +3,94 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Discover Tab Navigation', () => {
+describe("Discover Tab Navigation", () => {
   beforeEach(() => {
     loginWithFixtures();
     // Suppress Cytoscape rendering errors in headless mode
-    cy.on('uncaught:exception', () => false);
+    cy.on("uncaught:exception", () => false);
   });
 
-  describe('navigating from Map page', () => {
+  describe("navigating from Map page", () => {
     beforeEach(() => {
-      cy.visit('/discover/log/297310264/map');
-      cy.wait('@getDiscover');
+      cy.visit("/discover/log/297310264/map");
+      cy.wait("@getDiscover");
     });
 
-    it('shows DISCOVER heading and MAP/CONFORMANCE/PERFORMANCE tabs', () => {
-      cy.get('#nav_bar').contains('DISCOVER').should('be.visible');
-      cy.get('.nav-item').should('have.length', 3);
-      cy.get('.nav-item').eq(0).should('contain', 'MAP');
-      cy.get('.nav-item').eq(1).should('contain', 'CONFORMANCE');
-      cy.get('.nav-item').eq(2).should('contain', 'PERFORMANCE');
+    it("shows DISCOVER heading and MAP/CONFORMANCE/PERFORMANCE tabs", () => {
+      cy.get("#nav_bar").contains("DISCOVER").should("be.visible");
+      cy.get(".nav-item").should("have.length", 3);
+      cy.get(".nav-item").eq(0).should("contain", "MAP");
+      cy.get(".nav-item").eq(1).should("contain", "CONFORMANCE");
+      cy.get(".nav-item").eq(2).should("contain", "PERFORMANCE");
     });
 
-    it('clicking PERFORMANCE tab navigates to performance page', () => {
-      cy.get('.nav-item').contains('PERFORMANCE').click();
-      cy.url().should('include', '/performance');
-      cy.wait('@getPerformance');
-      cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-      cy.contains('Time Usage').should('be.visible');
+    it("clicking PERFORMANCE tab navigates to performance page", () => {
+      cy.get(".nav-item").contains("PERFORMANCE").click();
+      cy.url().should("include", "/performance");
+      cy.wait("@getPerformance");
+      cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+      cy.contains("Time Usage").should("be.visible");
     });
 
-    it('clicking CONFORMANCE tab navigates to conformance page', () => {
-      cy.get('.nav-item').contains('CONFORMANCE').click();
-      cy.url().should('include', '/conformance');
-      cy.wait('@getLogCheckParams');
-      cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-      cy.contains('Rule Settings').should('be.visible');
+    it("clicking CONFORMANCE tab navigates to conformance page", () => {
+      cy.get(".nav-item").contains("CONFORMANCE").click();
+      cy.url().should("include", "/conformance");
+      cy.wait("@getLogCheckParams");
+      cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+      cy.contains("Rule Settings").should("be.visible");
     });
 
-    it('shows back arrow to return to Files', () => {
-      cy.get('#backPage').should('exist');
-      cy.get('#backPage').should('have.attr', 'href', '/files');
+    it("shows back arrow to return to Files", () => {
+      cy.get("#backPage").should("exist");
+      cy.get("#backPage").should("have.attr", "href", "/files");
     });
   });
 
-  describe('navigating from Performance page', () => {
+  describe("navigating from Performance page", () => {
     beforeEach(() => {
-      cy.visit('/discover/log/297310264/performance');
-      cy.wait('@getPerformance');
-      cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
+      cy.visit("/discover/log/297310264/performance");
+      cy.wait("@getPerformance");
+      cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
     });
 
-    it('clicking MAP tab navigates to map page', () => {
-      cy.get('.nav-item').contains('MAP').click();
-      cy.url().should('include', '/map');
-      cy.wait('@getDiscover');
-      cy.get('#cy').should('exist');
+    it("clicking MAP tab navigates to map page", () => {
+      cy.get(".nav-item").contains("MAP").click();
+      cy.url().should("include", "/map");
+      cy.wait("@getDiscover");
+      cy.get("#cy").should("exist");
     });
 
-    it('clicking CONFORMANCE tab navigates to conformance page', () => {
-      cy.get('.nav-item').contains('CONFORMANCE').click();
-      cy.url().should('include', '/conformance');
-      cy.wait('@getLogCheckParams');
-      cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-      cy.contains('Rule Settings').should('be.visible');
+    it("clicking CONFORMANCE tab navigates to conformance page", () => {
+      cy.get(".nav-item").contains("CONFORMANCE").click();
+      cy.url().should("include", "/conformance");
+      cy.wait("@getLogCheckParams");
+      cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+      cy.contains("Rule Settings").should("be.visible");
     });
   });
 
-  describe('navigating from Conformance page', () => {
+  describe("navigating from Conformance page", () => {
     beforeEach(() => {
-      cy.visit('/discover/log/297310264/conformance');
-      cy.wait('@getLogCheckParams');
-      cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
+      cy.visit("/discover/log/297310264/conformance");
+      cy.wait("@getLogCheckParams");
+      cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
     });
 
-    it('clicking MAP tab navigates to map page', () => {
-      cy.get('.nav-item').contains('MAP').click();
-      cy.url().should('include', '/map');
-      cy.wait('@getDiscover');
-      cy.get('#cy').should('exist');
+    it("clicking MAP tab navigates to map page", () => {
+      cy.get(".nav-item").contains("MAP").click();
+      cy.url().should("include", "/map");
+      cy.wait("@getDiscover");
+      cy.get("#cy").should("exist");
     });
 
-    it('clicking PERFORMANCE tab navigates to performance page', () => {
-      cy.get('.nav-item').contains('PERFORMANCE').click();
-      cy.url().should('include', '/performance');
-      cy.wait('@getPerformance');
-      cy.get('.z-\\[9999\\]', { timeout: 10000 }).should('not.exist');
-      cy.contains('Time Usage').should('be.visible');
+    it("clicking PERFORMANCE tab navigates to performance page", () => {
+      cy.get(".nav-item").contains("PERFORMANCE").click();
+      cy.url().should("include", "/performance");
+      cy.wait("@getPerformance");
+      cy.get(".z-\\[9999\\]", { timeout: 10000 }).should("not.exist");
+      cy.contains("Time Usage").should("be.visible");
     });
   });
 });
diff --git a/cypress/e2e/edgeCases.cy.js b/cypress/e2e/edgeCases.cy.js
index c111f2d..246e07d 100644
--- a/cypress/e2e/edgeCases.cy.js
+++ b/cypress/e2e/edgeCases.cy.js
@@ -3,92 +3,92 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Edge Cases', () => {
-  describe('Empty states', () => {
-    it('files page handles empty file list', () => {
+describe("Edge Cases", () => {
+  describe("Empty states", () => {
+    it("files page handles empty file list", () => {
       loginWithFixtures();
       // Override files intercept with empty array
-      cy.intercept('GET', '/api/files', {
+      cy.intercept("GET", "/api/files", {
         statusCode: 200,
         body: [],
-      }).as('getEmptyFiles');
-      cy.visit('/files');
-      cy.wait('@getEmptyFiles');
+      }).as("getEmptyFiles");
+      cy.visit("/files");
+      cy.wait("@getEmptyFiles");
       // Table should exist but have no file data
-      cy.get('table').should('exist');
-      cy.contains('sample-process.xes').should('not.exist');
+      cy.get("table").should("exist");
+      cy.contains("sample-process.xes").should("not.exist");
     });
 
-    it('account admin handles empty user list', () => {
+    it("account admin handles empty user list", () => {
       loginWithFixtures();
-      cy.intercept('GET', '/api/users', {
+      cy.intercept("GET", "/api/users", {
         statusCode: 200,
         body: [],
-      }).as('getEmptyUsers');
-      cy.visit('/account-admin');
-      cy.wait('@getEmptyUsers');
+      }).as("getEmptyUsers");
+      cy.visit("/account-admin");
+      cy.wait("@getEmptyUsers");
       // Create New button should still work
-      cy.get('#create_new_acct_btn').should('exist');
+      cy.get("#create_new_acct_btn").should("exist");
     });
   });
 
-  describe('Authentication guard', () => {
-    it('unauthenticated user is redirected to login', () => {
+  describe("Authentication guard", () => {
+    it("unauthenticated user is redirected to login", () => {
       // No loginWithFixtures - not logged in
-      cy.visit('/files');
-      cy.url().should('include', '/login');
+      cy.visit("/files");
+      cy.url().should("include", "/login");
     });
 
-    it('unauthenticated user cannot access account-admin', () => {
-      cy.visit('/account-admin');
-      cy.url().should('include', '/login');
+    it("unauthenticated user cannot access account-admin", () => {
+      cy.visit("/account-admin");
+      cy.url().should("include", "/login");
     });
 
-    it('unauthenticated user cannot access my-account', () => {
-      cy.visit('/my-account');
-      cy.url().should('include', '/login');
+    it("unauthenticated user cannot access my-account", () => {
+      cy.visit("/my-account");
+      cy.url().should("include", "/login");
     });
   });
 
-  describe('Login validation', () => {
-    it('shows error on failed login', () => {
-      cy.intercept('POST', '/api/oauth/token', {
+  describe("Login validation", () => {
+    it("shows error on failed login", () => {
+      cy.intercept("POST", "/api/oauth/token", {
         statusCode: 401,
-        body: { detail: 'Invalid credentials' },
-      }).as('failedLogin');
-      cy.visit('/login');
-      cy.get('#account').type('wrong');
-      cy.get('#password').type('wrong');
-      cy.get('form').submit();
-      cy.wait('@failedLogin');
+        body: { detail: "Invalid credentials" },
+      }).as("failedLogin");
+      cy.visit("/login");
+      cy.get("#account").type("wrong");
+      cy.get("#password").type("wrong");
+      cy.get("form").submit();
+      cy.wait("@failedLogin");
       // Should stay on login page
-      cy.url().should('include', '/login');
+      cy.url().should("include", "/login");
     });
   });
 
-  describe('Account creation validation', () => {
+  describe("Account creation validation", () => {
     beforeEach(() => {
       loginWithFixtures();
-      cy.visit('/account-admin');
-      cy.wait('@getUsers');
-      cy.get('#create_new_acct_btn').click();
+      cy.visit("/account-admin");
+      cy.wait("@getUsers");
+      cy.get("#create_new_acct_btn").click();
     });
 
-    it('confirm stays disabled with only account field filled', () => {
-      cy.get('#input_account_field').type('newuser');
-      cy.get('.confirm-btn').should('be.disabled');
+    it("confirm stays disabled with only account field filled", () => {
+      cy.get("#input_account_field").type("newuser");
+      cy.get(".confirm-btn").should("be.disabled");
     });
 
-    it('confirm stays disabled with only name field filled', () => {
-      cy.get('#input_name_field').type('New User');
-      cy.get('.confirm-btn').should('be.disabled');
+    it("confirm stays disabled with only name field filled", () => {
+      cy.get("#input_name_field").type("New User");
+      cy.get(".confirm-btn").should("be.disabled");
     });
 
-    it('confirm stays disabled with only password field filled', () => {
-      cy.get('#input_first_pwd').type('password1234');
-      cy.get('.confirm-btn').should('be.disabled');
+    it("confirm stays disabled with only password field filled", () => {
+      cy.get("#input_first_pwd").type("password1234");
+      cy.get(".confirm-btn").should("be.disabled");
     });
   });
 });
diff --git a/cypress/e2e/fileOperations.cy.js b/cypress/e2e/fileOperations.cy.js
index 10c3959..145f9a5 100644
--- a/cypress/e2e/fileOperations.cy.js
+++ b/cypress/e2e/fileOperations.cy.js
@@ -3,72 +3,72 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('File Operations', () => {
+describe("File Operations", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/files');
-    cy.wait('@getFiles');
+    cy.visit("/files");
+    cy.wait("@getFiles");
   });
 
-  it('file list table has sortable columns', () => {
+  it("file list table has sortable columns", () => {
     // Check that table headers exist with expected columns
-    cy.get('table').within(() => {
-      cy.contains('th', 'Name').should('exist');
-      cy.contains('th', 'Dependency').should('exist');
-      cy.contains('th', 'File Type').should('exist');
-      cy.contains('th', 'Owner').should('exist');
-      cy.contains('th', 'Last Update').should('exist');
+    cy.get("table").within(() => {
+      cy.contains("th", "Name").should("exist");
+      cy.contains("th", "Dependency").should("exist");
+      cy.contains("th", "File Type").should("exist");
+      cy.contains("th", "Owner").should("exist");
+      cy.contains("th", "Last Update").should("exist");
     });
   });
 
-  it('clicking column header sorts the table', () => {
+  it("clicking column header sorts the table", () => {
     // Click "Name" header to sort
-    cy.contains('th', 'Name').click();
+    cy.contains("th", "Name").click();
     // After sorting, table should still have data
-    cy.get('table tbody tr').should('have.length.greaterThan', 0);
+    cy.get("table tbody tr").should("have.length.greaterThan", 0);
   });
 
-  it('table rows show file data from fixture', () => {
-    cy.get('table tbody').within(() => {
-      cy.contains('sample-process.xes').should('exist');
-      cy.contains('filtered-sample').should('exist');
-      cy.contains('production-log.csv').should('exist');
+  it("table rows show file data from fixture", () => {
+    cy.get("table tbody").within(() => {
+      cy.contains("sample-process.xes").should("exist");
+      cy.contains("filtered-sample").should("exist");
+      cy.contains("production-log.csv").should("exist");
     });
   });
 
-  it('table shows owner names', () => {
-    cy.get('table tbody').within(() => {
-      cy.contains('Test Admin').should('exist');
-      cy.contains('Alice Wang').should('exist');
+  it("table shows owner names", () => {
+    cy.get("table tbody").within(() => {
+      cy.contains("Test Admin").should("exist");
+      cy.contains("Alice Wang").should("exist");
     });
   });
 
-  it('table shows file types', () => {
-    cy.get('table tbody').within(() => {
-      cy.contains('log').should('exist');
+  it("table shows file types", () => {
+    cy.get("table tbody").within(() => {
+      cy.contains("log").should("exist");
     });
   });
 
-  it('right-click on file row shows context menu', () => {
+  it("right-click on file row shows context menu", () => {
     // PrimeVue DataTable with contextmenu
-    cy.get('table tbody tr').first().rightclick();
+    cy.get("table tbody tr").first().rightclick();
     // Context menu behavior depends on implementation
     // Just verify the right-click doesn't break anything
-    cy.get('table tbody tr').should('have.length.greaterThan', 0);
+    cy.get("table tbody tr").should("have.length.greaterThan", 0);
   });
 
-  it('grid view shows file cards', () => {
+  it("grid view shows file cards", () => {
     // Switch to grid view
-    cy.get('svg').parent('li.cursor-pointer').last().click();
+    cy.get("svg").parent("li.cursor-pointer").last().click();
     // Grid cards should be visible
-    cy.get('li[title]').should('have.length.greaterThan', 0);
+    cy.get("li[title]").should("have.length.greaterThan", 0);
   });
 
-  it('Import button opens upload modal', () => {
-    cy.get('#import_btn').click();
+  it("Import button opens upload modal", () => {
+    cy.get("#import_btn").click();
     // Upload modal should appear
-    cy.get('#import_btn').should('exist');
+    cy.get("#import_btn").should("exist");
   });
 });
diff --git a/cypress/e2e/files.cy.js b/cypress/e2e/files.cy.js
index 211e871..197bdc8 100644
--- a/cypress/e2e/files.cy.js
+++ b/cypress/e2e/files.cy.js
@@ -3,58 +3,58 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Files Page', () => {
+describe("Files Page", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/files');
+    cy.visit("/files");
   });
 
-  it('displays the file list after login', () => {
-    cy.wait('@getFiles');
-    cy.contains('h2', 'All Files').should('exist');
+  it("displays the file list after login", () => {
+    cy.wait("@getFiles");
+    cy.contains("h2", "All Files").should("exist");
     // Should display file names from fixture
-    cy.contains('sample-process.xes').should('exist');
-    cy.contains('filtered-sample').should('exist');
-    cy.contains('production-log.csv').should('exist');
+    cy.contains("sample-process.xes").should("exist");
+    cy.contains("filtered-sample").should("exist");
+    cy.contains("production-log.csv").should("exist");
   });
 
-  it('shows Recently Used section', () => {
-    cy.wait('@getFiles');
-    cy.contains('h2', 'Recently Used').should('exist');
+  it("shows Recently Used section", () => {
+    cy.wait("@getFiles");
+    cy.contains("h2", "Recently Used").should("exist");
   });
 
-  it('switches to DISCOVER tab', () => {
-    cy.wait('@getFiles');
-    cy.contains('.nav-item', 'DISCOVER').click();
+  it("switches to DISCOVER tab", () => {
+    cy.wait("@getFiles");
+    cy.contains(".nav-item", "DISCOVER").click();
     // DISCOVER tab shows filtered file types
-    cy.contains('h2', 'All Files').should('exist');
+    cy.contains("h2", "All Files").should("exist");
   });
 
-  it('switches to COMPARE tab and shows drag zones', () => {
-    cy.wait('@getFiles');
-    cy.contains('.nav-item', 'COMPARE').click();
-    cy.contains('Performance Comparison').should('exist');
-    cy.contains('Drag and drop a file here').should('exist');
+  it("switches to COMPARE tab and shows drag zones", () => {
+    cy.wait("@getFiles");
+    cy.contains(".nav-item", "COMPARE").click();
+    cy.contains("Performance Comparison").should("exist");
+    cy.contains("Drag and drop a file here").should("exist");
   });
 
-  it('shows Import button on FILES tab', () => {
-    cy.wait('@getFiles');
-    cy.get('#import_btn').should('contain', 'Import');
+  it("shows Import button on FILES tab", () => {
+    cy.wait("@getFiles");
+    cy.get("#import_btn").should("contain", "Import");
   });
 
-  it('can switch between list and grid view', () => {
-    cy.wait('@getFiles');
+  it("can switch between list and grid view", () => {
+    cy.wait("@getFiles");
     // DataTable (list view) should be visible by default
-    cy.get('table').should('exist');
+    cy.get("table").should("exist");
   });
 
-  it('double-click file navigates to discover page', () => {
-    cy.wait('@getFiles');
+  it("double-click file navigates to discover page", () => {
+    cy.wait("@getFiles");
     // Double-click the first file row in the table
     // The actual route depends on file type (log→map, log-check→conformance, etc.)
-    cy.get('table tbody tr').first().dblclick();
-    cy.url().should('include', '/discover');
+    cy.get("table tbody tr").first().dblclick();
+    cy.url().should("include", "/discover");
   });
 });
diff --git a/cypress/e2e/filesCompare.cy.js b/cypress/e2e/filesCompare.cy.js
index 7bdf398..161170a 100644
--- a/cypress/e2e/filesCompare.cy.js
+++ b/cypress/e2e/filesCompare.cy.js
@@ -3,47 +3,47 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Files Page - COMPARE Tab', () => {
+describe("Files Page - COMPARE Tab", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/files');
-    cy.wait('@getFiles');
+    cy.visit("/files");
+    cy.wait("@getFiles");
     // Switch to COMPARE tab
-    cy.contains('li', 'COMPARE').click();
+    cy.contains("li", "COMPARE").click();
   });
 
-  it('shows Performance Comparison heading', () => {
-    cy.contains('h2', 'Performance Comparison').should('be.visible');
+  it("shows Performance Comparison heading", () => {
+    cy.contains("h2", "Performance Comparison").should("be.visible");
   });
 
-  it('shows two drag-and-drop slots', () => {
-    cy.get('#primaryDragCard').should('exist');
-    cy.get('#secondaryDragCard').should('exist');
+  it("shows two drag-and-drop slots", () => {
+    cy.get("#primaryDragCard").should("exist");
+    cy.get("#secondaryDragCard").should("exist");
   });
 
-  it('drag slots show placeholder text', () => {
-    cy.get('#primaryDragCard').should('contain', 'Drag and drop a file here');
-    cy.get('#secondaryDragCard').should('contain', 'Drag and drop a file here');
+  it("drag slots show placeholder text", () => {
+    cy.get("#primaryDragCard").should("contain", "Drag and drop a file here");
+    cy.get("#secondaryDragCard").should("contain", "Drag and drop a file here");
   });
 
-  it('Compare button is disabled when no files are dragged', () => {
-    cy.contains('button', 'Compare').should('be.disabled');
+  it("Compare button is disabled when no files are dragged", () => {
+    cy.contains("button", "Compare").should("be.disabled");
   });
 
-  it('shows sorting dropdown', () => {
-    cy.get('.p-select').should('exist');
+  it("shows sorting dropdown", () => {
+    cy.get(".p-select").should("exist");
   });
 
-  it('grid cards display file names', () => {
-    cy.get('#compareGridCards').should('exist');
-    cy.get('#compareGridCards li').should('have.length.greaterThan', 0);
+  it("grid cards display file names", () => {
+    cy.get("#compareGridCards").should("exist");
+    cy.get("#compareGridCards li").should("have.length.greaterThan", 0);
   });
 
-  it('clicking sorting dropdown shows sort options', () => {
-    cy.get('.p-select').click();
-    cy.get('.p-select-list').should('be.visible');
-    cy.contains('.p-select-option', 'By File Name').should('exist');
+  it("clicking sorting dropdown shows sort options", () => {
+    cy.get(".p-select").click();
+    cy.get(".p-select-list").should("be.visible");
+    cy.contains(".p-select-option", "By File Name").should("exist");
   });
 });
diff --git a/cypress/e2e/filesToDiscover.cy.js b/cypress/e2e/filesToDiscover.cy.js
index 452ecc7..9e796bc 100644
--- a/cypress/e2e/filesToDiscover.cy.js
+++ b/cypress/e2e/filesToDiscover.cy.js
@@ -3,72 +3,72 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Files to Discover Entry Flow', () => {
+describe("Files to Discover Entry Flow", () => {
   beforeEach(() => {
     loginWithFixtures();
     // Suppress Cytoscape rendering errors in headless mode
-    cy.on('uncaught:exception', () => false);
-    cy.visit('/files');
-    cy.wait('@getFiles');
+    cy.on("uncaught:exception", () => false);
+    cy.visit("/files");
+    cy.wait("@getFiles");
   });
 
-  describe('double-click table row to enter Discover', () => {
-    it('double-click log file navigates to Map page', () => {
+  describe("double-click table row to enter Discover", () => {
+    it("double-click log file navigates to Map page", () => {
       // Target the Name column (has class .fileName) to avoid matching Dependency column
-      cy.contains('td.fileName', 'sample-process.xes').parent('tr').dblclick();
-      cy.url().should('include', '/discover/log/1/map');
-      cy.wait('@getDiscover');
-      cy.get('#cy').should('exist');
+      cy.contains("td.fileName", "sample-process.xes").parent("tr").dblclick();
+      cy.url().should("include", "/discover/log/1/map");
+      cy.wait("@getDiscover");
+      cy.get("#cy").should("exist");
     });
 
-    it('double-click filter file navigates to Map page', () => {
-      cy.contains('td.fileName', 'filtered-sample').parent('tr').dblclick();
-      cy.url().should('include', '/discover/filter/10/map');
-      cy.wait('@getFilterDiscover');
-      cy.get('#cy').should('exist');
+    it("double-click filter file navigates to Map page", () => {
+      cy.contains("td.fileName", "filtered-sample").parent("tr").dblclick();
+      cy.url().should("include", "/discover/filter/10/map");
+      cy.wait("@getFilterDiscover");
+      cy.get("#cy").should("exist");
     });
   });
 
-  describe('double-click grid card to enter Discover', () => {
+  describe("double-click grid card to enter Discover", () => {
     beforeEach(() => {
       // Switch to grid view
-      cy.get('svg').parent('li.cursor-pointer').last().click();
+      cy.get("svg").parent("li.cursor-pointer").last().click();
     });
 
-    it('double-click log file grid card navigates to Map page', () => {
+    it("double-click log file grid card navigates to Map page", () => {
       // Use last() to target the All Files grid section (not Recently Used)
       cy.get('li[title="sample-process.xes"]').last().dblclick();
-      cy.url().should('include', '/discover/log/1/map');
-      cy.wait('@getDiscover');
-      cy.get('#cy').should('exist');
+      cy.url().should("include", "/discover/log/1/map");
+      cy.wait("@getDiscover");
+      cy.get("#cy").should("exist");
     });
   });
 
-  describe('DISCOVER tab filters files', () => {
-    it('clicking DISCOVER tab shows only Log, Filter, and Rule files', () => {
-      cy.get('.nav-item').contains('DISCOVER').click();
-      cy.contains('td.fileName', 'sample-process.xes').should('exist');
-      cy.contains('td.fileName', 'filtered-sample').should('exist');
-      cy.contains('td.fileName', 'conformance-check-1').should('exist');
+  describe("DISCOVER tab filters files", () => {
+    it("clicking DISCOVER tab shows only Log, Filter, and Rule files", () => {
+      cy.get(".nav-item").contains("DISCOVER").click();
+      cy.contains("td.fileName", "sample-process.xes").should("exist");
+      cy.contains("td.fileName", "filtered-sample").should("exist");
+      cy.contains("td.fileName", "conformance-check-1").should("exist");
     });
   });
 
-  describe('Navbar state after entering Discover', () => {
-    it('shows DISCOVER heading and tabs after entering from Files', () => {
-      cy.contains('td.fileName', 'sample-process.xes').parent('tr').dblclick();
-      cy.url().should('include', '/discover/');
-      cy.get('#nav_bar').contains('DISCOVER').should('be.visible');
-      cy.get('.nav-item').contains('MAP').should('exist');
-      cy.get('.nav-item').contains('CONFORMANCE').should('exist');
-      cy.get('.nav-item').contains('PERFORMANCE').should('exist');
+  describe("Navbar state after entering Discover", () => {
+    it("shows DISCOVER heading and tabs after entering from Files", () => {
+      cy.contains("td.fileName", "sample-process.xes").parent("tr").dblclick();
+      cy.url().should("include", "/discover/");
+      cy.get("#nav_bar").contains("DISCOVER").should("be.visible");
+      cy.get(".nav-item").contains("MAP").should("exist");
+      cy.get(".nav-item").contains("CONFORMANCE").should("exist");
+      cy.get(".nav-item").contains("PERFORMANCE").should("exist");
     });
 
-    it('shows back arrow pointing to /files', () => {
-      cy.contains('td.fileName', 'sample-process.xes').parent('tr').dblclick();
-      cy.url().should('include', '/discover/');
-      cy.get('#backPage').should('have.attr', 'href', '/files');
+    it("shows back arrow pointing to /files", () => {
+      cy.contains("td.fileName", "sample-process.xes").parent("tr").dblclick();
+      cy.url().should("include", "/discover/");
+      cy.get("#backPage").should("have.attr", "href", "/files");
     });
   });
 });
diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js
index 2d26c1d..10a0fae 100644
--- a/cypress/e2e/login.cy.js
+++ b/cypress/e2e/login.cy.js
@@ -3,74 +3,74 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { setupApiIntercepts, loginWithFixtures } from '../support/intercept';
+import { setupApiIntercepts, loginWithFixtures } from "../support/intercept";
 
-describe('Login Flow', () => {
+describe("Login Flow", () => {
   beforeEach(() => {
     setupApiIntercepts();
   });
 
-  it('renders the login form', () => {
-    cy.visit('/login');
-    cy.get('h2').should('contain', 'LOGIN');
-    cy.get('#account').should('exist');
-    cy.get('#password').should('exist');
-    cy.get('#login_btn_main_btn').should('be.disabled');
+  it("renders the login form", () => {
+    cy.visit("/login");
+    cy.get("h2").should("contain", "LOGIN");
+    cy.get("#account").should("exist");
+    cy.get("#password").should("exist");
+    cy.get("#login_btn_main_btn").should("be.disabled");
   });
 
-  it('login button is disabled when fields are empty', () => {
-    cy.visit('/login');
-    cy.get('#login_btn_main_btn').should('be.disabled');
+  it("login button is disabled when fields are empty", () => {
+    cy.visit("/login");
+    cy.get("#login_btn_main_btn").should("be.disabled");
 
     // Only username filled — still disabled
-    cy.get('#account').type('testuser');
-    cy.get('#login_btn_main_btn').should('be.disabled');
+    cy.get("#account").type("testuser");
+    cy.get("#login_btn_main_btn").should("be.disabled");
   });
 
-  it('login button enables when both fields are filled', () => {
-    cy.visit('/login');
-    cy.get('#account').type('testadmin');
-    cy.get('#password').type('password123');
-    cy.get('#login_btn_main_btn').should('not.be.disabled');
+  it("login button enables when both fields are filled", () => {
+    cy.visit("/login");
+    cy.get("#account").type("testadmin");
+    cy.get("#password").type("password123");
+    cy.get("#login_btn_main_btn").should("not.be.disabled");
   });
 
-  it('successful login redirects to /files', () => {
-    cy.visit('/login');
-    cy.get('#account').type('testadmin');
-    cy.get('#password').type('password123');
-    cy.get('#login_btn_main_btn').click();
+  it("successful login redirects to /files", () => {
+    cy.visit("/login");
+    cy.get("#account").type("testadmin");
+    cy.get("#password").type("password123");
+    cy.get("#login_btn_main_btn").click();
 
-    cy.wait('@postToken');
-    cy.url().should('include', '/files');
+    cy.wait("@postToken");
+    cy.url().should("include", "/files");
   });
 
-  it('failed login shows error message', () => {
+  it("failed login shows error message", () => {
     // Override the token intercept to return 401
-    cy.intercept('POST', '/api/oauth/token', {
+    cy.intercept("POST", "/api/oauth/token", {
       statusCode: 401,
-      body: { detail: 'Incorrect username or password' },
-    }).as('postTokenFail');
+      body: { detail: "Incorrect username or password" },
+    }).as("postTokenFail");
 
-    cy.visit('/login');
-    cy.get('#account').type('wronguser');
-    cy.get('#password').type('wrongpass');
-    cy.get('#login_btn_main_btn').click();
+    cy.visit("/login");
+    cy.get("#account").type("wronguser");
+    cy.get("#password").type("wrongpass");
+    cy.get("#login_btn_main_btn").click();
 
-    cy.wait('@postTokenFail');
-    cy.contains('Incorrect account or password').should('be.visible');
+    cy.wait("@postTokenFail");
+    cy.contains("Incorrect account or password").should("be.visible");
   });
 
-  it('toggles password visibility', () => {
-    cy.visit('/login');
-    cy.get('#password').type('secret123');
-    cy.get('#password').should('have.attr', 'type', 'password');
+  it("toggles password visibility", () => {
+    cy.visit("/login");
+    cy.get("#password").type("secret123");
+    cy.get("#password").should("have.attr", "type", "password");
 
     // Click the eye icon to show password
     cy.get('label[for="passwordt"] span.cursor-pointer').click();
-    cy.get('#password').should('have.attr', 'type', 'text');
+    cy.get("#password").should("have.attr", "type", "text");
 
     // Click again to hide
     cy.get('label[for="passwordt"] span.cursor-pointer').click();
-    cy.get('#password').should('have.attr', 'type', 'password');
+    cy.get("#password").should("have.attr", "type", "password");
   });
 });
diff --git a/cypress/e2e/logout.cy.js b/cypress/e2e/logout.cy.js
index 1439b08..0029031 100644
--- a/cypress/e2e/logout.cy.js
+++ b/cypress/e2e/logout.cy.js
@@ -3,65 +3,65 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Logout Flow', () => {
+describe("Logout Flow", () => {
   beforeEach(() => {
     loginWithFixtures();
   });
 
-  it('shows account menu when head icon is clicked', () => {
-    cy.visit('/files');
-    cy.wait('@getFiles');
+  it("shows account menu when head icon is clicked", () => {
+    cy.visit("/files");
+    cy.wait("@getFiles");
 
     // Click the head icon to open account menu
-    cy.get('#acct_mgmt_button').click();
-    cy.get('#account_menu').should('be.visible');
-    cy.get('#greeting').should('contain', 'Test Admin');
+    cy.get("#acct_mgmt_button").click();
+    cy.get("#account_menu").should("be.visible");
+    cy.get("#greeting").should("contain", "Test Admin");
   });
 
-  it('account menu shows admin management link for admin user', () => {
-    cy.visit('/files');
-    cy.wait('@getFiles');
+  it("account menu shows admin management link for admin user", () => {
+    cy.visit("/files");
+    cy.wait("@getFiles");
 
-    cy.get('#acct_mgmt_button').click();
-    cy.get('#account_menu').should('be.visible');
+    cy.get("#acct_mgmt_button").click();
+    cy.get("#account_menu").should("be.visible");
     // Admin user should see account management option
-    cy.get('#btn_acct_mgmt').should('exist');
+    cy.get("#btn_acct_mgmt").should("exist");
   });
 
-  it('account menu has logout button', () => {
-    cy.visit('/files');
-    cy.wait('@getFiles');
+  it("account menu has logout button", () => {
+    cy.visit("/files");
+    cy.wait("@getFiles");
 
-    cy.get('#acct_mgmt_button').click();
-    cy.get('#btn_logout_in_menu').should('exist');
+    cy.get("#acct_mgmt_button").click();
+    cy.get("#btn_logout_in_menu").should("exist");
   });
 
-  it('clicking My Account navigates to /my-account', () => {
-    cy.visit('/files');
-    cy.wait('@getFiles');
+  it("clicking My Account navigates to /my-account", () => {
+    cy.visit("/files");
+    cy.wait("@getFiles");
 
-    cy.get('#acct_mgmt_button').click();
-    cy.get('#btn_mang_ur_acct').click();
-    cy.url().should('include', '/my-account');
+    cy.get("#acct_mgmt_button").click();
+    cy.get("#btn_mang_ur_acct").click();
+    cy.url().should("include", "/my-account");
   });
 
-  it('clicking Account Management navigates to /account-admin', () => {
-    cy.visit('/files');
-    cy.wait('@getFiles');
+  it("clicking Account Management navigates to /account-admin", () => {
+    cy.visit("/files");
+    cy.wait("@getFiles");
 
-    cy.get('#acct_mgmt_button').click();
-    cy.get('#btn_acct_mgmt').click();
-    cy.url().should('include', '/account-admin');
+    cy.get("#acct_mgmt_button").click();
+    cy.get("#btn_acct_mgmt").click();
+    cy.url().should("include", "/account-admin");
   });
 
-  it('logout redirects to login page', () => {
-    cy.visit('/files');
-    cy.wait('@getFiles');
+  it("logout redirects to login page", () => {
+    cy.visit("/files");
+    cy.wait("@getFiles");
 
-    cy.get('#acct_mgmt_button').click();
-    cy.get('#btn_logout_in_menu').click();
-    cy.url().should('include', '/login');
+    cy.get("#acct_mgmt_button").click();
+    cy.get("#btn_logout_in_menu").click();
+    cy.url().should("include", "/login");
   });
 });
diff --git a/cypress/e2e/myAccount.cy.js b/cypress/e2e/myAccount.cy.js
index c6b3bb4..52d084c 100644
--- a/cypress/e2e/myAccount.cy.js
+++ b/cypress/e2e/myAccount.cy.js
@@ -3,71 +3,71 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('My Account Page', () => {
+describe("My Account Page", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/my-account');
-    cy.wait('@getUserDetail');
+    cy.visit("/my-account");
+    cy.wait("@getUserDetail");
   });
 
-  it('displays user name heading', () => {
-    cy.get('#general_acct_info_user_name').should('exist');
-    cy.get('#general_acct_info_user_name').should('contain', 'Test Admin');
+  it("displays user name heading", () => {
+    cy.get("#general_acct_info_user_name").should("exist");
+    cy.get("#general_acct_info_user_name").should("contain", "Test Admin");
   });
 
-  it('shows Admin badge for admin user', () => {
-    cy.contains('Admin').should('exist');
+  it("shows Admin badge for admin user", () => {
+    cy.contains("Admin").should("exist");
   });
 
-  it('shows visit count info', () => {
-    cy.get('#general_account_visit_info').should('exist');
-    cy.get('#general_account_visit_info').should('contain', 'Total visits');
+  it("shows visit count info", () => {
+    cy.get("#general_account_visit_info").should("exist");
+    cy.get("#general_account_visit_info").should("contain", "Total visits");
   });
 
-  it('displays account username (read-only)', () => {
-    cy.contains('Test Admin').should('exist');
+  it("displays account username (read-only)", () => {
+    cy.contains("Test Admin").should("exist");
   });
 
-  it('shows Edit button for name field', () => {
-    cy.contains('button', 'Edit').should('exist');
+  it("shows Edit button for name field", () => {
+    cy.contains("button", "Edit").should("exist");
   });
 
-  it('clicking Edit shows input field and Save/Cancel buttons', () => {
-    cy.contains('button', 'Edit').first().click();
-    cy.get('#input_name_field').should('exist');
-    cy.contains('button', 'Save').should('exist');
-    cy.contains('button', 'Cancel').should('exist');
+  it("clicking Edit shows input field and Save/Cancel buttons", () => {
+    cy.contains("button", "Edit").first().click();
+    cy.get("#input_name_field").should("exist");
+    cy.contains("button", "Save").should("exist");
+    cy.contains("button", "Cancel").should("exist");
   });
 
-  it('clicking Cancel reverts name field to read-only', () => {
-    cy.contains('button', 'Edit').first().click();
-    cy.get('#input_name_field').should('exist');
-    cy.contains('button', 'Cancel').click();
-    cy.get('#input_name_field').should('not.exist');
+  it("clicking Cancel reverts name field to read-only", () => {
+    cy.contains("button", "Edit").first().click();
+    cy.get("#input_name_field").should("exist");
+    cy.contains("button", "Cancel").click();
+    cy.get("#input_name_field").should("not.exist");
   });
 
-  it('shows Reset button for password field', () => {
-    cy.contains('button', 'Reset').should('exist');
+  it("shows Reset button for password field", () => {
+    cy.contains("button", "Reset").should("exist");
   });
 
-  it('clicking Reset shows password input and Save/Cancel', () => {
-    cy.contains('button', 'Reset').click();
-    cy.get('input[type="password"]').should('exist');
-    cy.contains('button', 'Save').should('exist');
-    cy.contains('button', 'Cancel').should('exist');
+  it("clicking Reset shows password input and Save/Cancel", () => {
+    cy.contains("button", "Reset").click();
+    cy.get('input[type="password"]').should("exist");
+    cy.contains("button", "Save").should("exist");
+    cy.contains("button", "Cancel").should("exist");
   });
 
-  it('clicking Cancel on password field hides the input', () => {
-    cy.contains('button', 'Reset').click();
-    cy.get('input[type="password"]').should('exist');
+  it("clicking Cancel on password field hides the input", () => {
+    cy.contains("button", "Reset").click();
+    cy.get('input[type="password"]').should("exist");
     // The Cancel button for password is the second one
-    cy.get('.cancel-btn').click();
-    cy.get('input[type="password"]').should('not.exist');
+    cy.get(".cancel-btn").click();
+    cy.get('input[type="password"]').should("not.exist");
   });
 
-  it('shows Session section', () => {
-    cy.contains('Session').should('exist');
+  it("shows Session section", () => {
+    cy.contains("Session").should("exist");
   });
 });
diff --git a/cypress/e2e/navigation.cy.js b/cypress/e2e/navigation.cy.js
index 82088c1..800ef4a 100644
--- a/cypress/e2e/navigation.cy.js
+++ b/cypress/e2e/navigation.cy.js
@@ -3,60 +3,60 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures, setupApiIntercepts } from '../support/intercept';
+import { loginWithFixtures, setupApiIntercepts } from "../support/intercept";
 
-describe('Navigation and Routing', () => {
-  it('redirects / to /files when logged in', () => {
+describe("Navigation and Routing", () => {
+  it("redirects / to /files when logged in", () => {
     loginWithFixtures();
-    cy.visit('/');
-    cy.url().should('include', '/files');
+    cy.visit("/");
+    cy.url().should("include", "/files");
   });
 
-  it('shows 404 page for unknown routes', () => {
+  it("shows 404 page for unknown routes", () => {
     loginWithFixtures();
-    cy.visit('/nonexistent-page');
-    cy.contains('404').should('exist');
+    cy.visit("/nonexistent-page");
+    cy.contains("404").should("exist");
   });
 
-  it('navbar shows correct view name', () => {
+  it("navbar shows correct view name", () => {
     loginWithFixtures();
-    cy.visit('/files');
-    cy.wait('@getFiles');
-    cy.get('#nav_bar').should('exist');
-    cy.get('#nav_bar h2').should('contain', 'FILES');
+    cy.visit("/files");
+    cy.wait("@getFiles");
+    cy.get("#nav_bar").should("exist");
+    cy.get("#nav_bar h2").should("contain", "FILES");
   });
 
-  it('navbar shows back arrow on non-files pages', () => {
+  it("navbar shows back arrow on non-files pages", () => {
     loginWithFixtures();
-    cy.visit('/discover/log/1/map');
+    cy.visit("/discover/log/1/map");
     // Back arrow should be visible on discover pages
-    cy.get('#backPage').should('exist');
+    cy.get("#backPage").should("exist");
   });
 
-  it('navbar tabs are clickable on discover page', () => {
+  it("navbar tabs are clickable on discover page", () => {
     loginWithFixtures();
-    cy.visit('/discover/log/1/map');
+    cy.visit("/discover/log/1/map");
     // Discover navbar should show MAP, CONFORMANCE, PERFORMANCE tabs
-    cy.contains('.nav-item', 'MAP').should('exist');
-    cy.contains('.nav-item', 'CONFORMANCE').should('exist');
-    cy.contains('.nav-item', 'PERFORMANCE').should('exist');
+    cy.contains(".nav-item", "MAP").should("exist");
+    cy.contains(".nav-item", "CONFORMANCE").should("exist");
+    cy.contains(".nav-item", "PERFORMANCE").should("exist");
 
     // Click CONFORMANCE tab
-    cy.contains('.nav-item', 'CONFORMANCE').click();
-    cy.url().should('include', '/conformance');
+    cy.contains(".nav-item", "CONFORMANCE").click();
+    cy.url().should("include", "/conformance");
 
     // Click PERFORMANCE tab
-    cy.contains('.nav-item', 'PERFORMANCE').click();
-    cy.url().should('include', '/performance');
+    cy.contains(".nav-item", "PERFORMANCE").click();
+    cy.url().should("include", "/performance");
 
     // Click MAP tab to go back
-    cy.contains('.nav-item', 'MAP').click();
-    cy.url().should('include', '/map');
+    cy.contains(".nav-item", "MAP").click();
+    cy.url().should("include", "/map");
   });
 
-  it('login page is accessible at /login', () => {
+  it("login page is accessible at /login", () => {
     setupApiIntercepts();
-    cy.visit('/login');
-    cy.get('h2').should('contain', 'LOGIN');
+    cy.visit("/login");
+    cy.get("h2").should("contain", "LOGIN");
   });
 });
diff --git a/cypress/e2e/notFound404.cy.js b/cypress/e2e/notFound404.cy.js
index 4b169b3..c0f8fff 100644
--- a/cypress/e2e/notFound404.cy.js
+++ b/cypress/e2e/notFound404.cy.js
@@ -3,36 +3,38 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('404 Not Found Page', () => {
+describe("404 Not Found Page", () => {
   beforeEach(() => {
     // Suppress Navbar error on 404 page (route.matched[1] is null)
-    cy.on('uncaught:exception', () => false);
+    cy.on("uncaught:exception", () => false);
   });
 
-  it('displays 404 page for non-existent route', () => {
+  it("displays 404 page for non-existent route", () => {
     loginWithFixtures();
-    cy.visit('/this-page-does-not-exist');
-    cy.contains('404').should('be.visible');
-    cy.contains('The page you are looking for does not exist.').should('be.visible');
+    cy.visit("/this-page-does-not-exist");
+    cy.contains("404").should("be.visible");
+    cy.contains("The page you are looking for does not exist.").should(
+      "be.visible",
+    );
   });
 
-  it('has a link back to Files page', () => {
+  it("has a link back to Files page", () => {
     loginWithFixtures();
-    cy.visit('/some/random/path');
-    cy.contains('a', 'Go to Files')
-      .should('be.visible')
-      .should('have.attr', 'href', '/files');
+    cy.visit("/some/random/path");
+    cy.contains("a", "Go to Files")
+      .should("be.visible")
+      .should("have.attr", "href", "/files");
   });
 
-  it('displays 404 for unauthenticated user on invalid route', () => {
-    cy.visit('/not-a-real-page');
+  it("displays 404 for unauthenticated user on invalid route", () => {
+    cy.visit("/not-a-real-page");
     cy.url().then((url) => {
-      if (url.includes('/login')) {
-        cy.url().should('include', '/login');
+      if (url.includes("/login")) {
+        cy.url().should("include", "/login");
       } else {
-        cy.contains('404').should('be.visible');
+        cy.contains("404").should("be.visible");
       }
     });
   });
diff --git a/cypress/e2e/pageAdmin.cy.js b/cypress/e2e/pageAdmin.cy.js
index 7cbdec7..6fd6688 100644
--- a/cypress/e2e/pageAdmin.cy.js
+++ b/cypress/e2e/pageAdmin.cy.js
@@ -4,35 +4,35 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/06/03
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('Discover page navigation tabs', () => {
+describe("Discover page navigation tabs", () => {
   beforeEach(() => {
     loginWithFixtures();
-    cy.visit('/files');
-    cy.wait('@getFiles');
+    cy.visit("/files");
+    cy.wait("@getFiles");
   });
 
-  it('Double-clicking a log file enters the MAP page.', () => {
-    cy.contains('td.fileName', 'sample-process.xes').dblclick();
-    cy.url().should('include', 'map');
+  it("Double-clicking a log file enters the MAP page.", () => {
+    cy.contains("td.fileName", "sample-process.xes").dblclick();
+    cy.url().should("include", "map");
     // MAP tab should exist in the navbar
-    cy.contains('.nav-item', 'MAP').should('exist');
+    cy.contains(".nav-item", "MAP").should("exist");
   });
 
-  it('Clicking CONFORMANCE tab switches active page.', () => {
-    cy.contains('td.fileName', 'sample-process.xes').dblclick();
-    cy.url().should('include', 'map');
-    cy.contains('.nav-item', 'CONFORMANCE').click();
-    cy.url().should('include', 'conformance');
-    cy.contains('.nav-item', 'CONFORMANCE').should('have.class', 'active');
+  it("Clicking CONFORMANCE tab switches active page.", () => {
+    cy.contains("td.fileName", "sample-process.xes").dblclick();
+    cy.url().should("include", "map");
+    cy.contains(".nav-item", "CONFORMANCE").click();
+    cy.url().should("include", "conformance");
+    cy.contains(".nav-item", "CONFORMANCE").should("have.class", "active");
   });
 
-  it('Clicking PERFORMANCE tab switches active page.', () => {
-    cy.contains('td.fileName', 'sample-process.xes').dblclick();
-    cy.url().should('include', 'map');
-    cy.contains('.nav-item', 'PERFORMANCE').click();
-    cy.url().should('include', 'performance');
-    cy.contains('.nav-item', 'PERFORMANCE').should('have.class', 'active');
+  it("Clicking PERFORMANCE tab switches active page.", () => {
+    cy.contains("td.fileName", "sample-process.xes").dblclick();
+    cy.url().should("include", "map");
+    cy.contains(".nav-item", "PERFORMANCE").click();
+    cy.url().should("include", "performance");
+    cy.contains(".nav-item", "PERFORMANCE").should("have.class", "active");
   });
 });
diff --git a/cypress/e2e/pasteUrlLoginRedirect.cy.js b/cypress/e2e/pasteUrlLoginRedirect.cy.js
index 8fda038..db6edd9 100644
--- a/cypress/e2e/pasteUrlLoginRedirect.cy.js
+++ b/cypress/e2e/pasteUrlLoginRedirect.cy.js
@@ -4,54 +4,55 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/06/11
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { setupApiIntercepts } from '../support/intercept';
+import { setupApiIntercepts } from "../support/intercept";
 
-describe('Paste URL login redirect', () => {
-  it('After login with return-to param, redirects to the remembered page', () => {
+describe("Paste URL login redirect", () => {
+  it("After login with return-to param, redirects to the remembered page", () => {
     setupApiIntercepts();
 
     // Visit login page with a return-to query param (base64-encoded URL)
-    const targetUrl = 'http://localhost:4173/discover/conformance/log/1/conformance';
+    const targetUrl =
+      "http://localhost:4173/discover/conformance/log/1/conformance";
     const encodedUrl = btoa(targetUrl);
     cy.visit(`/login?return-to=${encodedUrl}`);
 
     // Fill in login form
-    cy.get('#account').type('testadmin');
-    cy.get('#password').type('password123');
-    cy.get('form').submit();
-    cy.wait('@postToken');
+    cy.get("#account").type("testadmin");
+    cy.get("#password").type("password123");
+    cy.get("form").submit();
+    cy.wait("@postToken");
 
     // After login, the app should attempt to redirect to the return-to URL.
     // Since window.location.href is used (not router.push), we verify the
     // login form disappears and the token cookie is set.
-    cy.getCookie('luciaToken').should('exist');
+    cy.getCookie("luciaToken").should("exist");
   });
 
-  it('Login without return-to param redirects to /files', () => {
+  it("Login without return-to param redirects to /files", () => {
     setupApiIntercepts();
-    cy.visit('/login');
+    cy.visit("/login");
 
-    cy.get('#account').type('testadmin');
-    cy.get('#password').type('password123');
-    cy.get('form').submit();
-    cy.wait('@postToken');
+    cy.get("#account").type("testadmin");
+    cy.get("#password").type("password123");
+    cy.get("form").submit();
+    cy.wait("@postToken");
 
-    cy.url().should('include', '/files');
+    cy.url().should("include", "/files");
   });
 
-  it('Unauthenticated user cannot access inner pages', () => {
+  it("Unauthenticated user cannot access inner pages", () => {
     setupApiIntercepts();
     // Override my-account to return 401 (simulate logged-out state)
-    cy.intercept('GET', '/api/my-account', {
+    cy.intercept("GET", "/api/my-account", {
       statusCode: 401,
-      body: { detail: 'Not authenticated' },
-    }).as('getMyAccountUnauth');
+      body: { detail: "Not authenticated" },
+    }).as("getMyAccountUnauth");
 
-    cy.visit('/files');
+    cy.visit("/files");
 
     // Should be redirected to login page
-    cy.url().should('include', '/login');
-    cy.get('#account').should('exist');
-    cy.get('#password').should('exist');
+    cy.url().should("include", "/login");
+    cy.get("#account").should("exist");
+    cy.get("#password").should("exist");
   });
 });
diff --git a/cypress/e2e/sweetAlertModals.cy.js b/cypress/e2e/sweetAlertModals.cy.js
index 8b1ec12..6b4d5a1 100644
--- a/cypress/e2e/sweetAlertModals.cy.js
+++ b/cypress/e2e/sweetAlertModals.cy.js
@@ -3,113 +3,113 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { loginWithFixtures } from '../support/intercept';
+import { loginWithFixtures } from "../support/intercept";
 
-describe('SweetAlert2 Modals', () => {
-  describe('File Context Menu - Rename', () => {
+describe("SweetAlert2 Modals", () => {
+  describe("File Context Menu - Rename", () => {
     beforeEach(() => {
       loginWithFixtures();
-      cy.visit('/files');
-      cy.wait('@getFiles');
+      cy.visit("/files");
+      cy.wait("@getFiles");
     });
 
-    it('right-click on table row shows context menu with Rename', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Rename').should('be.visible');
+    it("right-click on table row shows context menu with Rename", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Rename").should("be.visible");
     });
 
-    it('right-click context menu shows Download option', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Download').should('be.visible');
+    it("right-click context menu shows Download option", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Download").should("be.visible");
     });
 
-    it('right-click context menu shows Delete option', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Delete').should('be.visible');
+    it("right-click context menu shows Delete option", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Delete").should("be.visible");
     });
 
-    it('clicking Rename opens SweetAlert rename dialog', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Rename').click();
+    it("clicking Rename opens SweetAlert rename dialog", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Rename").click();
       // SweetAlert popup should appear with RENAME title
-      cy.get('.swal2-popup').should('be.visible');
-      cy.get('.swal2-title').should('contain', 'RENAME');
-      cy.get('.swal2-input').should('exist');
+      cy.get(".swal2-popup").should("be.visible");
+      cy.get(".swal2-title").should("contain", "RENAME");
+      cy.get(".swal2-input").should("exist");
     });
 
-    it('rename dialog has pre-filled file name', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Rename').click();
-      cy.get('.swal2-input').should('not.have.value', '');
+    it("rename dialog has pre-filled file name", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Rename").click();
+      cy.get(".swal2-input").should("not.have.value", "");
     });
 
-    it('rename dialog can be cancelled', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Rename').click();
-      cy.get('.swal2-popup').should('be.visible');
-      cy.get('.swal2-cancel').click();
-      cy.get('.swal2-popup').should('not.exist');
+    it("rename dialog can be cancelled", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Rename").click();
+      cy.get(".swal2-popup").should("be.visible");
+      cy.get(".swal2-cancel").click();
+      cy.get(".swal2-popup").should("not.exist");
     });
 
-    it('clicking Delete opens SweetAlert delete confirmation', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Delete').click();
+    it("clicking Delete opens SweetAlert delete confirmation", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Delete").click();
       // SweetAlert popup should appear with CONFIRM DELETION
-      cy.get('.swal2-popup').should('be.visible');
-      cy.get('.swal2-title').should('contain', 'CONFIRM DELETION');
+      cy.get(".swal2-popup").should("be.visible");
+      cy.get(".swal2-title").should("contain", "CONFIRM DELETION");
     });
 
-    it('delete confirmation shows file name', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Delete').click();
-      cy.get('.swal2-popup').should('be.visible');
-      cy.get('.swal2-html-container').should('contain', 'delete');
+    it("delete confirmation shows file name", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Delete").click();
+      cy.get(".swal2-popup").should("be.visible");
+      cy.get(".swal2-html-container").should("contain", "delete");
     });
 
-    it('delete confirmation can be cancelled', () => {
-      cy.get('table tbody tr').first().rightclick();
-      cy.contains('Delete').click();
-      cy.get('.swal2-popup').should('be.visible');
-      cy.get('.swal2-cancel').click();
-      cy.get('.swal2-popup').should('not.exist');
+    it("delete confirmation can be cancelled", () => {
+      cy.get("table tbody tr").first().rightclick();
+      cy.contains("Delete").click();
+      cy.get(".swal2-popup").should("be.visible");
+      cy.get(".swal2-cancel").click();
+      cy.get(".swal2-popup").should("not.exist");
     });
   });
 
-  describe('File Context Menu on Grid View', () => {
+  describe("File Context Menu on Grid View", () => {
     beforeEach(() => {
       loginWithFixtures();
-      cy.visit('/files');
-      cy.wait('@getFiles');
+      cy.visit("/files");
+      cy.wait("@getFiles");
       // Switch to grid view
-      cy.get('svg').parent('li.cursor-pointer').last().click();
+      cy.get("svg").parent("li.cursor-pointer").last().click();
     });
 
-    it('right-click on grid card shows context menu', () => {
-      cy.get('li[title]').first().rightclick();
-      cy.contains('Rename').should('be.visible');
-      cy.contains('Delete').should('be.visible');
+    it("right-click on grid card shows context menu", () => {
+      cy.get("li[title]").first().rightclick();
+      cy.contains("Rename").should("be.visible");
+      cy.contains("Delete").should("be.visible");
     });
 
-    it('grid card rename opens SweetAlert dialog', () => {
-      cy.get('li[title]').first().rightclick();
-      cy.contains('Rename').click();
-      cy.get('.swal2-popup').should('be.visible');
-      cy.get('.swal2-title').should('contain', 'RENAME');
+    it("grid card rename opens SweetAlert dialog", () => {
+      cy.get("li[title]").first().rightclick();
+      cy.contains("Rename").click();
+      cy.get(".swal2-popup").should("be.visible");
+      cy.get(".swal2-title").should("contain", "RENAME");
     });
   });
 
-  describe('Account Delete Confirmation', () => {
+  describe("Account Delete Confirmation", () => {
     beforeEach(() => {
       loginWithFixtures();
-      cy.visit('/account-admin');
-      cy.wait('@getUsers');
+      cy.visit("/account-admin");
+      cy.wait("@getUsers");
     });
 
-    it('delete confirmation Yes button triggers delete API', () => {
-      cy.get('.delete-account').first().click();
-      cy.get('#modal_container').should('be.visible');
-      cy.get('#sure_to_delete_acct_btn').click();
-      cy.wait('@deleteUser');
+    it("delete confirmation Yes button triggers delete API", () => {
+      cy.get(".delete-account").first().click();
+      cy.get("#modal_container").should("be.visible");
+      cy.get("#sure_to_delete_acct_btn").click();
+      cy.wait("@deleteUser");
       // Modal should close after deletion
     });
   });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 791df0b..9e5f54c 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -14,16 +14,16 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 // -- This is a parent command --
-import '@4tw/cypress-drag-drop'
+import "@4tw/cypress-drag-drop";
 
 /**
  * Sets authentication cookies to simulate a logged-in user.
  *
  * @returns {void}
  */
-Cypress.Commands.add('login', () => {
-  cy.setCookie('luciaToken', 'fake-access-token-for-testing');
-  cy.setCookie('isLuciaLoggedIn', 'true');
+Cypress.Commands.add("login", () => {
+  cy.setCookie("luciaToken", "fake-access-token-for-testing");
+  cy.setCookie("isLuciaLoggedIn", "true");
 });
 // Usage: cy.login()
 // -- This is a child command --
@@ -33,8 +33,8 @@ Cypress.Commands.add('login', () => {
  *
  * @returns {void}
  */
-Cypress.Commands.add('closePopup', () => {
+Cypress.Commands.add("closePopup", () => {
   // Trigger a forced click to close modal overlays consistently.
-  cy.get('body').click({ position: 'topLeft'});
+  cy.get("body").click({ position: "topLeft" });
   cy.wait(1000);
-})
+});
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
index 549bc56..67318bd 100644
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@@ -20,11 +20,11 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
-Cypress.on('uncaught:exception', (err, runnable) => {
+Cypress.on("uncaught:exception", (err, runnable) => {
   // returning false here prevents Cypress from failing the test
-  return false
-})
+  return false;
+});
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
-require('cypress-xpath') // Enables xpath helpers used in pointer event checks.
+require("cypress-xpath"); // Enables xpath helpers used in pointer event checks.
diff --git a/cypress/support/intercept.js b/cypress/support/intercept.js
index 70744ef..92c71b6 100644
--- a/cypress/support/intercept.js
+++ b/cypress/support/intercept.js
@@ -9,174 +9,174 @@
  */
 export function setupApiIntercepts() {
   // Auth
-  cy.intercept('POST', '/api/oauth/token', {
-    fixture: 'api/token.json',
-  }).as('postToken');
+  cy.intercept("POST", "/api/oauth/token", {
+    fixture: "api/token.json",
+  }).as("postToken");
 
   // User account
-  cy.intercept('GET', '/api/my-account', {
-    fixture: 'api/my-account.json',
-  }).as('getMyAccount');
+  cy.intercept("GET", "/api/my-account", {
+    fixture: "api/my-account.json",
+  }).as("getMyAccount");
 
-  cy.intercept('PUT', '/api/my-account', {
+  cy.intercept("PUT", "/api/my-account", {
     statusCode: 200,
     body: { success: true },
-  }).as('putMyAccount');
+  }).as("putMyAccount");
 
   // Files
-  cy.intercept('GET', '/api/files', {
-    fixture: 'api/files.json',
-  }).as('getFiles');
+  cy.intercept("GET", "/api/files", {
+    fixture: "api/files.json",
+  }).as("getFiles");
 
   // Users (account management)
-  cy.intercept('GET', '/api/users', {
-    fixture: 'api/users.json',
-  }).as('getUsers');
+  cy.intercept("GET", "/api/users", {
+    fixture: "api/users.json",
+  }).as("getUsers");
 
-  cy.intercept('POST', '/api/users', {
+  cy.intercept("POST", "/api/users", {
     statusCode: 200,
     body: { success: true },
-  }).as('postUser');
+  }).as("postUser");
 
-  cy.intercept('DELETE', '/api/users/*', {
+  cy.intercept("DELETE", "/api/users/*", {
     statusCode: 200,
     body: { success: true },
-  }).as('deleteUser');
+  }).as("deleteUser");
 
-  cy.intercept('PUT', '/api/users/*', {
+  cy.intercept("PUT", "/api/users/*", {
     statusCode: 200,
     body: { success: true },
-  }).as('putUser');
+  }).as("putUser");
 
   // User detail (GET /api/users/:username)
-  cy.intercept('GET', '/api/users/*', {
-    fixture: 'api/user-detail.json',
-  }).as('getUserDetail');
+  cy.intercept("GET", "/api/users/*", {
+    fixture: "api/user-detail.json",
+  }).as("getUserDetail");
 
   // User roles
-  cy.intercept('PUT', '/api/users/*/roles/*', {
+  cy.intercept("PUT", "/api/users/*/roles/*", {
     statusCode: 200,
     body: { success: true },
-  }).as('putUserRole');
+  }).as("putUserRole");
 
-  cy.intercept('DELETE', '/api/users/*/roles/*', {
+  cy.intercept("DELETE", "/api/users/*/roles/*", {
     statusCode: 200,
     body: { success: true },
-  }).as('deleteUserRole');
+  }).as("deleteUserRole");
 
   // Filter detail (for fetchFunnel when entering filter from Files)
-  cy.intercept('GET', /\/api\/filters\/\d+$/, {
+  cy.intercept("GET", /\/api\/filters\/\d+$/, {
     statusCode: 200,
-    body: { rules: [], log: { id: 1 }, name: 'filtered-sample' },
-  }).as('getFilterDetail');
+    body: { rules: [], log: { id: 1 }, name: "filtered-sample" },
+  }).as("getFilterDetail");
 
   // Discover (map data)
-  cy.intercept('GET', '/api/logs/*/discover', {
-    fixture: 'api/discover.json',
-  }).as('getDiscover');
+  cy.intercept("GET", "/api/logs/*/discover", {
+    fixture: "api/discover.json",
+  }).as("getDiscover");
 
-  cy.intercept('GET', '/api/filters/*/discover', {
-    fixture: 'api/discover.json',
-  }).as('getFilterDiscover');
+  cy.intercept("GET", "/api/filters/*/discover", {
+    fixture: "api/discover.json",
+  }).as("getFilterDiscover");
 
   // Performance
-  cy.intercept('GET', '/api/logs/*/performance', {
-    fixture: 'api/performance.json',
-  }).as('getPerformance');
+  cy.intercept("GET", "/api/logs/*/performance", {
+    fixture: "api/performance.json",
+  }).as("getPerformance");
 
-  cy.intercept('GET', '/api/filters/*/performance', {
-    fixture: 'api/performance.json',
-  }).as('getFilterPerformance');
+  cy.intercept("GET", "/api/filters/*/performance", {
+    fixture: "api/performance.json",
+  }).as("getFilterPerformance");
 
   // Traces
-  cy.intercept('GET', '/api/logs/*/traces', {
-    fixture: 'api/traces.json',
-  }).as('getTraces');
+  cy.intercept("GET", "/api/logs/*/traces", {
+    fixture: "api/traces.json",
+  }).as("getTraces");
 
-  cy.intercept('GET', '/api/filters/*/traces', {
-    fixture: 'api/traces.json',
-  }).as('getFilterTraces');
+  cy.intercept("GET", "/api/filters/*/traces", {
+    fixture: "api/traces.json",
+  }).as("getFilterTraces");
 
   // Trace detail (must be after traces list intercepts)
-  cy.intercept('GET', /\/api\/logs\/.*\/traces\/\d+/, {
-    fixture: 'api/trace-detail.json',
-  }).as('getTraceDetail');
+  cy.intercept("GET", /\/api\/logs\/.*\/traces\/\d+/, {
+    fixture: "api/trace-detail.json",
+  }).as("getTraceDetail");
 
-  cy.intercept('GET', /\/api\/filters\/.*\/traces\/\d+/, {
-    fixture: 'api/trace-detail.json',
-  }).as('getFilterTraceDetail');
+  cy.intercept("GET", /\/api\/filters\/.*\/traces\/\d+/, {
+    fixture: "api/trace-detail.json",
+  }).as("getFilterTraceDetail");
 
   // Temp filters
-  cy.intercept('GET', '/api/temp-filters/*/discover', {
-    fixture: 'api/discover.json',
-  }).as('getTempFilterDiscover');
+  cy.intercept("GET", "/api/temp-filters/*/discover", {
+    fixture: "api/discover.json",
+  }).as("getTempFilterDiscover");
 
-  cy.intercept('GET', '/api/temp-filters/*/traces', {
-    fixture: 'api/traces.json',
-  }).as('getTempFilterTraces');
+  cy.intercept("GET", "/api/temp-filters/*/traces", {
+    fixture: "api/traces.json",
+  }).as("getTempFilterTraces");
 
   // Filter params
-  cy.intercept('GET', '/api/filters/params*', {
+  cy.intercept("GET", "/api/filters/params*", {
     statusCode: 200,
     body: {},
-  }).as('getFilterParams');
+  }).as("getFilterParams");
 
-  cy.intercept('GET', '/api/filters/has-result*', {
+  cy.intercept("GET", "/api/filters/has-result*", {
     statusCode: 200,
     body: false,
-  }).as('getFilterHasResult');
+  }).as("getFilterHasResult");
 
   // Conformance check params
-  cy.intercept('GET', '/api/log-checks/params*', {
-    fixture: 'api/filter-params.json',
-  }).as('getLogCheckParams');
+  cy.intercept("GET", "/api/log-checks/params*", {
+    fixture: "api/filter-params.json",
+  }).as("getLogCheckParams");
 
-  cy.intercept('GET', '/api/filter-checks/params*', {
-    fixture: 'api/filter-params.json',
-  }).as('getFilterCheckParams');
+  cy.intercept("GET", "/api/filter-checks/params*", {
+    fixture: "api/filter-params.json",
+  }).as("getFilterCheckParams");
 
   // Compare dashboard
-  cy.intercept('GET', /\/api\/compare\?datasets=/, {
-    fixture: 'api/compare.json',
-  }).as('getCompare');
+  cy.intercept("GET", /\/api\/compare\?datasets=/, {
+    fixture: "api/compare.json",
+  }).as("getCompare");
 
   // Dependents (for delete confirmation)
-  cy.intercept('GET', '/api/logs/*/dependents', {
+  cy.intercept("GET", "/api/logs/*/dependents", {
     statusCode: 200,
     body: [],
-  }).as('getLogDependents');
+  }).as("getLogDependents");
 
-  cy.intercept('GET', '/api/filters/*/dependents', {
+  cy.intercept("GET", "/api/filters/*/dependents", {
     statusCode: 200,
     body: [],
-  }).as('getFilterDependents');
+  }).as("getFilterDependents");
 
-  cy.intercept('GET', '/api/log-checks/*/dependents', {
+  cy.intercept("GET", "/api/log-checks/*/dependents", {
     statusCode: 200,
     body: [],
-  }).as('getLogCheckDependents');
+  }).as("getLogCheckDependents");
 
-  cy.intercept('GET', '/api/filter-checks/*/dependents', {
+  cy.intercept("GET", "/api/filter-checks/*/dependents", {
     statusCode: 200,
     body: [],
-  }).as('getFilterCheckDependents');
+  }).as("getFilterCheckDependents");
 
   // Rename
-  cy.intercept('PUT', '/api/logs/*/rename', {
+  cy.intercept("PUT", "/api/logs/*/rename", {
     statusCode: 200,
     body: { success: true },
-  }).as('renameLog');
+  }).as("renameLog");
 
-  cy.intercept('PUT', '/api/filters/*/rename', {
+  cy.intercept("PUT", "/api/filters/*/rename", {
     statusCode: 200,
     body: { success: true },
-  }).as('renameFilter');
+  }).as("renameFilter");
 
   // Deletion
-  cy.intercept('DELETE', '/api/deletion/*', {
+  cy.intercept("DELETE", "/api/deletion/*", {
     statusCode: 200,
     body: { success: true },
-  }).as('deleteDeletion');
+  }).as("deleteDeletion");
 }
 
 /**
@@ -185,6 +185,6 @@ export function setupApiIntercepts() {
  */
 export function loginWithFixtures() {
   setupApiIntercepts();
-  cy.setCookie('luciaToken', 'fake-access-token-for-testing');
-  cy.setCookie('isLuciaLoggedIn', 'true');
+  cy.setCookie("luciaToken", "fake-access-token-for-testing");
+  cy.setCookie("isLuciaLoggedIn", "true");
 }
diff --git a/src/api/auth.js b/src/api/auth.js
index 4d65701..cd5fb21 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -4,8 +4,12 @@
 //   imacat.yang@dsp.im (imacat), 2023/9/23
 /** @module auth Authentication token refresh utilities. */
 
-import axios from 'axios';
-import { getCookie, setCookie, setCookieWithoutExpiration } from '@/utils/cookieUtil.js';
+import axios from "axios";
+import {
+  getCookie,
+  setCookie,
+  setCookieWithoutExpiration,
+} from "@/utils/cookieUtil.js";
 
 /**
  * Refreshes the access token using the stored refresh token cookie.
@@ -18,27 +22,29 @@ import { getCookie, setCookie, setCookieWithoutExpiration } from '@/utils/cookie
  * @throws {Error} If the refresh request fails.
  */
 export async function refreshTokenAndGetNew() {
-  const api = '/api/oauth/token';
+  const api = "/api/oauth/token";
   const config = {
     headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
+      "Content-Type": "application/x-www-form-urlencoded",
     },
   };
   const data = {
-    grant_type: 'refresh_token',
-    refresh_token: getCookie('luciaRefreshToken'),
+    grant_type: "refresh_token",
+    refresh_token: getCookie("luciaRefreshToken"),
   };
 
   const response = await axios.post(api, data, config);
   const newAccessToken = response.data.access_token;
   const newRefreshToken = response.data.refresh_token;
 
-  setCookieWithoutExpiration('luciaToken', newAccessToken);
+  setCookieWithoutExpiration("luciaToken", newAccessToken);
   // Expire in ~6 months
   const expiredMs = new Date();
   expiredMs.setMonth(expiredMs.getMonth() + 6);
-  const days = Math.ceil((expiredMs.getTime() - Date.now()) / (24 * 60 * 60 * 1000));
-  setCookie('luciaRefreshToken', newRefreshToken, days);
+  const days = Math.ceil(
+    (expiredMs.getTime() - Date.now()) / (24 * 60 * 60 * 1000),
+  );
+  setCookie("luciaRefreshToken", newRefreshToken, days);
 
   return newAccessToken;
 }
diff --git a/src/api/client.js b/src/api/client.js
index ae3d3fc..df5d38f 100644
--- a/src/api/client.js
+++ b/src/api/client.js
@@ -8,15 +8,15 @@
  *   401 token refresh with request queuing.
  */
 
-import axios from 'axios';
-import { getCookie, deleteCookie } from '@/utils/cookieUtil.js';
+import axios from "axios";
+import { getCookie, deleteCookie } from "@/utils/cookieUtil.js";
 
 /** Axios instance configured with auth interceptors. */
 const apiClient = axios.create();
 
 // Request interceptor: automatically attach Authorization header
 apiClient.interceptors.request.use((config) => {
-  const token = getCookie('luciaToken');
+  const token = getCookie("luciaToken");
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
@@ -54,7 +54,7 @@ apiClient.interceptors.response.use(
     if (
       error.response?.status !== 401 ||
       originalRequest._retried ||
-      originalRequest.url === '/api/oauth/token'
+      originalRequest.url === "/api/oauth/token"
     ) {
       return Promise.reject(error);
     }
@@ -76,7 +76,7 @@ apiClient.interceptors.response.use(
 
     try {
       // Dynamic import to avoid circular dependency with login store
-      const { refreshTokenAndGetNew } = await import('@/api/auth.js');
+      const { refreshTokenAndGetNew } = await import("@/api/auth.js");
       const newToken = await refreshTokenAndGetNew();
       isRefreshing = false;
       onRefreshSuccess(newToken);
@@ -87,11 +87,11 @@ apiClient.interceptors.response.use(
       onRefreshFailure(refreshError);
 
       // Refresh failed: clear auth and redirect to login
-      deleteCookie('luciaToken');
-      window.location.href = '/login';
+      deleteCookie("luciaToken");
+      window.location.href = "/login";
       return Promise.reject(refreshError);
     }
-  }
+  },
 );
 
 export default apiClient;
diff --git a/src/components/AccountMenu/AcctMenu.vue b/src/components/AccountMenu/AcctMenu.vue
index 05d9cb8..cc03d90 100644
--- a/src/components/AccountMenu/AcctMenu.vue
+++ b/src/components/AccountMenu/AcctMenu.vue
@@ -1,32 +1,51 @@
 <template>
-    <div id="account_menu" v-if="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
-        <div id="greeting" class="w-full border-b border-[#CBD5E1]">
-          <span class="m-4 h-[48px]">
-          {{ i18next.t("AcctMgmt.hi") }}{{ userData.name }}
-          </span>
-        </div>
-        <ul class="w-full min-h-10">
-          <!-- Not using a loop here because SVGs won't display if src is a variable -->
-        <li v-if="isAdmin" id="btn_acct_mgmt"
-          class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center" @click="onBtnAcctMgmtClick">
-            <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-crown.svg" alt="accountManagement"></span>
-            <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.acctMgmt")}}</span>
-        </li>
-        <li id="btn_mang_ur_acct"
-          class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center" @click="onBtnMyAccountClick">
-            <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg" alt="head-black"></span>
-            <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
-        </li>
-        <li id="btn_logout_in_menu"
-          class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center" @click="onLogoutBtnClick">
-            <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg" alt="logout"></span>
-            <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
-        </li>
-        </ul>
+  <div
+    id="account_menu"
+    v-if="isAcctMenuOpen"
+    class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]"
+  >
+    <div id="greeting" class="w-full border-b border-[#CBD5E1]">
+      <span class="m-4 h-[48px]">
+        {{ i18next.t("AcctMgmt.hi") }}{{ userData.name }}
+      </span>
     </div>
+    <ul class="w-full min-h-10">
+      <!-- Not using a loop here because SVGs won't display if src is a variable -->
+      <li
+        v-if="isAdmin"
+        id="btn_acct_mgmt"
+        class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer items-center"
+        @click="onBtnAcctMgmtClick"
+      >
+        <span class="w-[24px] h-[24px] flex"
+          ><img src="@/assets/icon-crown.svg" alt="accountManagement"
+        /></span>
+        <span class="flex ml-[8px]">{{ i18next.t("AcctMgmt.acctMgmt") }}</span>
+      </li>
+      <li
+        id="btn_mang_ur_acct"
+        class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer items-center"
+        @click="onBtnMyAccountClick"
+      >
+        <span class="w-[24px] h-[24px] flex"
+          ><img src="@/assets/icon-head-black.svg" alt="head-black"
+        /></span>
+        <span class="flex ml-[8px]">{{
+          i18next.t("AcctMgmt.mangUrAcct")
+        }}</span>
+      </li>
+      <li
+        id="btn_logout_in_menu"
+        class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer items-center"
+        @click="onLogoutBtnClick"
+      >
+        <span class="w-[24px] h-[24px] flex"
+          ><img src="@/assets/icon-logout.svg" alt="logout"
+        /></span>
+        <span class="flex ml-[8px]">{{ i18next.t("AcctMgmt.Logout") }}</span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup>
@@ -40,16 +59,16 @@
  *   with links to account management, my account, and logout.
  */
 
-import { computed, onMounted, ref } from 'vue';
-import { storeToRefs } from 'pinia';
-import i18next from '@/i18n/i18n';
-import { useRouter, useRoute } from 'vue-router';
-import { useLoginStore } from '@/stores/login';
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { useConformanceStore } from '@/stores/conformance';
-import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
-import emitter from '@/utils/emitter';
+import { computed, onMounted, ref } from "vue";
+import { storeToRefs } from "pinia";
+import i18next from "@/i18n/i18n";
+import { useRouter, useRoute } from "vue-router";
+import { useLoginStore } from "@/stores/login";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
+import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
+import emitter from "@/utils/emitter";
 
 const router = useRouter();
 const route = useRoute();
@@ -60,12 +79,15 @@ const acctMgmtStore = useAcctMgmtStore();
 
 const { logOut } = loginStore;
 const { tempFilterId } = storeToRefs(allMapDataStore);
-const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId } =
+  storeToRefs(conformanceStore);
 const { userData } = storeToRefs(loginStore);
 const { isAcctMenuOpen } = storeToRefs(acctMgmtStore);
 
 const loginUserData = ref(null);
-const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
+const currentViewingUserDetail = computed(
+  () => acctMgmtStore.currentViewingUser.detail,
+);
 const isAdmin = ref(false);
 
 /** Fetches user data and determines if the current user is an admin. */
@@ -81,16 +103,21 @@ const onBtnMyAccountClick = async () => {
   acctMgmtStore.closeAcctMenu();
   await acctMgmtStore.getAllUserAccounts(); // in case we haven't fetched yet
   await acctMgmtStore.setCurrentViewingUser(loginUserData.value.username);
-  await router.push('/my-account');
+  await router.push("/my-account");
 };
 
 /** Registers a click listener to close the menu when clicking outside. */
 const clickOtherPlacesThenCloseMenu = () => {
-  const acctMgmtButton = document.getElementById('acct_mgmt_button');
-  const acctMgmtMenu = document.getElementById('account_menu');
+  const acctMgmtButton = document.getElementById("acct_mgmt_button");
+  const acctMgmtMenu = document.getElementById("account_menu");
 
-  document.addEventListener('click', (event) => {
-    if (acctMgmtMenu && acctMgmtButton && !acctMgmtMenu.contains(event.target) && !acctMgmtButton.contains(event.target)) {
+  document.addEventListener("click", (event) => {
+    if (
+      acctMgmtMenu &&
+      acctMgmtButton &&
+      !acctMgmtMenu.contains(event.target) &&
+      !acctMgmtButton.contains(event.target)
+    ) {
       acctMgmtStore.closeAcctMenu();
     }
   });
@@ -98,19 +125,29 @@ const clickOtherPlacesThenCloseMenu = () => {
 
 /** Navigates to the Account Admin page. */
 const onBtnAcctMgmtClick = () => {
-  router.push({name: 'AcctAdmin'});
+  router.push({ name: "AcctAdmin" });
   acctMgmtStore.closeAcctMenu();
 };
 
 /** Handles logout with unsaved-changes confirmation for Map and Conformance pages. */
 const onLogoutBtnClick = () => {
-  if ((route.name === 'Map' || route.name === 'CheckMap') && tempFilterId.value) {
+  if (
+    (route.name === "Map" || route.name === "CheckMap") &&
+    tempFilterId.value
+  ) {
     // Notify Map to close the Sidebar.
-    emitter.emit('leaveFilter', false);
-    leaveFilter(false, allMapDataStore.addFilterId, false, logOut)
-  } else if((route.name === 'Conformance' || route.name === 'CheckConformance')
-    && (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)) {
-    leaveConformance(false, conformanceStore.addConformanceCreateCheckId, false, logOut)
+    emitter.emit("leaveFilter", false);
+    leaveFilter(false, allMapDataStore.addFilterId, false, logOut);
+  } else if (
+    (route.name === "Conformance" || route.name === "CheckConformance") &&
+    (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)
+  ) {
+    leaveConformance(
+      false,
+      conformanceStore.addConformanceCreateCheckId,
+      false,
+      logOut,
+    );
   } else {
     logOut();
   }
diff --git a/src/components/AccountMenu/SearchBar.vue b/src/components/AccountMenu/SearchBar.vue
index 605f699..21cebfe 100644
--- a/src/components/AccountMenu/SearchBar.vue
+++ b/src/components/AccountMenu/SearchBar.vue
@@ -1,12 +1,22 @@
 <template>
-    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full
-        justify-between">
-        <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"
-            v-model="inputQuery" @keypress="handleKeyPressOfSearch"
-        />
-        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex cursor-pointer" @click="onSearchClick"
-            alt="search"/>
-    </div>
+  <div
+    id="search_bar_container"
+    class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full justify-between"
+  >
+    <input
+      id="input_search"
+      class="w-full outline-0"
+      :placeholder="i18next.t('AcctMgmt.Search')"
+      v-model="inputQuery"
+      @keypress="handleKeyPressOfSearch"
+    />
+    <img
+      src="@/assets/icon-search.svg"
+      class="w-[17px] h-[17px] flex cursor-pointer"
+      @click="onSearchClick"
+      alt="search"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -20,10 +30,10 @@
  *   filtering accounts, emits search query on click or Enter key.
  */
 
-import { ref } from 'vue';
-import i18next from '@/i18n/i18n.js';
+import { ref } from "vue";
+import i18next from "@/i18n/i18n.js";
 
-const emit = defineEmits(['on-search-account-button-click']);
+const emit = defineEmits(["on-search-account-button-click"]);
 
 const inputQuery = ref("");
 
@@ -32,8 +42,8 @@ const inputQuery = ref("");
  * @param {Event} event - The click event.
  */
 const onSearchClick = (event) => {
-    event.preventDefault();
-    emit('on-search-account-button-click', inputQuery.value);
+  event.preventDefault();
+  emit("on-search-account-button-click", inputQuery.value);
 };
 
 /**
@@ -41,8 +51,8 @@ const onSearchClick = (event) => {
  * @param {KeyboardEvent} event - The keypress event.
  */
 const handleKeyPressOfSearch = (event) => {
-    if (event.key === 'Enter') {
-        emit('on-search-account-button-click', inputQuery.value);
-    }
+  if (event.key === "Enter") {
+    emit("on-search-account-button-click", inputQuery.value);
+  }
 };
 </script>
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
index 02d0ae3..7fa25dd 100644
--- a/src/components/Badge.vue
+++ b/src/components/Badge.vue
@@ -1,18 +1,18 @@
 <template>
-    <div
-      class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2"
-      :class="{
-        'badge-activated': isActivated,
-        'badge-deactivated': !isActivated,
-        'bg-[#0099FF]': isActivated,
-        'bg-[#C9CDD4]': !isActivated,
-      }"
-    >
-      {{ displayText }}
-    </div>
-  </template>
+  <div
+    class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2"
+    :class="{
+      'badge-activated': isActivated,
+      'badge-deactivated': !isActivated,
+      'bg-[#0099FF]': isActivated,
+      'bg-[#C9CDD4]': !isActivated,
+    }"
+  >
+    {{ displayText }}
+  </div>
+</template>
 
-  <script setup>
+<script setup>
 // The Lucia project.
 // Copyright 2024-2026 DSP, inc.  All rights reserved.
 // Authors:
@@ -23,16 +23,16 @@
  *   an activated/deactivated state with colored background.
  */
 
-  defineProps({
-    isActivated: {
-      type: Boolean,
-      required: true,
-      default: true,
-    },
-    displayText: {
-      type: String,
-      required: true,
-      default: "Status",
-    }
-  });
-  </script>
+defineProps({
+  isActivated: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  displayText: {
+    type: String,
+    required: true,
+    default: "Status",
+  },
+});
+</script>
diff --git a/src/components/Button.vue b/src/components/Button.vue
index abace7c..bb8f50f 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -1,18 +1,16 @@
 <template>
-    <button class="button-component w-[80px] h-[32px] rounded-full
-        flex text-[#666666] border-[1px] border-[#666666]
-        justify-center items-center bg-[#FFFFFF]
-        hover:text-[#0099FF] hover:border-[#0099FF]
-        focus:text-[#0099FF] focus:border-[#0099FF]
-        cursor-pointer"
-        :class="{
-            'ring': isPressed,
-            'ring-[#0099FF]' : isPressed,
-            'ring-opacity-30': isPressed,
-        }"
-        @mousedown="onMousedown" @mouseup="onMouseup">
-        {{ buttonText }}
-    </button>
+  <button
+    class="button-component w-[80px] h-[32px] rounded-full flex text-[#666666] border-[1px] border-[#666666] justify-center items-center bg-[#FFFFFF] hover:text-[#0099FF] hover:border-[#0099FF] focus:text-[#0099FF] focus:border-[#0099FF] cursor-pointer"
+    :class="{
+      ring: isPressed,
+      'ring-[#0099FF]': isPressed,
+      'ring-opacity-30': isPressed,
+    }"
+    @mousedown="onMousedown"
+    @mouseup="onMouseup"
+  >
+    {{ buttonText }}
+  </button>
 </template>
 
 <script setup>
@@ -26,22 +24,22 @@
  *   press-state ring effect.
  */
 
-import { ref } from 'vue';
+import { ref } from "vue";
 
 defineProps({
-    buttonText: {
-        type: String,
-        required: false,
-    },
+  buttonText: {
+    type: String,
+    required: false,
+  },
 });
 
 const isPressed = ref(false);
 
 const onMousedown = () => {
-    isPressed.value = true;
+  isPressed.value = true;
 };
 
 const onMouseup = () => {
-    isPressed.value = false;
+  isPressed.value = false;
 };
 </script>
diff --git a/src/components/ButtonFilled.vue b/src/components/ButtonFilled.vue
index 7d047d0..7c0d8a1 100644
--- a/src/components/ButtonFilled.vue
+++ b/src/components/ButtonFilled.vue
@@ -1,19 +1,18 @@
 <!-- The filled version of the button has a solid background -->
 <template>
-    <button class="button-filled-component w-[80px] h-[32px] rounded-full
-        flex text-[#FFFFFF]
-        justify-center items-center bg-[#0099FF]
-        hover:text-[#FFFFFF] hover:bg-[#0080D5]
-        cursor-pointer"
-        :class="{
-            'ring': isPressed,
-            'ring-[#0099FF]' : isPressed,
-            'ring-opacity-30': isPressed,
-            'bg-[#0099FF]': isPressed,
-        }"
-        @mousedown="onMousedown" @mouseup="onMouseup">
-        {{ buttonText }}
-    </button>
+  <button
+    class="button-filled-component w-[80px] h-[32px] rounded-full flex text-[#FFFFFF] justify-center items-center bg-[#0099FF] hover:text-[#FFFFFF] hover:bg-[#0080D5] cursor-pointer"
+    :class="{
+      ring: isPressed,
+      'ring-[#0099FF]': isPressed,
+      'ring-opacity-30': isPressed,
+      'bg-[#0099FF]': isPressed,
+    }"
+    @mousedown="onMousedown"
+    @mouseup="onMouseup"
+  >
+    {{ buttonText }}
+  </button>
 </template>
 
 <script setup>
@@ -27,22 +26,22 @@
  *   solid background and press-state ring effect.
  */
 
-import { ref } from 'vue';
+import { ref } from "vue";
 
 defineProps({
-    buttonText: {
-        type: String,
-        required: false,
-    },
+  buttonText: {
+    type: String,
+    required: false,
+  },
 });
 
 const isPressed = ref(false);
 
 const onMousedown = () => {
-    isPressed.value = true;
+  isPressed.value = true;
 };
 
 const onMouseup = () => {
-    isPressed.value = false;
+  isPressed.value = false;
 };
 </script>
diff --git a/src/components/Compare/SidebarStates.vue b/src/components/Compare/SidebarStates.vue
index 1dfd99a..2fd9ba3 100644
--- a/src/components/Compare/SidebarStates.vue
+++ b/src/components/Compare/SidebarStates.vue
@@ -1,5 +1,14 @@
 <template>
-  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false" class="!w-[440px]" @hide="hide" @show="show">
+  <Sidebar
+    :visible="sidebarState"
+    :closeIcon="'pi pi-angle-right'"
+    :modal="false"
+    position="right"
+    :dismissable="false"
+    class="!w-[440px]"
+    @hide="hide"
+    @show="show"
+  >
     <template #header>
       <p class="pl-2 text-base font-bold text-neutral-900">Summary</p>
     </template>
@@ -9,7 +18,12 @@
       <section class="w-[204px] box-border pr-4">
         <div class="mb-4">
           <p class="h2">File Name</p>
-          <p class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="primaryStatData.name">{{ primaryStatData.name }}</p>
+          <p
+            class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis"
+            :title="primaryStatData.name"
+          >
+            {{ primaryStatData.name }}
+          </p>
         </div>
         <!-- Stats -->
         <ul class="pb-4 border-b border-neutral-300">
@@ -17,40 +31,80 @@
             <p class="h2">Cases</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.cases.count }} / {{ primaryStatData.cases.total }}</span>
-                <ProgressBar :value="primaryValueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.cases.count }} /
+                  {{ primaryStatData.cases.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueCases"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.cases.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.cases.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Traces</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.traces.count }} / {{ primaryStatData.traces.total }}</span>
-                <ProgressBar :value="primaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.traces.count }} /
+                  {{ primaryStatData.traces.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueTraces"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.traces.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.traces.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activity Instances</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.task_instances.count }} / {{ primaryStatData.task_instances.total }}</span>
-                <ProgressBar :value="primaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.task_instances.count }} /
+                  {{ primaryStatData.task_instances.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueTaskInstances"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.task_instances.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.task_instances.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activities</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ primaryStatData.tasks.count }} / {{ primaryStatData.tasks.total }}</span>
-                <ProgressBar :value="primaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ primaryStatData.tasks.count }} /
+                  {{ primaryStatData.tasks.total }}</span
+                >
+                <ProgressBar
+                  :value="primaryValueTasks"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
+                ></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.tasks.ratio }}%</span>
+              <span
+                class="block text-primary text-2xl text-right font-medium basis-28"
+                >{{ primaryStatData.tasks.ratio }}%</span
+              >
             </div>
           </li>
         </ul>
@@ -67,10 +121,34 @@
         <div class="pt-1 pb-4">
           <p class="h2">Case Duration</p>
           <ul class="space-y-1 text-sm">
-            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.min }}</li>
-            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.average }}</li>
-            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.median }}</li>
-            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.max }}</li>
+            <li>
+              <Tag
+                value="MIN"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.min }}
+            </li>
+            <li>
+              <Tag
+                value="AVG"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.average }}
+            </li>
+            <li>
+              <Tag
+                value="MED"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.median }}
+            </li>
+            <li>
+              <Tag
+                value="MAX"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ primaryStatData.case_duration.max }}
+            </li>
           </ul>
         </div>
       </section>
@@ -78,7 +156,12 @@
       <section class="w-[204px] box-border pl-4">
         <div class="mb-4">
           <p class="h2">File Name</p>
-          <p class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="secondaryStatData.name">{{ secondaryStatData.name }}</p>
+          <p
+            class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis"
+            :title="secondaryStatData.name"
+          >
+            {{ secondaryStatData.name }}
+          </p>
         </div>
         <!-- Stats -->
         <ul class="pb-4 border-b border-neutral-300">
@@ -86,40 +169,80 @@
             <p class="h2">Cases</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.cases.count }} / {{ secondaryStatData.cases.total }}</span>
-                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.cases.count }} /
+                  {{ secondaryStatData.cases.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTraces"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.cases.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.cases.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Traces</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.traces.count }} / {{ secondaryStatData.traces.total }}</span>
-                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.traces.count }} /
+                  {{ secondaryStatData.traces.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTraces"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.traces.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.traces.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activity Instances</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.task_instances.count }} / {{ secondaryStatData.task_instances.total }}</span>
-                <ProgressBar :value="secondaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.task_instances.count }} /
+                  {{ secondaryStatData.task_instances.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTaskInstances"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.task_instances.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.task_instances.ratio }}%</span
+              >
             </div>
           </li>
           <li>
             <p class="h2">Activities</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ secondaryStatData.tasks.count }} / {{ secondaryStatData.tasks.total }}</span>
-                <ProgressBar :value="secondaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
+                <span class="block text-sm"
+                  >{{ secondaryStatData.tasks.count }} /
+                  {{ secondaryStatData.tasks.total }}</span
+                >
+                <ProgressBar
+                  :value="secondaryValueTasks"
+                  :showValue="false"
+                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
+                ></ProgressBar>
               </div>
-              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.tasks.ratio }}%</span>
+              <span
+                class="block text-secondary text-2xl text-right font-medium basis-28"
+                >{{ secondaryStatData.tasks.ratio }}%</span
+              >
             </div>
           </li>
         </ul>
@@ -136,10 +259,34 @@
         <div class="pt-1 pb-4">
           <p class="h2">Case Duration</p>
           <ul class="space-y-1 text-sm">
-            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.min }}</li>
-            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.average }}</li>
-            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.median }}</li>
-            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.max }}</li>
+            <li>
+              <Tag
+                value="MIN"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.min }}
+            </li>
+            <li>
+              <Tag
+                value="AVG"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.average }}
+            </li>
+            <li>
+              <Tag
+                value="MED"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.median }}
+            </li>
+            <li>
+              <Tag
+                value="MAX"
+                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
+              ></Tag
+              >{{ secondaryStatData.case_duration.max }}
+            </li>
           </ul>
         </div>
       </section>
@@ -158,11 +305,11 @@
  *   traces, activities, timeframes, durations) of two files.
  */
 
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useCompareStore } from '@/stores/compare';
-import { getTimeLabel } from '@/module/timeLabel.js';
-import getMoment from 'moment';
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useCompareStore } from "@/stores/compare";
+import { getTimeLabel } from "@/module/timeLabel.js";
+import getMoment from "moment";
 
 const props = defineProps({
   sidebarState: {
@@ -191,7 +338,7 @@ const secondaryStatData = ref(null);
  * @returns {number} The percentage value.
  */
 const getPercentLabel = (val) => {
-  if((val * 100).toFixed(1) >= 100) return 100;
+  if ((val * 100).toFixed(1) >= 100) return 100;
   else return parseFloat((val * 100).toFixed(1));
 };
 
@@ -205,34 +352,34 @@ const getStatData = (data, fileName) => {
   return {
     name: fileName,
     cases: {
-      count: data.cases.count.toLocaleString('en-US'),
-      total: data.cases.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.cases.ratio)
+      count: data.cases.count.toLocaleString("en-US"),
+      total: data.cases.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.cases.ratio),
     },
     traces: {
-      count: data.traces.count.toLocaleString('en-US'),
-      total: data.traces.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.traces.ratio)
+      count: data.traces.count.toLocaleString("en-US"),
+      total: data.traces.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.traces.ratio),
     },
     task_instances: {
-      count: data.task_instances.count.toLocaleString('en-US'),
-      total: data.task_instances.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.task_instances.ratio)
+      count: data.task_instances.count.toLocaleString("en-US"),
+      total: data.task_instances.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.task_instances.ratio),
     },
     tasks: {
-      count: data.tasks.count.toLocaleString('en-US'),
-      total: data.tasks.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(data.tasks.ratio)
+      count: data.tasks.count.toLocaleString("en-US"),
+      total: data.tasks.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(data.tasks.ratio),
     },
-    started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
-    completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
+    started_at: getMoment(data.started_at).format("YYYY.MM.DD HH:mm"),
+    completed_at: getMoment(data.completed_at).format("YYYY.MM.DD HH:mm"),
     case_duration: {
       min: getTimeLabel(data.case_duration.min, 2),
       max: getTimeLabel(data.case_duration.max, 2),
       average: getTimeLabel(data.case_duration.average, 2),
       median: getTimeLabel(data.case_duration.median, 2),
-    }
-  }
+    },
+  };
 };
 
 /** Populates progress bar values when the sidebar is shown. */
@@ -243,7 +390,8 @@ const show = () => {
   primaryValueTasks.value = primaryStatData.value.tasks.ratio;
   secondaryValueCases.value = secondaryStatData.value.cases.ratio;
   secondaryValueTraces.value = secondaryStatData.value.traces.ratio;
-  secondaryValueTaskInstances.value = secondaryStatData.value.task_instances.ratio;
+  secondaryValueTaskInstances.value =
+    secondaryStatData.value.task_instances.ratio;
   secondaryValueTasks.value = secondaryStatData.value.tasks.ratio;
 };
 
@@ -266,10 +414,13 @@ onMounted(async () => {
   const primaryId = routeParams.primaryId;
   const secondaryId = routeParams.secondaryId;
   const primaryData = await compareStore.getStateData(primaryType, primaryId);
-  const secondaryData = await compareStore.getStateData(secondaryType, secondaryId);
+  const secondaryData = await compareStore.getStateData(
+    secondaryType,
+    secondaryId,
+  );
 
-  const primaryFileName = await compareStore.getFileName(primaryId)
-  const secondaryFileName = await compareStore.getFileName(secondaryId)
+  const primaryFileName = await compareStore.getFileName(primaryId);
+  const secondaryFileName = await compareStore.getFileName(secondaryId);
   primaryStatData.value = await getStatData(primaryData, primaryFileName);
   secondaryStatData.value = await getStatData(secondaryData, secondaryFileName);
 });
@@ -279,9 +430,9 @@ onMounted(async () => {
   background-color: var(--bg-color);
 }
 .progressbar-primary {
-  --bg-color: #0099FF;
+  --bg-color: #0099ff;
 }
 .progressbar-secondary {
-  --bg-color: #FFAA44;
+  --bg-color: #ffaa44;
 }
 </style>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 2e12230..3cb99c9 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -1,124 +1,142 @@
 <template>
-<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10"
-  :class="!notShowActList ? (isShowBarOpen ? 'w-full' : 'w-[312px]') : 'w-[312px]'">
-  <!-- header -->
-  <div class="bg-neutral-200 px-4">
-    <p class="h2">{{ i18next.t("Conformance.RuleSettings") }}</p>
-  </div>
-  <!-- contanier -->
-  <div class="p-4 h-[calc(100%_-_40px)] flex">
-    <div class="h-full flex flex-col justify-between w-[280px]">
-      <!-- select -->
-      <div class="h-full overflow-y-auto scrollbar w-[280px]">
-        <!-- radio group -->
-        <ConformanceRadioGroup></ConformanceRadioGroup>
-        <!-- show and hidden button -->
-        <div v-if="!notShowActList" class="flex items-center justify-between mr-1"
-          :class="isShowBarOpen ? 'text-primary' : ''">
-          <p class="h2">{{ i18next.t("Conformance.ActivitySelector") }}</p>
-          <span id="cyp-showbaricon" class="material-symbols-outlined cursor-pointer duration-300
-            hover:bg-primary/50 hover:rounded"
-            @click="isShowBarOpen = !isShowBarOpen">
-            {{ isShowBarOpen ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}
-          </span>
-        </div>
-        <!-- select result -->
-        <ConformanceSelectResult
-          :isSubmit="isAlreadySubmit"
-          :isSubmitTask="isSubmitTask"
-          :isSubmitStartAndEnd="isSubmitStartAndEnd"
-          :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
-          :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
-          :isSubmitDurationData="isSubmitDurationData"
-          :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
-          :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
-          :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
-          :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
-          :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
-          :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
-          :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
-          :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
-          :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
-          :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
-          :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
-          :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
-          :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
-          :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
-          :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
-        ></ConformanceSelectResult>
-        <!-- Time Range -->
-        <ConformanceTimeRange
-          @min-total-seconds="minTotalSeconds"
-          @max-total-seconds="maxTotalSeconds"
-
-          :isSubmitDurationTime="isSubmitDurationTime"
-
-          :isSubmitTimeCfmPtEteAll="isSubmitTimeCfmPtEteAll"
-          :isSubmitTimeCfmPtEteStart="isSubmitTimeCfmPtEteStart"
-          :isSubmitTimeCfmPtEteEnd="isSubmitTimeCfmPtEteEnd"
-          :isSubmitTimeCfmPtEteSE="isSubmitTimeCfmPtEteSE"
-          :isSubmitTimeCfmPtPStart="isSubmitTimeCfmPtPStart"
-          :isSubmitTimeCfmPtPEnd="isSubmitTimeCfmPtPEnd"
-          :isSubmitTimeCfmPtPSE="isSubmitTimeCfmPtPSE"
-          :isSubmitTimeCfmWtEteAll="isSubmitTimeCfmWtEteAll"
-          :isSubmitTimeCfmWtEteStart="isSubmitTimeCfmWtEteStart"
-          :isSubmitTimeCfmWtEteEnd="isSubmitTimeCfmWtEteEnd"
-          :isSubmitTimeCfmWtEteSE="isSubmitTimeCfmWtEteSE"
-          :isSubmitTimeCfmWtPStart="isSubmitTimeCfmWtPStart"
-          :isSubmitTimeCfmWtPEnd="isSubmitTimeCfmWtPEnd"
-          :isSubmitTimeCfmWtPSE="isSubmitTimeCfmWtPSE"
-          :isSubmitTimeCfmCtEteAll="isSubmitTimeCfmCtEteAll"
-          :isSubmitTimeCfmCtEteStart="isSubmitTimeCfmCtEteStart"
-          :isSubmitTimeCfmCtEteEnd="isSubmitTimeCfmCtEteEnd"
-          :isSubmitTimeCfmCtEteSE="isSubmitTimeCfmCtEteSE"
-         ></ConformanceTimeRange>
-      </div>
-      <!-- buttons -->
-      <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
-        <button type="button"  class="btn btn-sm btn-neutral" @click="reset">
-          {{ i18next.t("Global.Clear")}}
-        </button>
-        <button id="btn_apply_conformance" type="button" class="btn btn-sm "
-          @click="submitConformance"
-          :class="isMainBtnDisabled ? 'btn-disable' : 'btn-neutral'"
-          :disabled="isApplyBtnDisabled"
-        >
-          {{ i18next.t("Global.Apply") }}
-        </button>
-      </div>
+  <section
+    class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10"
+    :class="
+      !notShowActList ? (isShowBarOpen ? 'w-full' : 'w-[312px]') : 'w-[312px]'
+    "
+  >
+    <!-- header -->
+    <div class="bg-neutral-200 px-4">
+      <p class="h2">{{ i18next.t("Conformance.RuleSettings") }}</p>
     </div>
-    <!-- show bar -->
-    <ConformanceShowBar v-if="!notShowActList" :class="isShowBarOpen?'':'hidden'"
-      :isSubmit="isAlreadySubmit"
-      :isSubmitTask="isSubmitTask"
-      :isSubmitStartAndEnd="isSubmitStartAndEnd"
-      :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
-      :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
-      :isSubmitDurationData="isSubmitDurationData"
-      :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
-      :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
-      :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
-      :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
-      :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
-      :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
-      :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
-      :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
-      :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
-      :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
-      :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
-      :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
-      :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
-      :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
-      :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
-      :isSubmitShowDataSeq="isSubmitShowDataSeq"
-      :isSubmitShowDataPtEte="isSubmitShowDataPtEte"
-      :isSubmitShowDataPtP="isSubmitShowDataPtP"
-      :isSubmitShowDataWtEte="isSubmitShowDataWtEte"
-      :isSubmitShowDataWtP="isSubmitShowDataWtP"
-      :isSubmitShowDataCt="isSubmitShowDataCt"
-    ></ConformanceShowBar>
-  </div>
-</section>
+    <!-- contanier -->
+    <div class="p-4 h-[calc(100%_-_40px)] flex">
+      <div class="h-full flex flex-col justify-between w-[280px]">
+        <!-- select -->
+        <div class="h-full overflow-y-auto scrollbar w-[280px]">
+          <!-- radio group -->
+          <ConformanceRadioGroup></ConformanceRadioGroup>
+          <!-- show and hidden button -->
+          <div
+            v-if="!notShowActList"
+            class="flex items-center justify-between mr-1"
+            :class="isShowBarOpen ? 'text-primary' : ''"
+          >
+            <p class="h2">{{ i18next.t("Conformance.ActivitySelector") }}</p>
+            <span
+              id="cyp-showbaricon"
+              class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded"
+              @click="isShowBarOpen = !isShowBarOpen"
+            >
+              {{
+                isShowBarOpen
+                  ? "keyboard_double_arrow_right"
+                  : "keyboard_double_arrow_left"
+              }}
+            </span>
+          </div>
+          <!-- select result -->
+          <ConformanceSelectResult
+            :isSubmit="isAlreadySubmit"
+            :isSubmitTask="isSubmitTask"
+            :isSubmitStartAndEnd="isSubmitStartAndEnd"
+            :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
+            :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
+            :isSubmitDurationData="isSubmitDurationData"
+            :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
+            :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
+            :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
+            :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
+            :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
+            :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
+            :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
+            :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
+            :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
+            :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
+            :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
+            :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
+            :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
+            :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
+            :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
+          ></ConformanceSelectResult>
+          <!-- Time Range -->
+          <ConformanceTimeRange
+            @min-total-seconds="minTotalSeconds"
+            @max-total-seconds="maxTotalSeconds"
+            :isSubmitDurationTime="isSubmitDurationTime"
+            :isSubmitTimeCfmPtEteAll="isSubmitTimeCfmPtEteAll"
+            :isSubmitTimeCfmPtEteStart="isSubmitTimeCfmPtEteStart"
+            :isSubmitTimeCfmPtEteEnd="isSubmitTimeCfmPtEteEnd"
+            :isSubmitTimeCfmPtEteSE="isSubmitTimeCfmPtEteSE"
+            :isSubmitTimeCfmPtPStart="isSubmitTimeCfmPtPStart"
+            :isSubmitTimeCfmPtPEnd="isSubmitTimeCfmPtPEnd"
+            :isSubmitTimeCfmPtPSE="isSubmitTimeCfmPtPSE"
+            :isSubmitTimeCfmWtEteAll="isSubmitTimeCfmWtEteAll"
+            :isSubmitTimeCfmWtEteStart="isSubmitTimeCfmWtEteStart"
+            :isSubmitTimeCfmWtEteEnd="isSubmitTimeCfmWtEteEnd"
+            :isSubmitTimeCfmWtEteSE="isSubmitTimeCfmWtEteSE"
+            :isSubmitTimeCfmWtPStart="isSubmitTimeCfmWtPStart"
+            :isSubmitTimeCfmWtPEnd="isSubmitTimeCfmWtPEnd"
+            :isSubmitTimeCfmWtPSE="isSubmitTimeCfmWtPSE"
+            :isSubmitTimeCfmCtEteAll="isSubmitTimeCfmCtEteAll"
+            :isSubmitTimeCfmCtEteStart="isSubmitTimeCfmCtEteStart"
+            :isSubmitTimeCfmCtEteEnd="isSubmitTimeCfmCtEteEnd"
+            :isSubmitTimeCfmCtEteSE="isSubmitTimeCfmCtEteSE"
+          ></ConformanceTimeRange>
+        </div>
+        <!-- buttons -->
+        <div
+          class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300"
+        >
+          <button type="button" class="btn btn-sm btn-neutral" @click="reset">
+            {{ i18next.t("Global.Clear") }}
+          </button>
+          <button
+            id="btn_apply_conformance"
+            type="button"
+            class="btn btn-sm"
+            @click="submitConformance"
+            :class="isMainBtnDisabled ? 'btn-disable' : 'btn-neutral'"
+            :disabled="isApplyBtnDisabled"
+          >
+            {{ i18next.t("Global.Apply") }}
+          </button>
+        </div>
+      </div>
+      <!-- show bar -->
+      <ConformanceShowBar
+        v-if="!notShowActList"
+        :class="isShowBarOpen ? '' : 'hidden'"
+        :isSubmit="isAlreadySubmit"
+        :isSubmitTask="isSubmitTask"
+        :isSubmitStartAndEnd="isSubmitStartAndEnd"
+        :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
+        :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
+        :isSubmitDurationData="isSubmitDurationData"
+        :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
+        :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
+        :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
+        :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
+        :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
+        :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
+        :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
+        :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
+        :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
+        :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
+        :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
+        :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
+        :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
+        :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
+        :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
+        :isSubmitShowDataSeq="isSubmitShowDataSeq"
+        :isSubmitShowDataPtEte="isSubmitShowDataPtEte"
+        :isSubmitShowDataPtP="isSubmitShowDataPtP"
+        :isSubmitShowDataWtEte="isSubmitShowDataWtEte"
+        :isSubmitShowDataWtP="isSubmitShowDataWtP"
+        :isSubmitShowDataCt="isSubmitShowDataCt"
+      ></ConformanceShowBar>
+    </div>
+  </section>
 </template>
 
 <script setup>
@@ -135,18 +153,18 @@
  *   actions.
  */
 
-import { ref, computed, watch, onBeforeUnmount } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useToast } from 'vue-toast-notification';
-import i18next from '@/i18n/i18n';
-import emitter from '@/utils/emitter';
-import { useConformanceInputStore } from '@/stores/conformanceInput';
-import { useLoadingStore } from '@/stores/loading';
-import { useConformanceStore } from '@/stores/conformance';
-import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
-import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
-import ConformanceTimeRange from './ConformanceSidebar/ConformanceTimeRange.vue';
-import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResult.vue';
+import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { storeToRefs } from "pinia";
+import { useToast } from "vue-toast-notification";
+import i18next from "@/i18n/i18n";
+import emitter from "@/utils/emitter";
+import { useConformanceInputStore } from "@/stores/conformanceInput";
+import { useLoadingStore } from "@/stores/loading";
+import { useConformanceStore } from "@/stores/conformance";
+import ConformanceRadioGroup from "./ConformanceSidebar/ConformanceRadioGroup.vue";
+import ConformanceShowBar from "./ConformanceSidebar/ConformanceShowBar.vue";
+import ConformanceTimeRange from "./ConformanceSidebar/ConformanceTimeRange.vue";
+import ConformanceSelectResult from "./ConformanceSidebar/ConformanceSelectResult.vue";
 
 const $toast = useToast();
 
@@ -154,16 +172,38 @@ const loadingStore = useLoadingStore();
 const conformanceStore = useConformanceStore();
 const conformanceInputStore = useConformanceInputStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
-  selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole,
-  cfmPtEteStart: cfmPtEteStartStore, cfmPtEteEnd: cfmPtEteEndStore, cfmPtEteSE,
-  cfmPtPStart: cfmPtPStartStore, cfmPtPEnd: cfmPtPEndStore, cfmPtPSE,
-  cfmWtEteWhole, cfmWtEteStart: cfmWtEteStartStore, cfmWtEteEnd: cfmWtEteEndStore,
-  cfmWtEteSE, cfmWtPStart: cfmWtPStartStore, cfmWtPEnd: cfmWtPEndStore, cfmWtPSE,
-  cfmCtEteWhole, cfmCtEteStart: cfmCtEteStartStore, cfmCtEteEnd: cfmCtEteEndStore,
-  cfmCtEteSE, isStartSelected, isEndSelected,
-  conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
-  conformanceTempReportData
+const {
+  selectedRuleType,
+  selectedActivitySequence,
+  selectedMode,
+  selectedProcessScope,
+  selectedActSeqMore,
+  selectedActSeqFromTo,
+  conformanceAllTasks,
+  cfmPtEteWhole,
+  cfmPtEteStart: cfmPtEteStartStore,
+  cfmPtEteEnd: cfmPtEteEndStore,
+  cfmPtEteSE,
+  cfmPtPStart: cfmPtPStartStore,
+  cfmPtPEnd: cfmPtPEndStore,
+  cfmPtPSE,
+  cfmWtEteWhole,
+  cfmWtEteStart: cfmWtEteStartStore,
+  cfmWtEteEnd: cfmWtEteEndStore,
+  cfmWtEteSE,
+  cfmWtPStart: cfmWtPStartStore,
+  cfmWtPEnd: cfmWtPEndStore,
+  cfmWtPSE,
+  cfmCtEteWhole,
+  cfmCtEteStart: cfmCtEteStartStore,
+  cfmCtEteEnd: cfmCtEteEndStore,
+  cfmCtEteSE,
+  isStartSelected,
+  isEndSelected,
+  conformanceRuleData,
+  conformanceLogCreateCheckId,
+  conformanceFilterCreateCheckId,
+  conformanceTempReportData,
 } = storeToRefs(conformanceStore);
 const { activityRadioData } = storeToRefs(conformanceInputStore);
 
@@ -177,7 +217,7 @@ const selectCfmSeqEnd = ref(null);
 const selectCfmSeqDirectly = ref([]);
 const selectCfmSeqEventually = ref([]);
 const selectDurationData = ref(null); // Activity duration
-const selectDurationTime = ref({ min: 0, max: 0});
+const selectDurationTime = ref({ min: 0, max: 0 });
 const selectTimeRangeMin = ref(0); // Time Range min
 const selectTimeRangeMax = ref(0); // Time Range max
 const selectCfmPtEteStart = ref(null); // Processing time
@@ -222,66 +262,66 @@ const isSubmitCfmWtPSE = ref(null);
 const isSubmitCfmCtEteStart = ref(null); // Cycle time
 const isSubmitCfmCtEteEnd = ref(null);
 const isSubmitCfmCtEteSE = ref(null);
-const isSubmitDurationTime = ref({ base: {}, rule: {}}); // Activity duration Time Range
-const isSubmitTimeCfmPtEteAll = ref({ base: {}, rule: {}}); // Processing time Time Range
-const isSubmitTimeCfmPtEteStart = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmPtEteEnd = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmPtEteSE = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmPtPStart = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmPtPEnd = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmPtPSE = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmWtEteAll = ref({ base: {}, rule: {}}); // Waiting time Time Range
-const isSubmitTimeCfmWtEteStart = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmWtEteEnd = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmWtEteSE = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmWtPStart = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmWtPEnd = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmWtPSE = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmCtEteAll = ref({ base: {}, rule: {}}); // Cycle time Time Range
-const isSubmitTimeCfmCtEteStart = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmCtEteEnd = ref({ base: {}, rule: {}});
-const isSubmitTimeCfmCtEteSE = ref({ base: {}, rule: {}});
+const isSubmitDurationTime = ref({ base: {}, rule: {} }); // Activity duration Time Range
+const isSubmitTimeCfmPtEteAll = ref({ base: {}, rule: {} }); // Processing time Time Range
+const isSubmitTimeCfmPtEteStart = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmPtEteEnd = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmPtEteSE = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmPtPStart = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmPtPEnd = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmPtPSE = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmWtEteAll = ref({ base: {}, rule: {} }); // Waiting time Time Range
+const isSubmitTimeCfmWtEteStart = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmWtEteEnd = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmWtEteSE = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmWtPStart = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmWtPEnd = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmWtPSE = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmCtEteAll = ref({ base: {}, rule: {} }); // Cycle time Time Range
+const isSubmitTimeCfmCtEteStart = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmCtEteEnd = ref({ base: {}, rule: {} });
+const isSubmitTimeCfmCtEteSE = ref({ base: {}, rule: {} });
 const isSubmitShowDataSeq = ref({
   task: null,
   taskStart: null,
   taskEnd: null,
   isStartSelected: null,
-  isEndSelected: null
+  isEndSelected: null,
 }); // Linked data for Start & End
 const isSubmitShowDataPtEte = ref({
   task: null,
   taskStart: null,
   taskEnd: null,
   isStartSelected: null,
-  isEndSelected: null
+  isEndSelected: null,
 });
 const isSubmitShowDataPtP = ref({
   task: null,
   taskStart: null,
   taskEnd: null,
   isStartSelected: null,
-  isEndSelected: null
+  isEndSelected: null,
 });
 const isSubmitShowDataWtEte = ref({
   task: null,
   taskStart: null,
   taskEnd: null,
   isStartSelected: null,
-  isEndSelected: null
+  isEndSelected: null,
 });
 const isSubmitShowDataWtP = ref({
   task: null,
   taskStart: null,
   taskEnd: null,
   isStartSelected: null,
-  isEndSelected: null
+  isEndSelected: null,
 });
 const isSubmitShowDataCt = ref({
   task: null,
   taskStart: null,
   taskEnd: null,
   isStartSelected: null,
-  isEndSelected: null
+  isEndSelected: null,
 });
 
 // Map for dynamic field access in handleSimpleSelection
@@ -300,14 +340,21 @@ const selectFieldRefs = {
 
 // computed
 const notShowActList = computed(() => {
-  return (selectedRuleType.value === 'Activity sequence' && selectedActivitySequence.value === 'Sequence'
-  && (selectedMode.value === 'Short loop(s)' || selectedMode.value === 'Self loop(s)'))
-  || (selectedRuleType.value === 'Processing time' && selectedProcessScope.value === 'End to end'
-    && selectedActSeqMore.value === 'All')
-  || (selectedRuleType.value === 'Waiting time' && selectedProcessScope.value === 'End to end'
-    && selectedActSeqMore.value === 'All')
-  || (selectedRuleType.value === 'Cycle time' && selectedProcessScope.value === 'End to end'
-    && selectedActSeqMore.value === 'All')
+  return (
+    (selectedRuleType.value === "Activity sequence" &&
+      selectedActivitySequence.value === "Sequence" &&
+      (selectedMode.value === "Short loop(s)" ||
+        selectedMode.value === "Self loop(s)")) ||
+    (selectedRuleType.value === "Processing time" &&
+      selectedProcessScope.value === "End to end" &&
+      selectedActSeqMore.value === "All") ||
+    (selectedRuleType.value === "Waiting time" &&
+      selectedProcessScope.value === "End to end" &&
+      selectedActSeqMore.value === "All") ||
+    (selectedRuleType.value === "Cycle time" &&
+      selectedProcessScope.value === "End to end" &&
+      selectedActSeqMore.value === "All")
+  );
 });
 
 /**
@@ -317,26 +364,26 @@ const isApplyBtnDisabled = computed(() => {
   let disabledBool = true;
 
   switch (selectedRuleType.value) {
-      case 'Have activity':
-          disabledBool = checkHaveActivity();
-          break;
-      case 'Activity sequence':
-          disabledBool = checkActivitySequence();
-          break;
-      case 'Activity duration':
-          disabledBool = checkActivityDuration();
-          break;
-      case 'Processing time':
-          disabledBool = checkProcessingTime();
-          break;
-      case 'Waiting time':
-          disabledBool = checkWaitingTime();
-          break;
-      case 'Cycle time':
-          disabledBool = checkCycleTime();
-          break;
-      default:
-          break;
+    case "Have activity":
+      disabledBool = checkHaveActivity();
+      break;
+    case "Activity sequence":
+      disabledBool = checkActivitySequence();
+      break;
+    case "Activity duration":
+      disabledBool = checkActivityDuration();
+      break;
+    case "Processing time":
+      disabledBool = checkProcessingTime();
+      break;
+    case "Waiting time":
+      disabledBool = checkWaitingTime();
+      break;
+    case "Cycle time":
+      disabledBool = checkCycleTime();
+      break;
+    default:
+      break;
   }
 
   isMainBtnDisabled.value = disabledBool;
@@ -351,281 +398,282 @@ watch(isSubmittedData, (newValue) => {
 // When opening a rule file, display the saved options, rules, and time
 watch(conformanceTempReportData, (newValue) => {
   setTimeout(() => {
-    if(newValue !== null) {
+    if (newValue !== null) {
       const rule = newValue.rule;
 
       isSubmittedData.value = newValue.rule;
       isAlreadySubmit.value = true;
       switch (rule.type) {
-        case 'contains-tasks': // Behavior when Rule Type is Have activity
-          selectedRuleType.value = 'Have activity';
+        case "contains-tasks": // Behavior when Rule Type is Have activity
+          selectedRuleType.value = "Have activity";
           isSubmitTask.value = rule.tasks;
           break;
-        case 'start-end': // Behavior when Rule Type is Activity sequence
-          selectedRuleType.value = 'Activity sequence';
-          selectedActivitySequence.value = 'Start & End';
+        case "start-end": // Behavior when Rule Type is Activity sequence
+          selectedRuleType.value = "Activity sequence";
+          selectedActivitySequence.value = "Start & End";
           isSubmitStartAndEnd.value = [
-            {category: 'Start', task: rule.starts_with},
-            {category: 'End', task: rule.ends_with},
+            { category: "Start", task: rule.starts_with },
+            { category: "End", task: rule.ends_with },
           ];
           break;
-        case 'directly-follows': // Behavior when Activity Sequence is Sequence
-          selectedRuleType.value = 'Activity sequence';
-          selectedActivitySequence.value = 'Sequence';
-          selectedMode.value = 'Directly follows';
+        case "directly-follows": // Behavior when Activity Sequence is Sequence
+          selectedRuleType.value = "Activity sequence";
+          selectedActivitySequence.value = "Sequence";
+          selectedMode.value = "Directly follows";
           isSubmitCfmSeqDirectly.value = rule.task_seq;
           break;
-        case 'eventually-follows':
-          selectedRuleType.value = 'Activity sequence';
-          selectedActivitySequence.value = 'Sequence';
-          selectedMode.value = 'Eventually follows';
+        case "eventually-follows":
+          selectedRuleType.value = "Activity sequence";
+          selectedActivitySequence.value = "Sequence";
+          selectedMode.value = "Eventually follows";
           isSubmitCfmSeqEventually.value = rule.task_seq;
           break;
-        case 'short-loops':
-          selectedRuleType.value = 'Activity sequence';
-          selectedActivitySequence.value = 'Sequence';
-          selectedMode.value = 'Short loop(s)';
+        case "short-loops":
+          selectedRuleType.value = "Activity sequence";
+          selectedActivitySequence.value = "Sequence";
+          selectedMode.value = "Short loop(s)";
           break;
-        case 'self-loops':
-          selectedRuleType.value = 'Activity sequence';
-          selectedActivitySequence.value = 'Sequence';
-          selectedMode.value = 'Self loop(s)';
+        case "self-loops":
+          selectedRuleType.value = "Activity sequence";
+          selectedActivitySequence.value = "Sequence";
+          selectedMode.value = "Self loop(s)";
           break;
-        case 'task-duration': // Behavior when Rule Type is Activity duration
-          selectedRuleType.value = 'Activity duration';
+        case "task-duration": // Behavior when Rule Type is Activity duration
+          selectedRuleType.value = "Activity duration";
           selectDurationData.value = [rule.task];
           isSubmitDurationData.value = [rule.task];
           isSubmitDurationTime.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'processing-time-end-to-end-whole': // Behavior when Rule Type is Processing time
-          selectedRuleType.value = 'Processing time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'All';
+        case "processing-time-end-to-end-whole": // Behavior when Rule Type is Processing time
+          selectedRuleType.value = "Processing time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "All";
           isSubmitTimeCfmPtEteAll.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'processing-time-end-to-end-starts-with':
-          selectedRuleType.value = 'Processing time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'Start';
+        case "processing-time-end-to-end-starts-with":
+          selectedRuleType.value = "Processing time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "Start";
           selectCfmPtEteStart.value = rule.task;
           isSubmitCfmPtEteStart.value = [
-            {category: 'Start', task: rule.task}
+            { category: "Start", task: rule.task },
           ];
           isSubmitTimeCfmPtEteStart.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'processing-time-end-to-end-ends-with':
-          selectedRuleType.value = 'Processing time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'End';
+        case "processing-time-end-to-end-ends-with":
+          selectedRuleType.value = "Processing time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "End";
           selectCfmPtEteEnd.value = rule.task;
-          isSubmitCfmPtEteEnd.value = [
-            {category: 'End', task: rule.task}
-          ];
+          isSubmitCfmPtEteEnd.value = [{ category: "End", task: rule.task }];
           isSubmitTimeCfmPtEteEnd.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'processing-time-end-to-end-start-end':
-          selectedRuleType.value = 'Processing time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'Start & End';
+        case "processing-time-end-to-end-start-end":
+          selectedRuleType.value = "Processing time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "Start & End";
           isSubmitCfmPtEteSE.value = [
-            {category: 'Start', task: rule.start},
-            {category: 'End', task: rule.end}
+            { category: "Start", task: rule.start },
+            { category: "End", task: rule.end },
           ];
           isSubmitTimeCfmPtEteSE.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
-          isSubmitShowDataPtEte.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          isSubmitShowDataPtEte.value = setSubmitShowDataByStartEnd(
+            rule.start,
+            rule.end,
+          );
           break;
-        case 'processing-time-partial-starts-with':
-          selectedRuleType.value = 'Processing time';
-          selectedProcessScope.value = 'Partial';
-          selectedActSeqFromTo.value = 'From';
+        case "processing-time-partial-starts-with":
+          selectedRuleType.value = "Processing time";
+          selectedProcessScope.value = "Partial";
+          selectedActSeqFromTo.value = "From";
           selectCfmPtPStart.value = rule.task;
-          isSubmitCfmPtPStart.value = [
-            {category: 'From', task: rule.task}
-          ];
+          isSubmitCfmPtPStart.value = [{ category: "From", task: rule.task }];
           isSubmitTimeCfmPtPStart.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'processing-time-partial-ends-with':
-          selectedRuleType.value = 'Processing time';
-          selectedProcessScope.value = 'Partial';
-          selectedActSeqFromTo.value = 'To';
+        case "processing-time-partial-ends-with":
+          selectedRuleType.value = "Processing time";
+          selectedProcessScope.value = "Partial";
+          selectedActSeqFromTo.value = "To";
           selectCfmPtPEnd.value = rule.task;
-          isSubmitCfmPtPEnd.value = [
-            {category: 'To', task: rule.task}
-          ];
+          isSubmitCfmPtPEnd.value = [{ category: "To", task: rule.task }];
           isSubmitTimeCfmPtPEnd.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'processing-time-partial-start-end':
-          selectedRuleType.value = 'Processing time';
-          selectedProcessScope.value = 'Partial';
-          selectedActSeqFromTo.value = 'From & To';
+        case "processing-time-partial-start-end":
+          selectedRuleType.value = "Processing time";
+          selectedProcessScope.value = "Partial";
+          selectedActSeqFromTo.value = "From & To";
           isSubmitCfmPtPSE.value = [
-            {category: 'From', task: rule.start},
-            {category: 'To', task: rule.end}
+            { category: "From", task: rule.start },
+            { category: "To", task: rule.end },
           ];
           isSubmitTimeCfmPtPSE.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
-          isSubmitShowDataPtP.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          isSubmitShowDataPtP.value = setSubmitShowDataByStartEnd(
+            rule.start,
+            rule.end,
+          );
           break;
-        case 'waiting-time-end-to-end-whole': // Behavior when Rule Type is Waiting time
-          selectedRuleType.value = 'Waiting time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'All';
+        case "waiting-time-end-to-end-whole": // Behavior when Rule Type is Waiting time
+          selectedRuleType.value = "Waiting time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "All";
           isSubmitTimeCfmWtEteAll.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'waiting-time-end-to-end-starts-with':
-          selectedRuleType.value = 'Waiting time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'Start';
+        case "waiting-time-end-to-end-starts-with":
+          selectedRuleType.value = "Waiting time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "Start";
           selectCfmWtEteStart.value = rule.task;
           isSubmitCfmWtEteStart.value = [
-            {category: 'Start', task: rule.task}
+            { category: "Start", task: rule.task },
           ];
           isSubmitTimeCfmWtEteStart.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'waiting-time-end-to-end-ends-with':
-          selectedRuleType.value = 'Waiting time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'End';
+        case "waiting-time-end-to-end-ends-with":
+          selectedRuleType.value = "Waiting time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "End";
           selectCfmWtEteEnd.value = rule.task;
-          isSubmitCfmWtEteEnd.value = [
-            {category: 'End', task: rule.task}
-          ];
+          isSubmitCfmWtEteEnd.value = [{ category: "End", task: rule.task }];
           isSubmitTimeCfmWtEteEnd.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'waiting-time-end-to-end-start-end':
-          selectedRuleType.value = 'Waiting time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'Start & End';
+        case "waiting-time-end-to-end-start-end":
+          selectedRuleType.value = "Waiting time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "Start & End";
           isSubmitCfmWtEteSE.value = [
-            {category: 'Start', task: rule.start},
-            {category: 'End', task: rule.end}
+            { category: "Start", task: rule.start },
+            { category: "End", task: rule.end },
           ];
           isSubmitTimeCfmWtEteSE.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
-          isSubmitShowDataWtEte.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          isSubmitShowDataWtEte.value = setSubmitShowDataByStartEnd(
+            rule.start,
+            rule.end,
+          );
           break;
-        case 'waiting-time-partial-starts-with':
-          selectedRuleType.value = 'Waiting time';
-          selectedProcessScope.value = 'Partial';
-          selectedActSeqFromTo.value = 'From';
+        case "waiting-time-partial-starts-with":
+          selectedRuleType.value = "Waiting time";
+          selectedProcessScope.value = "Partial";
+          selectedActSeqFromTo.value = "From";
           selectCfmWtPStart.value = rule.task;
-          isSubmitCfmWtPStart.value = [
-            {category: 'From', task: rule.task}
-          ];
+          isSubmitCfmWtPStart.value = [{ category: "From", task: rule.task }];
           isSubmitTimeCfmWtPStart.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'waiting-time-partial-ends-with':
-          selectedRuleType.value = 'Waiting time';
-          selectedProcessScope.value = 'Partial';
-          selectedActSeqFromTo.value = 'To';
+        case "waiting-time-partial-ends-with":
+          selectedRuleType.value = "Waiting time";
+          selectedProcessScope.value = "Partial";
+          selectedActSeqFromTo.value = "To";
           selectCfmWtPEnd.value = rule.task;
-          isSubmitCfmWtPEnd.value = [
-            {category: 'To', task: rule.task}
-          ];
+          isSubmitCfmWtPEnd.value = [{ category: "To", task: rule.task }];
           isSubmitTimeCfmWtPEnd.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'waiting-time-partial-start-end':
-          selectedRuleType.value = 'Waiting time';
-          selectedProcessScope.value = 'Partial';
-          selectedActSeqFromTo.value = 'From & To';
+        case "waiting-time-partial-start-end":
+          selectedRuleType.value = "Waiting time";
+          selectedProcessScope.value = "Partial";
+          selectedActSeqFromTo.value = "From & To";
           isSubmitCfmWtPSE.value = [
-            {category: 'From', task: rule.start},
-            {category: 'To', task: rule.end}
+            { category: "From", task: rule.start },
+            { category: "To", task: rule.end },
           ];
           isSubmitTimeCfmWtPSE.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
-          isSubmitShowDataWtP.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          isSubmitShowDataWtP.value = setSubmitShowDataByStartEnd(
+            rule.start,
+            rule.end,
+          );
           break;
-        case 'cycle-time-end-to-end-whole': // Behavior when Rule Type is Cycle time
-          selectedRuleType.value = 'Cycle time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'All';
+        case "cycle-time-end-to-end-whole": // Behavior when Rule Type is Cycle time
+          selectedRuleType.value = "Cycle time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "All";
           isSubmitTimeCfmCtEteAll.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'cycle-time-end-to-end-starts-with':
-          selectedRuleType.value = 'Cycle time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'Start';
+        case "cycle-time-end-to-end-starts-with":
+          selectedRuleType.value = "Cycle time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "Start";
           selectCfmCtEteStart.value = rule.task;
           isSubmitCfmCtEteStart.value = [
-            {category: 'Start', task: rule.task}
+            { category: "Start", task: rule.task },
           ];
           isSubmitTimeCfmCtEteStart.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'cycle-time-end-to-end-ends-with':
-          selectedRuleType.value = 'Cycle time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'End';
+        case "cycle-time-end-to-end-ends-with":
+          selectedRuleType.value = "Cycle time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "End";
           selectCfmCtEteEnd.value = rule.task;
-          isSubmitCfmCtEteEnd.value = [
-            {category: 'End', task: rule.task}
-          ];
+          isSubmitCfmCtEteEnd.value = [{ category: "End", task: rule.task }];
           isSubmitTimeCfmCtEteEnd.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
           break;
-        case 'cycle-time-end-to-end-start-end':
-          selectedRuleType.value = 'Cycle time';
-          selectedProcessScope.value = 'End to end';
-          selectedActSeqMore.value = 'Start & End';
+        case "cycle-time-end-to-end-start-end":
+          selectedRuleType.value = "Cycle time";
+          selectedProcessScope.value = "End to end";
+          selectedActSeqMore.value = "Start & End";
           isSubmitCfmCtEteSE.value = [
-            {category: 'Start', task: rule.start},
-            {category: 'End', task: rule.end}
+            { category: "Start", task: rule.start },
+            { category: "End", task: rule.end },
           ];
           isSubmitTimeCfmCtEteSE.value = {
             base: newValue.charts.time.x_axis,
-            rule: { min: rule.min, max: rule.max},
+            rule: { min: rule.min, max: rule.max },
           };
-          isSubmitShowDataCt.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          isSubmitShowDataCt.value = setSubmitShowDataByStartEnd(
+            rule.start,
+            rule.end,
+          );
           break;
       }
     }
@@ -692,7 +740,7 @@ function isSubmitReset() {
   isSubmitCfmSeqDirectly.value = [];
   isSubmitCfmSeqEventually.value = [];
   isSubmitDurationData.value = null;
-  isSubmitDurationTime.value = { base: {}, rule: {}};
+  isSubmitDurationTime.value = { base: {}, rule: {} };
   isSubmitCfmPtEteStart.value = null; // Processing time
   isSubmitCfmPtEteEnd.value = null;
   isSubmitCfmPtEteSE.value = null;
@@ -708,31 +756,31 @@ function isSubmitReset() {
   isSubmitCfmCtEteStart.value = null; // Cycle time
   isSubmitCfmCtEteEnd.value = null;
   isSubmitCfmCtEteSE.value = null;
-  isSubmitTimeCfmPtEteAll.value = { base: {}, rule: {}}; // Processing time Time Range
-  isSubmitTimeCfmPtEteStart.value = { base: {}, rule: {}};
-  isSubmitTimeCfmPtEteEnd.value = { base: {}, rule: {}};
-  isSubmitTimeCfmPtEteSE.value = { base: {}, rule: {}};
-  isSubmitTimeCfmPtPStart.value = { base: {}, rule: {}};
-  isSubmitTimeCfmPtPEnd.value = { base: {}, rule: {}};
-  isSubmitTimeCfmPtPSE.value = { base: {}, rule: {}};
-  isSubmitTimeCfmWtEteAll.value = { base: {}, rule: {}}; // Waiting time Time Range
-  isSubmitTimeCfmWtEteStart.value = { base: {}, rule: {}};
-  isSubmitTimeCfmWtEteEnd.value = { base: {}, rule: {}};
-  isSubmitTimeCfmWtEteSE.value = { base: {}, rule: {}};
-  isSubmitTimeCfmWtPStart.value = { base: {}, rule: {}};
-  isSubmitTimeCfmWtPEnd.value = { base: {}, rule: {}};
-  isSubmitTimeCfmWtPSE.value = { base: {}, rule: {}};
-  isSubmitTimeCfmCtEteAll.value = { base: {}, rule: {}}; // Cycle time Time Range
-  isSubmitTimeCfmCtEteStart.value = { base: {}, rule: {}};
-  isSubmitTimeCfmCtEteEnd.value = { base: {}, rule: {}};
-  isSubmitTimeCfmCtEteSE.value = { base: {}, rule: {}};
+  isSubmitTimeCfmPtEteAll.value = { base: {}, rule: {} }; // Processing time Time Range
+  isSubmitTimeCfmPtEteStart.value = { base: {}, rule: {} };
+  isSubmitTimeCfmPtEteEnd.value = { base: {}, rule: {} };
+  isSubmitTimeCfmPtEteSE.value = { base: {}, rule: {} };
+  isSubmitTimeCfmPtPStart.value = { base: {}, rule: {} };
+  isSubmitTimeCfmPtPEnd.value = { base: {}, rule: {} };
+  isSubmitTimeCfmPtPSE.value = { base: {}, rule: {} };
+  isSubmitTimeCfmWtEteAll.value = { base: {}, rule: {} }; // Waiting time Time Range
+  isSubmitTimeCfmWtEteStart.value = { base: {}, rule: {} };
+  isSubmitTimeCfmWtEteEnd.value = { base: {}, rule: {} };
+  isSubmitTimeCfmWtEteSE.value = { base: {}, rule: {} };
+  isSubmitTimeCfmWtPStart.value = { base: {}, rule: {} };
+  isSubmitTimeCfmWtPEnd.value = { base: {}, rule: {} };
+  isSubmitTimeCfmWtPSE.value = { base: {}, rule: {} };
+  isSubmitTimeCfmCtEteAll.value = { base: {}, rule: {} }; // Cycle time Time Range
+  isSubmitTimeCfmCtEteStart.value = { base: {}, rule: {} };
+  isSubmitTimeCfmCtEteEnd.value = { base: {}, rule: {} };
+  isSubmitTimeCfmCtEteSE.value = { base: {}, rule: {} };
 }
 /**
  * Clears all form selections and resets the sidebar state.
  */
 function reset() {
   // Results page cover plate (mask enabled)
-  emitter.emit('coverPlate', true);
+  emitter.emit("coverPlate", true);
   // is submit select Reset
   isSubmitReset();
   isSubmittedData.value = null; // Data after Apply, unchanged unless rules are modified
@@ -740,7 +788,7 @@ function reset() {
 
   // Reset other child components
   selectTimeReset();
-  emitter.emit('reset', null);
+  emitter.emit("reset", null);
   // Reset success message
   $toast.success(i18next.t("Conformance.RuleCleared"));
   isShowBarOpen.value = true;
@@ -752,21 +800,21 @@ function reset() {
  * @returns {object}
  */
 function setSubmitShowDataByStartEnd(start, end) {
-  if(isStartSelected.value) {
+  if (isStartSelected.value) {
     return {
       task: start,
       taskStart: start,
       taskEnd: end,
-      isStartSelected:true,
-      isEndSelected: false
+      isStartSelected: true,
+      isEndSelected: false,
     };
-  }else {
+  } else {
     return {
       task: end,
       taskStart: start,
       taskEnd: end,
-      isStartSelected:false,
-      isEndSelected: true
+      isStartSelected: false,
+      isEndSelected: true,
     };
   }
 }
@@ -777,37 +825,37 @@ async function submitConformance() {
   let dataToSave;
 
   selectDurationTime.value = {
-      min: selectTimeRangeMin.value,
-      max: selectTimeRangeMax.value
+    min: selectTimeRangeMin.value,
+    max: selectTimeRangeMax.value,
   };
-  emitter.emit('timeRangeMaxMin', selectDurationTime.value);
+  emitter.emit("timeRangeMaxMin", selectDurationTime.value);
 
   switch (selectedRuleType.value) {
-      case 'Have activity': // Behavior when Rule Type is Have activity
-          dataToSave = getHaveActivityData();
-          break;
-      case 'Activity sequence': // Behavior when Rule Type is Activity sequence
-          dataToSave = getActivitySequenceData();
-          break;
-      case 'Activity duration': // Behavior when Rule Type is Activity duration
-          dataToSave = getActivityDurationData();
-          break;
-      case 'Processing time': // Behavior when Rule Type is Processing time
-          dataToSave = getProcessingTimeData();
-          break;
-      case 'Waiting time': // Behavior when Rule Type is Waiting time
-          dataToSave = getWaitingTimeData();
-          break;
-      case 'Cycle time': // Behavior when Rule Type is Cycle time
-          dataToSave = getCycleTimeData();
-          break;
+    case "Have activity": // Behavior when Rule Type is Have activity
+      dataToSave = getHaveActivityData();
+      break;
+    case "Activity sequence": // Behavior when Rule Type is Activity sequence
+      dataToSave = getActivitySequenceData();
+      break;
+    case "Activity duration": // Behavior when Rule Type is Activity duration
+      dataToSave = getActivityDurationData();
+      break;
+    case "Processing time": // Behavior when Rule Type is Processing time
+      dataToSave = getProcessingTimeData();
+      break;
+    case "Waiting time": // Behavior when Rule Type is Waiting time
+      dataToSave = getWaitingTimeData();
+      break;
+    case "Cycle time": // Behavior when Rule Type is Cycle time
+      dataToSave = getCycleTimeData();
+      break;
   }
 
   if (dataToSave.min > dataToSave.max) {
-      return $toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
+    return $toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
   }
   if (JSON.stringify(dataToSave) === JSON.stringify(isSubmittedData.value)) {
-      return $toast.error(i18next.t("Conformance.PleaseSetNewRule"));
+    return $toast.error(i18next.t("Conformance.PleaseSetNewRule"));
   }
 
   isLoading.value = true;
@@ -819,7 +867,7 @@ async function submitConformance() {
   isShowBarOpen.value = false;
   isLoading.value = false;
   // Results page Cover Plate
-  emitter.emit('coverPlate', false);
+  emitter.emit("coverPlate", false);
   $toast.success(i18next.t("Conformance.RuleApplied"));
 }
 
@@ -828,8 +876,8 @@ async function submitConformance() {
  */
 function getHaveActivityData() {
   const dataToSave = {
-      type: 'contains-tasks',
-      tasks: selectConformanceTask.value,
+    type: "contains-tasks",
+    tasks: selectConformanceTask.value,
   };
   isSubmitReset();
   isSubmitTask.value = selectConformanceTask.value;
@@ -840,411 +888,462 @@ function getHaveActivityData() {
  * @returns {object} The rule data to submit.
  */
 function getActivitySequenceData() {
-    let dataToSave;
-    switch (selectedActivitySequence.value) {
-        case 'Start & End':
-            dataToSave = {
-                type: 'start-end',
-                starts_with: selectCfmSeqStart.value,
-                ends_with: selectCfmSeqEnd.value,
-            };
-            isSubmitReset();
-            isSubmitStartAndEnd.value = [
-                { category: 'Start', task: selectCfmSeqStart.value },
-                { category: 'End', task: selectCfmSeqEnd.value },
-            ];
-            isSubmitShowDataSeq.value = setSubmitShowDataByStartEnd(selectCfmSeqStart.value, selectCfmSeqEnd.value);
-            break;
-        case 'Sequence':
-            dataToSave = getSequenceData();
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedActivitySequence.value) {
+    case "Start & End":
+      dataToSave = {
+        type: "start-end",
+        starts_with: selectCfmSeqStart.value,
+        ends_with: selectCfmSeqEnd.value,
+      };
+      isSubmitReset();
+      isSubmitStartAndEnd.value = [
+        { category: "Start", task: selectCfmSeqStart.value },
+        { category: "End", task: selectCfmSeqEnd.value },
+      ];
+      isSubmitShowDataSeq.value = setSubmitShowDataByStartEnd(
+        selectCfmSeqStart.value,
+        selectCfmSeqEnd.value,
+      );
+      break;
+    case "Sequence":
+      dataToSave = getSequenceData();
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds the data payload for sequence sub-rules.
  * @returns {object} The rule data to submit.
  */
 function getSequenceData() {
-    let dataToSave;
-    switch (selectedMode.value) {
-        case 'Directly follows':
-            dataToSave = {
-                type: 'directly-follows',
-                task_seq: selectCfmSeqDirectly.value,
-            };
-            isSubmitReset();
-            isSubmitCfmSeqDirectly.value = JSON.parse(JSON.stringify(selectCfmSeqDirectly.value));
-            break;
-        case 'Eventually follows':
-            dataToSave = {
-                type: 'eventually-follows',
-                task_seq: selectCfmSeqEventually.value,
-            };
-            isSubmitReset();
-            isSubmitCfmSeqEventually.value = JSON.parse(JSON.stringify(selectCfmSeqEventually.value));
-            break;
-        case 'Short loop(s)':
-            dataToSave = { type: 'short-loops' };
-            break;
-        case 'Self loop(s)':
-            dataToSave = { type: 'self-loops' };
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedMode.value) {
+    case "Directly follows":
+      dataToSave = {
+        type: "directly-follows",
+        task_seq: selectCfmSeqDirectly.value,
+      };
+      isSubmitReset();
+      isSubmitCfmSeqDirectly.value = JSON.parse(
+        JSON.stringify(selectCfmSeqDirectly.value),
+      );
+      break;
+    case "Eventually follows":
+      dataToSave = {
+        type: "eventually-follows",
+        task_seq: selectCfmSeqEventually.value,
+      };
+      isSubmitReset();
+      isSubmitCfmSeqEventually.value = JSON.parse(
+        JSON.stringify(selectCfmSeqEventually.value),
+      );
+      break;
+    case "Short loop(s)":
+      dataToSave = { type: "short-loops" };
+      break;
+    case "Self loop(s)":
+      dataToSave = { type: "self-loops" };
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds the data payload for the 'Activity duration' rule.
  * @returns {object} The rule data to submit.
  */
 function getActivityDurationData() {
-    const dataToSave = {
-        type: 'task-duration',
-        task: selectDurationData.value[0],
-        min: selectDurationTime.value.min,
-        max: selectDurationTime.value.max,
-    };
-    isSubmitReset();
-    isSubmitDurationData.value = selectDurationData.value;
-    isSubmitDurationTime.value.rule = selectDurationTime.value;
-    return dataToSave;
+  const dataToSave = {
+    type: "task-duration",
+    task: selectDurationData.value[0],
+    min: selectDurationTime.value.min,
+    max: selectDurationTime.value.max,
+  };
+  isSubmitReset();
+  isSubmitDurationData.value = selectDurationData.value;
+  isSubmitDurationTime.value.rule = selectDurationTime.value;
+  return dataToSave;
 }
 
 /** Builds the data payload for the 'Processing time' rule.
  * @returns {object} The rule data to submit.
  */
 function getProcessingTimeData() {
-    let dataToSave;
-    switch (selectedProcessScope.value) {
-        case 'End to end':
-            dataToSave = getEndToEndProcessingTimeData();
-            break;
-        case 'Partial':
-            dataToSave = getPartialProcessingTimeData();
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedProcessScope.value) {
+    case "End to end":
+      dataToSave = getEndToEndProcessingTimeData();
+      break;
+    case "Partial":
+      dataToSave = getPartialProcessingTimeData();
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds end-to-end processing time rule data.
  * @returns {object} The rule data to submit.
  */
 function getEndToEndProcessingTimeData() {
-    let dataToSave;
-    switch (selectedActSeqMore.value) {
-        case 'All':
-            dataToSave = {
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'processing-time-end-to-end-whole',
-            };
-            isSubmitReset();
-            isSubmitTimeCfmPtEteAll.value.rule = selectDurationTime.value;
-            break;
-        case 'Start':
-            dataToSave = {
-                task: selectCfmPtEteStart.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'processing-time-end-to-end-starts-with',
-            };
-            isSubmitReset();
-            isSubmitCfmPtEteStart.value = [{ category: 'Start', task: selectCfmPtEteStart.value }];
-            isSubmitTimeCfmPtEteStart.value.rule = selectDurationTime.value;
-            break;
-        case 'End':
-            dataToSave = {
-                task: selectCfmPtEteEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'processing-time-end-to-end-ends-with',
-            };
-            isSubmitReset();
-            isSubmitCfmPtEteEnd.value = [{ category: 'End', task: selectCfmPtEteEnd.value }];
-            isSubmitTimeCfmPtEteEnd.value.rule = selectDurationTime.value;
-            break;
-        case 'Start & End':
-            dataToSave = {
-                start: selectCfmPtEteSEStart.value,
-                end: selectCfmPtEteSEEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'processing-time-end-to-end-start-end',
-            };
-            isSubmitReset();
-            isSubmitCfmPtEteSE.value = [
-                { category: 'Start', task: selectCfmPtEteSEStart.value },
-                { category: 'End', task: selectCfmPtEteSEEnd.value },
-            ];
-            isSubmitTimeCfmPtEteSE.value.rule = selectDurationTime.value;
-            isSubmitShowDataPtEte.value = setSubmitShowDataByStartEnd(selectCfmPtEteSEStart.value, selectCfmPtEteSEEnd.value);
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedActSeqMore.value) {
+    case "All":
+      dataToSave = {
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "processing-time-end-to-end-whole",
+      };
+      isSubmitReset();
+      isSubmitTimeCfmPtEteAll.value.rule = selectDurationTime.value;
+      break;
+    case "Start":
+      dataToSave = {
+        task: selectCfmPtEteStart.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "processing-time-end-to-end-starts-with",
+      };
+      isSubmitReset();
+      isSubmitCfmPtEteStart.value = [
+        { category: "Start", task: selectCfmPtEteStart.value },
+      ];
+      isSubmitTimeCfmPtEteStart.value.rule = selectDurationTime.value;
+      break;
+    case "End":
+      dataToSave = {
+        task: selectCfmPtEteEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "processing-time-end-to-end-ends-with",
+      };
+      isSubmitReset();
+      isSubmitCfmPtEteEnd.value = [
+        { category: "End", task: selectCfmPtEteEnd.value },
+      ];
+      isSubmitTimeCfmPtEteEnd.value.rule = selectDurationTime.value;
+      break;
+    case "Start & End":
+      dataToSave = {
+        start: selectCfmPtEteSEStart.value,
+        end: selectCfmPtEteSEEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "processing-time-end-to-end-start-end",
+      };
+      isSubmitReset();
+      isSubmitCfmPtEteSE.value = [
+        { category: "Start", task: selectCfmPtEteSEStart.value },
+        { category: "End", task: selectCfmPtEteSEEnd.value },
+      ];
+      isSubmitTimeCfmPtEteSE.value.rule = selectDurationTime.value;
+      isSubmitShowDataPtEte.value = setSubmitShowDataByStartEnd(
+        selectCfmPtEteSEStart.value,
+        selectCfmPtEteSEEnd.value,
+      );
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds partial processing time rule data.
  * @returns {object} The rule data to submit.
  */
 function getPartialProcessingTimeData() {
-    let dataToSave;
-    switch (selectedActSeqFromTo.value) {
-        case 'From':
-            dataToSave = {
-                task: selectCfmPtPStart.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'processing-time-partial-starts-with',
-            };
-            isSubmitReset();
-            isSubmitCfmPtPStart.value = [{ category: 'From', task: selectCfmPtPStart.value }];
-            isSubmitTimeCfmPtPStart.value.rule = selectDurationTime.value;
-            break;
-        case 'To':
-            dataToSave = {
-                task: selectCfmPtPEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'processing-time-partial-ends-with',
-            };
-            isSubmitReset();
-            isSubmitCfmPtPEnd.value = [{ category: 'To', task: selectCfmPtPEnd.value }];
-            isSubmitTimeCfmPtPEnd.value.rule = selectDurationTime.value;
-            break;
-        case 'From & To':
-            dataToSave = {
-                start: selectCfmPtPSEStart.value ? selectCfmPtPSEStart.value : activityRadioData.value.task[0],
-                end: selectCfmPtPSEEnd.value ? selectCfmPtPSEEnd.value : activityRadioData.value.task[activityRadioData.value.task.length - 1],
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'processing-time-partial-start-end',
-            };
-            isSubmitReset();
-            isSubmitCfmPtPSE.value = [
-                { category: 'From', task: selectCfmPtPSEStart.value },
-                { category: 'To', task: selectCfmPtPSEEnd.value },
-            ];
-            isSubmitTimeCfmPtPSE.value.rule = selectDurationTime.value;
-            isSubmitShowDataPtP.value = setSubmitShowDataByStartEnd(selectCfmPtPSEStart.value, selectCfmPtPSEEnd.value);
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedActSeqFromTo.value) {
+    case "From":
+      dataToSave = {
+        task: selectCfmPtPStart.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "processing-time-partial-starts-with",
+      };
+      isSubmitReset();
+      isSubmitCfmPtPStart.value = [
+        { category: "From", task: selectCfmPtPStart.value },
+      ];
+      isSubmitTimeCfmPtPStart.value.rule = selectDurationTime.value;
+      break;
+    case "To":
+      dataToSave = {
+        task: selectCfmPtPEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "processing-time-partial-ends-with",
+      };
+      isSubmitReset();
+      isSubmitCfmPtPEnd.value = [
+        { category: "To", task: selectCfmPtPEnd.value },
+      ];
+      isSubmitTimeCfmPtPEnd.value.rule = selectDurationTime.value;
+      break;
+    case "From & To":
+      dataToSave = {
+        start: selectCfmPtPSEStart.value
+          ? selectCfmPtPSEStart.value
+          : activityRadioData.value.task[0],
+        end: selectCfmPtPSEEnd.value
+          ? selectCfmPtPSEEnd.value
+          : activityRadioData.value.task[
+              activityRadioData.value.task.length - 1
+            ],
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "processing-time-partial-start-end",
+      };
+      isSubmitReset();
+      isSubmitCfmPtPSE.value = [
+        { category: "From", task: selectCfmPtPSEStart.value },
+        { category: "To", task: selectCfmPtPSEEnd.value },
+      ];
+      isSubmitTimeCfmPtPSE.value.rule = selectDurationTime.value;
+      isSubmitShowDataPtP.value = setSubmitShowDataByStartEnd(
+        selectCfmPtPSEStart.value,
+        selectCfmPtPSEEnd.value,
+      );
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds the data payload for the 'Waiting time' rule.
  * @returns {object} The rule data to submit.
  */
 function getWaitingTimeData() {
-    let dataToSave;
-    switch (selectedProcessScope.value) {
-        case 'End to end':
-            dataToSave = getEndToEndWaitingTimeData();
-            break;
-        case 'Partial':
-            dataToSave = getPartialWaitingTimeData();
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedProcessScope.value) {
+    case "End to end":
+      dataToSave = getEndToEndWaitingTimeData();
+      break;
+    case "Partial":
+      dataToSave = getPartialWaitingTimeData();
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds end-to-end waiting time rule data.
  * @returns {object} The rule data to submit.
  */
 function getEndToEndWaitingTimeData() {
-    let dataToSave;
-    switch (selectedActSeqMore.value) {
-        case 'All':
-            dataToSave = {
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'waiting-time-end-to-end-whole',
-            };
-            isSubmitReset();
-            isSubmitTimeCfmWtEteAll.value.rule = selectDurationTime.value;
-            break;
-        case 'Start':
-            dataToSave = {
-                task: selectCfmWtEteStart.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'waiting-time-end-to-end-starts-with',
-            };
-            isSubmitReset();
-            isSubmitCfmWtEteStart.value = [{ category: 'Start', task: selectCfmWtEteStart.value }];
-            isSubmitTimeCfmWtEteStart.value.rule = selectDurationTime.value;
-            break;
-        case 'End':
-            dataToSave = {
-                task: selectCfmWtEteEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'waiting-time-end-to-end-ends-with',
-            };
-            isSubmitReset();
-            isSubmitCfmWtEteEnd.value = [{ category: 'End', task: selectCfmWtEteEnd.value }];
-            isSubmitTimeCfmWtEteEnd.value.rule = selectDurationTime.value;
-            break;
-        case 'Start & End':
-            dataToSave = {
-                start: selectCfmWtEteSEStart.value,
-                end: selectCfmWtEteSEEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'waiting-time-end-to-end-start-end',
-            };
-            isSubmitReset();
-            isSubmitCfmWtEteSE.value = [
-                { category: 'Start', task: selectCfmWtEteSEStart.value },
-                { category: 'End', task: selectCfmWtEteSEEnd.value },
-            ];
-            isSubmitTimeCfmWtEteSE.value.rule = selectDurationTime.value;
-            isSubmitShowDataWtEte.value = setSubmitShowDataByStartEnd(selectCfmWtEteSEStart.value, selectCfmWtEteSEEnd.value);
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedActSeqMore.value) {
+    case "All":
+      dataToSave = {
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "waiting-time-end-to-end-whole",
+      };
+      isSubmitReset();
+      isSubmitTimeCfmWtEteAll.value.rule = selectDurationTime.value;
+      break;
+    case "Start":
+      dataToSave = {
+        task: selectCfmWtEteStart.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "waiting-time-end-to-end-starts-with",
+      };
+      isSubmitReset();
+      isSubmitCfmWtEteStart.value = [
+        { category: "Start", task: selectCfmWtEteStart.value },
+      ];
+      isSubmitTimeCfmWtEteStart.value.rule = selectDurationTime.value;
+      break;
+    case "End":
+      dataToSave = {
+        task: selectCfmWtEteEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "waiting-time-end-to-end-ends-with",
+      };
+      isSubmitReset();
+      isSubmitCfmWtEteEnd.value = [
+        { category: "End", task: selectCfmWtEteEnd.value },
+      ];
+      isSubmitTimeCfmWtEteEnd.value.rule = selectDurationTime.value;
+      break;
+    case "Start & End":
+      dataToSave = {
+        start: selectCfmWtEteSEStart.value,
+        end: selectCfmWtEteSEEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "waiting-time-end-to-end-start-end",
+      };
+      isSubmitReset();
+      isSubmitCfmWtEteSE.value = [
+        { category: "Start", task: selectCfmWtEteSEStart.value },
+        { category: "End", task: selectCfmWtEteSEEnd.value },
+      ];
+      isSubmitTimeCfmWtEteSE.value.rule = selectDurationTime.value;
+      isSubmitShowDataWtEte.value = setSubmitShowDataByStartEnd(
+        selectCfmWtEteSEStart.value,
+        selectCfmWtEteSEEnd.value,
+      );
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds partial waiting time rule data.
  * @returns {object} The rule data to submit.
  */
 function getPartialWaitingTimeData() {
-    let dataToSave;
-    switch (selectedActSeqFromTo.value) {
-        case 'From':
-            dataToSave = {
-                task: selectCfmWtPStart.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'waiting-time-partial-starts-with',
-            };
-            isSubmitReset();
-            isSubmitCfmWtPStart.value = [{ category: 'From', task: selectCfmWtPStart.value }];
-            isSubmitTimeCfmWtPStart.value.rule = selectDurationTime.value;
-            break;
-        case 'To':
-            dataToSave = {
-                task: selectCfmWtPEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'waiting-time-partial-ends-with',
-            };
-            isSubmitReset();
-            isSubmitCfmWtPEnd.value = [{ category: 'To', task: selectCfmWtPEnd.value }];
-            isSubmitTimeCfmWtPEnd.value.rule = selectDurationTime.value;
-            break;
-        case 'From & To':
-            dataToSave = {
-                start: selectCfmWtPSEStart.value,
-                end: selectCfmWtPSEEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'waiting-time-partial-start-end',
-            };
-            isSubmitReset();
-            isSubmitCfmWtPSE.value = [
-                { category: 'From', task: selectCfmWtPSEStart.value },
-                { category: 'To', task: selectCfmWtPSEEnd.value },
-            ];
-            isSubmitTimeCfmWtPSE.value.rule = selectDurationTime.value;
-            isSubmitShowDataWtP.value = setSubmitShowDataByStartEnd(selectCfmWtPSEStart.value, selectCfmWtPSEEnd.value);
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedActSeqFromTo.value) {
+    case "From":
+      dataToSave = {
+        task: selectCfmWtPStart.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "waiting-time-partial-starts-with",
+      };
+      isSubmitReset();
+      isSubmitCfmWtPStart.value = [
+        { category: "From", task: selectCfmWtPStart.value },
+      ];
+      isSubmitTimeCfmWtPStart.value.rule = selectDurationTime.value;
+      break;
+    case "To":
+      dataToSave = {
+        task: selectCfmWtPEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "waiting-time-partial-ends-with",
+      };
+      isSubmitReset();
+      isSubmitCfmWtPEnd.value = [
+        { category: "To", task: selectCfmWtPEnd.value },
+      ];
+      isSubmitTimeCfmWtPEnd.value.rule = selectDurationTime.value;
+      break;
+    case "From & To":
+      dataToSave = {
+        start: selectCfmWtPSEStart.value,
+        end: selectCfmWtPSEEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "waiting-time-partial-start-end",
+      };
+      isSubmitReset();
+      isSubmitCfmWtPSE.value = [
+        { category: "From", task: selectCfmWtPSEStart.value },
+        { category: "To", task: selectCfmWtPSEEnd.value },
+      ];
+      isSubmitTimeCfmWtPSE.value.rule = selectDurationTime.value;
+      isSubmitShowDataWtP.value = setSubmitShowDataByStartEnd(
+        selectCfmWtPSEStart.value,
+        selectCfmWtPSEEnd.value,
+      );
+      break;
+  }
+  return dataToSave;
 }
 
 /** Builds the data payload for the 'Cycle time' rule.
  * @returns {object} The rule data to submit.
  */
 function getCycleTimeData() {
-    let dataToSave;
-    switch (selectedActSeqMore.value) {
-        case 'All':
-            dataToSave = {
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'cycle-time-end-to-end-whole',
-            };
-            isSubmitReset();
-            isSubmitTimeCfmCtEteAll.value.rule = selectDurationTime.value;
-            break;
-        case 'Start':
-            dataToSave = {
-                task: selectCfmCtEteStart.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'cycle-time-end-to-end-starts-with',
-            };
-            isSubmitReset();
-            isSubmitCfmCtEteStart.value = [{ category: 'Start', task: selectCfmCtEteStart.value }];
-            isSubmitTimeCfmCtEteStart.value.rule = selectDurationTime.value;
-            break;
-        case 'End':
-            dataToSave = {
-                task: selectCfmCtEteEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'cycle-time-end-to-end-ends-with',
-            };
-            isSubmitReset();
-            isSubmitCfmCtEteEnd.value = [{ category: 'End', task: selectCfmCtEteEnd.value }];
-            isSubmitTimeCfmCtEteEnd.value.rule = selectDurationTime.value;
-            break;
-        case 'Start & End':
-            dataToSave = {
-                start: selectCfmCtEteSEStart.value,
-                end: selectCfmCtEteSEEnd.value,
-                min: selectDurationTime.value.min,
-                max: selectDurationTime.value.max,
-                type: 'cycle-time-end-to-end-start-end',
-            };
-            isSubmitReset();
-            isSubmitCfmCtEteSE.value = [
-                { category: 'Start', task: selectCfmCtEteSEStart.value },
-                { category: 'End', task: selectCfmCtEteSEEnd.value },
-            ];
-            isSubmitTimeCfmCtEteSE.value.rule = selectDurationTime.value;
-            isSubmitShowDataCt.value = setSubmitShowDataByStartEnd(selectCfmCtEteSEStart.value, selectCfmCtEteSEEnd.value);
-            break;
-    }
-    return dataToSave;
+  let dataToSave;
+  switch (selectedActSeqMore.value) {
+    case "All":
+      dataToSave = {
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "cycle-time-end-to-end-whole",
+      };
+      isSubmitReset();
+      isSubmitTimeCfmCtEteAll.value.rule = selectDurationTime.value;
+      break;
+    case "Start":
+      dataToSave = {
+        task: selectCfmCtEteStart.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "cycle-time-end-to-end-starts-with",
+      };
+      isSubmitReset();
+      isSubmitCfmCtEteStart.value = [
+        { category: "Start", task: selectCfmCtEteStart.value },
+      ];
+      isSubmitTimeCfmCtEteStart.value.rule = selectDurationTime.value;
+      break;
+    case "End":
+      dataToSave = {
+        task: selectCfmCtEteEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "cycle-time-end-to-end-ends-with",
+      };
+      isSubmitReset();
+      isSubmitCfmCtEteEnd.value = [
+        { category: "End", task: selectCfmCtEteEnd.value },
+      ];
+      isSubmitTimeCfmCtEteEnd.value.rule = selectDurationTime.value;
+      break;
+    case "Start & End":
+      dataToSave = {
+        start: selectCfmCtEteSEStart.value,
+        end: selectCfmCtEteSEEnd.value,
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+        type: "cycle-time-end-to-end-start-end",
+      };
+      isSubmitReset();
+      isSubmitCfmCtEteSE.value = [
+        { category: "Start", task: selectCfmCtEteSEStart.value },
+        { category: "End", task: selectCfmCtEteSEEnd.value },
+      ];
+      isSubmitTimeCfmCtEteSE.value.rule = selectDurationTime.value;
+      isSubmitShowDataCt.value = setSubmitShowDataByStartEnd(
+        selectCfmCtEteSEStart.value,
+        selectCfmCtEteSEEnd.value,
+      );
+      break;
+  }
+  return dataToSave;
 }
 
 /**
  * Sets up category-based task selection logic.
  */
 function setTaskByCategoryOnRadioEmitting() {
-    emitter.on('actRadioData', (data) => {
-        const handlers = {
-            'cfmSeqStart': handleCfmSeqStart,
-            'cfmSeqEnd': handleCfmSeqEnd,
-            'cfmPtEteStart': (task) => handleSimpleSelection('selectCfmPtEteStart', task),
-            'cfmPtEteEnd': (task) => handleSimpleSelection('selectCfmPtEteEnd', task),
-            'cfmPtEteSEStart': handleCfmPtEteSEStart,
-            'cfmPtEteSEEnd': handleCfmPtEteSEEnd,
-            'cfmPtPStart': (task) => handleSimpleSelection('selectCfmPtPStart', task),
-            'cfmPtPEnd': (task) => handleSimpleSelection('selectCfmPtPEnd', task),
-            'cfmPtPSEStart': handleCfmPtPSEStart,
-            'cfmPtPSEEnd': handleCfmPtPSEEnd,
-            'cfmWtEteStart': (task) => handleSimpleSelection('selectCfmWtEteStart', task),
-            'cfmWtEteEnd': (task) => handleSimpleSelection('selectCfmWtEteEnd', task),
-            'cfmWtEteSEStart': handleCfmWtEteSEStart,
-            'cfmWtEteSEEnd': handleCfmWtEteSEEnd,
-            'cfmWtPStart': (task) => handleSimpleSelection('selectCfmWtPStart', task),
-            'cfmWtPEnd': (task) => handleSimpleSelection('selectCfmWtPEnd', task),
-            'cfmWtPSEStart': handleCfmWtPSEStart,
-            'cfmWtPSEEnd': handleCfmWtPSEEnd,
-            'cfmCtEteStart': (task) => handleSimpleSelection('selectCfmCtEteStart', task),
-            'cfmCtEteEnd': (task) => handleSimpleSelection('selectCfmCtEteEnd', task),
-            'cfmCtEteSEStart': handleCfmCtEteSEStart,
-            'cfmCtEteSEEnd': handleCfmCtEteSEEnd
-        };
+  emitter.on("actRadioData", (data) => {
+    const handlers = {
+      cfmSeqStart: handleCfmSeqStart,
+      cfmSeqEnd: handleCfmSeqEnd,
+      cfmPtEteStart: (task) =>
+        handleSimpleSelection("selectCfmPtEteStart", task),
+      cfmPtEteEnd: (task) => handleSimpleSelection("selectCfmPtEteEnd", task),
+      cfmPtEteSEStart: handleCfmPtEteSEStart,
+      cfmPtEteSEEnd: handleCfmPtEteSEEnd,
+      cfmPtPStart: (task) => handleSimpleSelection("selectCfmPtPStart", task),
+      cfmPtPEnd: (task) => handleSimpleSelection("selectCfmPtPEnd", task),
+      cfmPtPSEStart: handleCfmPtPSEStart,
+      cfmPtPSEEnd: handleCfmPtPSEEnd,
+      cfmWtEteStart: (task) =>
+        handleSimpleSelection("selectCfmWtEteStart", task),
+      cfmWtEteEnd: (task) => handleSimpleSelection("selectCfmWtEteEnd", task),
+      cfmWtEteSEStart: handleCfmWtEteSEStart,
+      cfmWtEteSEEnd: handleCfmWtEteSEEnd,
+      cfmWtPStart: (task) => handleSimpleSelection("selectCfmWtPStart", task),
+      cfmWtPEnd: (task) => handleSimpleSelection("selectCfmWtPEnd", task),
+      cfmWtPSEStart: handleCfmWtPSEStart,
+      cfmWtPSEEnd: handleCfmWtPSEEnd,
+      cfmCtEteStart: (task) =>
+        handleSimpleSelection("selectCfmCtEteStart", task),
+      cfmCtEteEnd: (task) => handleSimpleSelection("selectCfmCtEteEnd", task),
+      cfmCtEteSEStart: handleCfmCtEteSEStart,
+      cfmCtEteSEEnd: handleCfmCtEteSEEnd,
+    };
 
-        if (handlers[data.category]) {
-            handlers[data.category](data.task);
-        } else if (selectedRuleType.value === 'Activity duration') {
-            selectDurationData.value = [data.task];
-        }
-    });
+    if (handlers[data.category]) {
+      handlers[data.category](data.task);
+    } else if (selectedRuleType.value === "Activity duration") {
+      selectDurationData.value = [data.task];
+    }
+  });
 }
 
 /**
@@ -1252,10 +1351,10 @@ function setTaskByCategoryOnRadioEmitting() {
  * @param {string} task - The selected task.
  */
 function handleCfmSeqStart(task) {
-    if (isStartSelected.value && task !== selectCfmSeqStart.value) {
-        selectCfmSeqEnd.value = null;
-    }
-    selectCfmSeqStart.value = task;
+  if (isStartSelected.value && task !== selectCfmSeqStart.value) {
+    selectCfmSeqEnd.value = null;
+  }
+  selectCfmSeqStart.value = task;
 }
 
 /**
@@ -1263,10 +1362,10 @@ function handleCfmSeqStart(task) {
  * @param {string} task - The selected task.
  */
 function handleCfmSeqEnd(task) {
-    if (isEndSelected.value && task !== selectCfmSeqEnd.value) {
-        selectCfmSeqStart.value = null;
-    }
-    selectCfmSeqEnd.value = task;
+  if (isEndSelected.value && task !== selectCfmSeqEnd.value) {
+    selectCfmSeqStart.value = null;
+  }
+  selectCfmSeqEnd.value = task;
 }
 
 /**
@@ -1275,7 +1374,7 @@ function handleCfmSeqEnd(task) {
  * @param {string} task - The selected task.
  */
 function handleSimpleSelection(field, task) {
-    selectFieldRefs[field].value = task;
+  selectFieldRefs[field].value = task;
 }
 
 /**
@@ -1283,110 +1382,110 @@ function handleSimpleSelection(field, task) {
  * @param {string} task - The selected task.
  */
 function handleCfmPtEteSEStart(task) {
-    if (isStartSelected.value && task !== selectCfmPtEteSEStart.value) {
-        selectCfmPtEteSEEnd.value = null;
-    }
-    selectCfmPtEteSEStart.value = task;
+  if (isStartSelected.value && task !== selectCfmPtEteSEStart.value) {
+    selectCfmPtEteSEEnd.value = null;
+  }
+  selectCfmPtEteSEStart.value = task;
 }
 /**
  * Handles end task for end-to-end processing time.
  * @param {string} task - The selected task.
  */
 function handleCfmPtEteSEEnd(task) {
-    if (isEndSelected.value && task !== selectCfmPtEteSEEnd.value) {
-        selectCfmPtEteSEStart.value = null;
-    }
-    selectCfmPtEteSEEnd.value = task;
+  if (isEndSelected.value && task !== selectCfmPtEteSEEnd.value) {
+    selectCfmPtEteSEStart.value = null;
+  }
+  selectCfmPtEteSEEnd.value = task;
 }
 /**
  * Handles start task for partial processing time.
  * @param {string} task - The selected task.
  */
 function handleCfmPtPSEStart(task) {
-    if (isStartSelected.value && task !== selectCfmPtPSEStart.value) {
-        selectCfmPtPSEEnd.value = null;
-    }
-    selectCfmPtPSEStart.value = task;
+  if (isStartSelected.value && task !== selectCfmPtPSEStart.value) {
+    selectCfmPtPSEEnd.value = null;
+  }
+  selectCfmPtPSEStart.value = task;
 }
 /**
  * Handles end task for partial processing time.
  * @param {string} task - The selected task.
  */
 function handleCfmPtPSEEnd(task) {
-    if (isEndSelected.value && task !== selectCfmPtPSEEnd.value) {
-        selectCfmPtPSEStart.value = null;
-    }
-    selectCfmPtPSEEnd.value = task;
+  if (isEndSelected.value && task !== selectCfmPtPSEEnd.value) {
+    selectCfmPtPSEStart.value = null;
+  }
+  selectCfmPtPSEEnd.value = task;
 }
 /**
  * Handles start task for end-to-end waiting time.
  * @param {string} task - The selected task.
  */
 function handleCfmWtEteSEStart(task) {
-    if (isStartSelected.value && task !== selectCfmWtEteSEStart.value) {
-        selectCfmWtEteSEEnd.value = null;
-    }
-    selectCfmWtEteSEStart.value = task;
+  if (isStartSelected.value && task !== selectCfmWtEteSEStart.value) {
+    selectCfmWtEteSEEnd.value = null;
+  }
+  selectCfmWtEteSEStart.value = task;
 }
 /**
  * Handles end task for end-to-end waiting time.
  * @param {string} task - The selected task.
  */
 function handleCfmWtEteSEEnd(task) {
-    if (isEndSelected.value && task !== selectCfmWtEteSEEnd.value) {
-        selectCfmWtEteSEStart.value = null;
-    }
-    selectCfmWtEteSEEnd.value = task;
+  if (isEndSelected.value && task !== selectCfmWtEteSEEnd.value) {
+    selectCfmWtEteSEStart.value = null;
+  }
+  selectCfmWtEteSEEnd.value = task;
 }
 /**
  * Handles start task for partial waiting time.
  * @param {string} task - The selected task.
  */
 function handleCfmWtPSEStart(task) {
-    if (isStartSelected.value && task !== selectCfmWtPSEStart.value) {
-        selectCfmWtPSEEnd.value = null;
-    }
-    selectCfmWtPSEStart.value = task;
+  if (isStartSelected.value && task !== selectCfmWtPSEStart.value) {
+    selectCfmWtPSEEnd.value = null;
+  }
+  selectCfmWtPSEStart.value = task;
 }
 /**
  * Handles end task for partial waiting time.
  * @param {string} task - The selected task.
  */
 function handleCfmWtPSEEnd(task) {
-    if (isEndSelected.value && task !== selectCfmWtPSEEnd.value) {
-        selectCfmWtPSEStart.value = null;
-    }
-    selectCfmWtPSEEnd.value = task;
+  if (isEndSelected.value && task !== selectCfmWtPSEEnd.value) {
+    selectCfmWtPSEStart.value = null;
+  }
+  selectCfmWtPSEEnd.value = task;
 }
 /**
  * Handles start task for end-to-end cycle time.
  * @param {string} task - The selected task.
  */
 function handleCfmCtEteSEStart(task) {
-    if (isStartSelected.value && task !== selectCfmCtEteSEStart.value) {
-        selectCfmCtEteSEEnd.value = null;
-    }
-    selectCfmCtEteSEStart.value = task;
+  if (isStartSelected.value && task !== selectCfmCtEteSEStart.value) {
+    selectCfmCtEteSEEnd.value = null;
+  }
+  selectCfmCtEteSEStart.value = task;
 }
 /**
  * Handles end task for end-to-end cycle time.
  * @param {string} task - The selected task.
  */
 function handleCfmCtEteSEEnd(task) {
-    if (isEndSelected.value && task !== selectCfmCtEteSEEnd.value) {
-        selectCfmCtEteSEStart.value = null;
-    }
-    selectCfmCtEteSEEnd.value = task;
+  if (isEndSelected.value && task !== selectCfmCtEteSEEnd.value) {
+    selectCfmCtEteSEStart.value = null;
+  }
+  selectCfmCtEteSEEnd.value = task;
 }
 
 /** Sets task data when the list sequence emits a change. */
-function setTaskByCategoryOnListSeqEmitting(){
-  emitter.on('getListSequence', (data) => {
+function setTaskByCategoryOnListSeqEmitting() {
+  emitter.on("getListSequence", (data) => {
     switch (data.category) {
-      case 'cfmSeqDirectly':
+      case "cfmSeqDirectly":
         selectCfmSeqDirectly.value = data.task;
         break;
-      case 'cfmSeqEventually':
+      case "cfmSeqEventually":
         selectCfmSeqEventually.value = data.task;
         break;
       default:
@@ -1399,7 +1498,7 @@ function setTaskByCategoryOnListSeqEmitting(){
  * @returns {boolean} Whether the button should be disabled.
  */
 function checkHaveActivity() {
-  return !(selectConformanceTask.value?.length);
+  return !selectConformanceTask.value?.length;
 }
 /** Checks if the 'Activity duration' rule has valid selections.
  * @returns {boolean} Whether the button should be disabled.
@@ -1412,14 +1511,17 @@ function checkActivityDuration() {
  * @returns {boolean} Whether the button should be disabled.
  */
 function checkActivitySequence() {
-    switch (selectedActivitySequence.value) {
-        case 'Start & End':
-            return checkStartAndEndSequence(selectCfmSeqStart.value, selectCfmSeqEnd.value);
-        case 'Sequence':
-            return checkSequenceMode(selectedMode.value);
-        default:
-            return true;
-    }
+  switch (selectedActivitySequence.value) {
+    case "Start & End":
+      return checkStartAndEndSequence(
+        selectCfmSeqStart.value,
+        selectCfmSeqEnd.value,
+      );
+    case "Sequence":
+      return checkSequenceMode(selectedMode.value);
+    default:
+      return true;
+  }
 }
 /**
  * Checks the Start & End activity sequence.
@@ -1428,7 +1530,7 @@ function checkActivitySequence() {
  * @returns {boolean} Whether the button should be disabled.
  */
 function checkStartAndEndSequence(start, end) {
-    return !(start && end);
+  return !(start && end);
 }
 
 /** Checks if the 'Processing time' rule has valid selections.
@@ -1437,14 +1539,14 @@ function checkStartAndEndSequence(start, end) {
 function checkProcessingTime() {
   let disabled = true;
   switch (selectedProcessScope.value) {
-      case 'End to end':
-          disabled = checkEndToEnd();
-          break;
-      case 'Partial':
-          disabled = checkPartial();
-          break;
-      default:
-          break;
+    case "End to end":
+      disabled = checkEndToEnd();
+      break;
+    case "Partial":
+      disabled = checkPartial();
+      break;
+    default:
+      break;
   }
   return disabled;
 }
@@ -1454,23 +1556,23 @@ function checkProcessingTime() {
 function checkEndToEnd() {
   let disabled = true;
   switch (selectedActSeqMore.value) {
-      case 'All':
-          disabled = false;
-          break;
-      case 'Start':
-          disabled = !selectCfmPtEteStart.value;
-          break;
-      case 'End':
-          disabled = !selectCfmPtEteEnd.value;
-          break;
-      case 'Start & End':
-          disabled = checkStartAndEnd(
-              selectCfmPtEteSEStart.value,
-              selectCfmPtEteSEEnd.value
-          );
-          break;
-      default:
-          break;
+    case "All":
+      disabled = false;
+      break;
+    case "Start":
+      disabled = !selectCfmPtEteStart.value;
+      break;
+    case "End":
+      disabled = !selectCfmPtEteEnd.value;
+      break;
+    case "Start & End":
+      disabled = checkStartAndEnd(
+        selectCfmPtEteSEStart.value,
+        selectCfmPtEteSEEnd.value,
+      );
+      break;
+    default:
+      break;
   }
   return disabled;
 }
@@ -1480,108 +1582,108 @@ function checkEndToEnd() {
 function checkPartial() {
   let disabled = true;
   switch (selectedActSeqFromTo.value) {
-      case 'From':
-          disabled = !selectCfmPtPStart.value;
-          break;
-      case 'To':
-          disabled = !selectCfmPtPEnd.value;
-          break;
-      case 'From & To':
-          disabled = checkStartAndEnd(
-              selectCfmPtPSEStart.value,
-              selectCfmPtPSEEnd.value
-          );
-          break;
-      default:
-          break;
+    case "From":
+      disabled = !selectCfmPtPStart.value;
+      break;
+    case "To":
+      disabled = !selectCfmPtPEnd.value;
+      break;
+    case "From & To":
+      disabled = checkStartAndEnd(
+        selectCfmPtPSEStart.value,
+        selectCfmPtPSEEnd.value,
+      );
+      break;
+    default:
+      break;
   }
   return disabled;
 }
 function checkWaitingTime() {
   let disabled = true;
   switch (selectedProcessScope.value) {
-      case 'End to end':
-          disabled = checkEndToEndWaiting();
-          break;
-      case 'Partial':
-          disabled = checkPartialWaiting();
-          break;
-      default:
-          break;
+    case "End to end":
+      disabled = checkEndToEndWaiting();
+      break;
+    case "Partial":
+      disabled = checkPartialWaiting();
+      break;
+    default:
+      break;
   }
   return disabled;
 }
 
 function checkEndToEndWaiting() {
-    let disabled = true;
-    switch (selectedActSeqMore.value) {
-        case 'Start':
-            disabled = !selectCfmWtEteStart.value;
-            break;
-        case 'End':
-            disabled = !selectCfmWtEteEnd.value;
-            break;
-        case 'Start & End':
-            disabled = selectCfmWtEteSEStart.value !== selectCfmWtEteSEEnd.value;
-            break;
-        default:
-            break;
-    }
-    return disabled;
+  let disabled = true;
+  switch (selectedActSeqMore.value) {
+    case "Start":
+      disabled = !selectCfmWtEteStart.value;
+      break;
+    case "End":
+      disabled = !selectCfmWtEteEnd.value;
+      break;
+    case "Start & End":
+      disabled = selectCfmWtEteSEStart.value !== selectCfmWtEteSEEnd.value;
+      break;
+    default:
+      break;
+  }
+  return disabled;
 }
 function checkPartialWaiting() {
-    let disabled = true;
-    switch (selectedActSeqFromTo.value) {
-        case 'From':
-            disabled = !selectCfmWtPStart.value;
-            break;
-        case 'To':
-            disabled = !selectCfmWtPEnd.value;
-            break;
-        case 'From & To':
-            disabled = checkStartAndEnd(
-                selectCfmWtPSEStart.value,
-                selectCfmWtPSEEnd.value
-            );
-            break;
-        default:
-            break;
-    }
-    return disabled;
+  let disabled = true;
+  switch (selectedActSeqFromTo.value) {
+    case "From":
+      disabled = !selectCfmWtPStart.value;
+      break;
+    case "To":
+      disabled = !selectCfmWtPEnd.value;
+      break;
+    case "From & To":
+      disabled = checkStartAndEnd(
+        selectCfmWtPSEStart.value,
+        selectCfmWtPSEEnd.value,
+      );
+      break;
+    default:
+      break;
+  }
+  return disabled;
 }
 function checkCycleTime() {
   let disabled = true;
   switch (selectedActSeqMore.value) {
-      case 'All':
-          disabled = false;
-          break;
-      case 'Start':
-          disabled = !selectCfmCtEteStart.value;
-          break;
-      case 'End':
-          disabled = !selectCfmCtEteEnd.value;
-          break;
-      case 'Start & End':
-          disabled = checkStartAndEnd(
-              selectCfmCtEteSEStart.value,
-              selectCfmCtEteSEEnd.value
-          );
-          break;
-      default:
-          break;
+    case "All":
+      disabled = false;
+      break;
+    case "Start":
+      disabled = !selectCfmCtEteStart.value;
+      break;
+    case "End":
+      disabled = !selectCfmCtEteEnd.value;
+      break;
+    case "Start & End":
+      disabled = checkStartAndEnd(
+        selectCfmCtEteSEStart.value,
+        selectCfmCtEteSEEnd.value,
+      );
+      break;
+    default:
+      break;
   }
   return disabled;
 }
 function checkStartAndEnd(start, end) {
-    return !isAlreadySubmit.value
-        ? !(start && end)
-        : start !== end;
+  return !isAlreadySubmit.value ? !(start && end) : start !== end;
 }
 
 // created() logic
-isShowBarOpen.value = !(conformanceLogCreateCheckId.value || conformanceFilterCreateCheckId.value);
+isShowBarOpen.value = !(
+  conformanceLogCreateCheckId.value || conformanceFilterCreateCheckId.value
+);
 // Result of list selection
-emitter.on('actListData', (data) => {
+emitter.on("actListData", (data) => {
   selectConformanceTask.value = data;
 });
 
@@ -1589,34 +1691,35 @@ setTaskByCategoryOnRadioEmitting();
 setTaskByCategoryOnListSeqEmitting();
 
 // Clear data when radio selection changes
-emitter.on('isRadioChange', (data) => {
-  if(data) {
+emitter.on("isRadioChange", (data) => {
+  if (data) {
     selectTimeReset();
-    selectDurationTime.value = { min: 0, max: 0};
-  };
+    selectDurationTime.value = { min: 0, max: 0 };
+  }
 });
-emitter.on('isRadioSeqChange', (data) => {
-  if(data) {
+emitter.on("isRadioSeqChange", (data) => {
+  if (data) {
     selectTimeReset();
-  };
+  }
 });
-emitter.on('isRadioProcessScopeChange', (data) => {
-  if(data) {
+emitter.on("isRadioProcessScopeChange", (data) => {
+  if (data) {
     selectTimeReset();
-    selectDurationTime.value = { min: 0, max: 0};
-  };
+    selectDurationTime.value = { min: 0, max: 0 };
+  }
 });
-emitter.on('isRadioActSeqMoreChange', (data) => {
-  if(data) {
+emitter.on("isRadioActSeqMoreChange", (data) => {
+  if (data) {
     selectTimeReset();
-    if(selectedActSeqMore.value !== 'All') selectDurationTime.value = { min: 0, max: 0};
-  };
+    if (selectedActSeqMore.value !== "All")
+      selectDurationTime.value = { min: 0, max: 0 };
+  }
 });
-emitter.on('isRadioActSeqFromToChange', (data) => {
-  if(data) {
+emitter.on("isRadioActSeqFromToChange", (data) => {
+  if (data) {
     selectTimeReset();
-    selectDurationTime.value = { min: 0, max: 0};
-  };
+    selectDurationTime.value = { min: 0, max: 0 };
+  }
 });
 
 // beforeUnmount
@@ -1626,7 +1729,7 @@ onBeforeUnmount(() => {
 });
 </script>
 <style>
-.text-shadow{
+.text-shadow {
   text-shadow: 1.5px 1px 8px black;
 }
 </style>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
index 8c0bca3..2e1f018 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
@@ -1,10 +1,30 @@
 <template>
-  <div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
+  <div
+    class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
+  >
     <p class="h2 pl-2 border-b mb-3">Activity list</p>
-    <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]" id="cyp-conformance-list-checkbox">
-      <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index" :title="act">
-        <Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" @change="actListData"/>
-        <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
+    <div
+      class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]"
+      id="cyp-conformance-list-checkbox"
+    >
+      <div
+        class="flex items-center w-[166px]"
+        v-for="(act, index) in sortData"
+        :key="index"
+        :title="act"
+      >
+        <Checkbox
+          v-model="actList"
+          :inputId="index.toString()"
+          name="actList"
+          :value="act"
+          @change="actListData"
+        />
+        <label
+          :for="index"
+          class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden"
+          >{{ act }}</label
+        >
       </div>
     </div>
   </div>
@@ -20,30 +40,37 @@
  *   Checkbox-based activity list for conformance checking input.
  */
 
-import { ref, watch } from 'vue';
-import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
-import emitter from '@/utils/emitter';
+import { ref, watch } from "vue";
+import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
+import emitter from "@/utils/emitter";
 
-const props = defineProps(['data', 'select']);
+const props = defineProps(["data", "select"]);
 
 const sortData = ref([]);
 const actList = ref(props.select);
 
-watch(() => props.data, (newValue) => {
-  sortData.value = sortNumEngZhtw(newValue);
-}, { immediate: true });
+watch(
+  () => props.data,
+  (newValue) => {
+    sortData.value = sortNumEngZhtw(newValue);
+  },
+  { immediate: true },
+);
 
-watch(() => props.select, (newValue) => {
-  actList.value = newValue;
-});
+watch(
+  () => props.select,
+  (newValue) => {
+    actList.value = newValue;
+  },
+);
 
 /** Emits the selected activities list via the event bus. */
 function actListData() {
-  emitter.emit('actListData', actList.value);
+  emitter.emit("actListData", actList.value);
 }
 
 // created
-emitter.on('reset', (data) => {
+emitter.on("reset", (data) => {
   actList.value = data;
 });
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
index 844c61f..15edc99 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
@@ -1,10 +1,29 @@
 <template>
-  <div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
+  <div
+    class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
+  >
     <p class="h2 pl-2 border-b mb-3">{{ title }}</p>
-    <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]">
-      <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index" :title="act">
-        <RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" />
-        <label :for="index + act" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
+    <div
+      class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]"
+    >
+      <div
+        class="flex items-center w-[166px]"
+        v-for="(act, index) in sortData"
+        :key="index"
+        :title="act"
+      >
+        <RadioButton
+          v-model="selectedRadio"
+          :inputId="index + act"
+          :name="select"
+          :value="act"
+          @change="actRadioData"
+        />
+        <label
+          :for="index + act"
+          class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden"
+          >{{ act }}</label
+        >
       </div>
     </div>
   </div>
@@ -22,13 +41,20 @@
  *   start/end activity input.
  */
 
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch } from "vue";
 import { useConformanceInputStore } from "@/stores/conformanceInput";
-import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
-import emitter from '@/utils/emitter';
+import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
+import emitter from "@/utils/emitter";
 
-const props = defineProps(['title', 'select', 'data', 'category', 'task', 'isSubmit']);
-const emit = defineEmits(['selected-task']);
+const props = defineProps([
+  "title",
+  "select",
+  "data",
+  "category",
+  "task",
+  "isSubmit",
+]);
+const emit = defineEmits(["selected-task"]);
 
 const conformanceInputStore = useConformanceInputStore();
 
@@ -36,13 +62,20 @@ const sortData = ref([]);
 const localSelect = ref(null);
 const selectedRadio = ref(null);
 
-watch(() => props.data, (newValue) => {
-  sortData.value = sortNumEngZhtw(newValue);
-}, { immediate: true });
+watch(
+  () => props.data,
+  (newValue) => {
+    sortData.value = sortNumEngZhtw(newValue);
+  },
+  { immediate: true },
+);
 
-watch(() => props.task, (newValue) => {
-  selectedRadio.value = newValue;
-});
+watch(
+  () => props.task,
+  (newValue) => {
+    selectedRadio.value = newValue;
+  },
+);
 
 const inputActivityRadioData = computed(() => ({
   category: props.category,
@@ -52,22 +85,27 @@ const inputActivityRadioData = computed(() => ({
 /** Emits the selected activity via event bus and updates the store. */
 function actRadioData() {
   localSelect.value = null;
-  emitter.emit('actRadioData', inputActivityRadioData.value);
-  emit('selected-task', selectedRadio.value);
-  conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task);
+  emitter.emit("actRadioData", inputActivityRadioData.value);
+  emit("selected-task", selectedRadio.value);
+  conformanceInputStore.setActivityRadioStartEndData(
+    inputActivityRadioData.value.task,
+  );
 }
 
 /** Sets the global activity radio data state in the conformance input store. */
 function setGlobalActivityRadioDataState() {
   //this.title: value might be "From" or "To"
-  conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task, props.title);
+  conformanceInputStore.setActivityRadioStartEndData(
+    inputActivityRadioData.value.task,
+    props.title,
+  );
 }
 
 // created
 sortNumEngZhtw(sortData.value);
 localSelect.value = props.isSubmit ? props.select : null;
 selectedRadio.value = localSelect.value;
-emitter.on('reset', (data) => {
+emitter.on("reset", (data) => {
   selectedRadio.value = data;
 });
 setGlobalActivityRadioDataState();
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
index c4a6ca5..b719b9b 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
@@ -1,38 +1,99 @@
 <template>
   <div class="h-full w-full flex justify-between items-center">
     <!-- Activity List -->
-    <div class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
+    <div
+      class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
+    >
       <p class="h2 pl-2 border-b mb-3">Activity list</p>
       <div class="h-[calc(100%_-_56px)]">
-        <Draggable :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" :sort="false" @end="onEnd" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
+        <Draggable
+          :list="datadata"
+          :group="{ name: 'activity', pull: 'clone' }"
+          itemKey="name"
+          animation="300"
+          :fallbackTolerance="5"
+          :forceFallback="true"
+          :ghostClass="'ghostSelected'"
+          :dragClass="'dragSelected'"
+          :sort="false"
+          @end="onEnd"
+          class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar"
+        >
           <template #item="{ element, index }">
-            <div :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)" :title="element">
-              <span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
+            <div
+              :class="
+                listSequence.includes(element)
+                  ? 'border-primary text-primary'
+                  : ''
+              "
+              class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20"
+              @dblclick="moveActItem(index, element)"
+              :title="element"
+            >
+              <span
+                class="whitespace-nowrap break-keep text-ellipsis overflow-hidden"
+                >{{ element }}</span
+              >
             </div>
           </template>
         </Draggable>
       </div>
     </div>
     <!-- sequence -->
-    <div class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2 text-sm">
+    <div
+      class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2 text-sm"
+    >
       <p class="h2 border-b border-500 mb-3">Sequence</p>
       <!-- No Data -->
-      <div v-if="listSequence && listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
-        <p class="text-neutral-500">Please drag and drop at least two activities here and sort.</p>
+      <div
+        v-if="listSequence && listSequence.length === 0"
+        class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute"
+      >
+        <p class="text-neutral-500">
+          Please drag and drop at least two activities here and sort.
+        </p>
       </div>
       <!-- Have Data -->
-      <div class="m-auto w-full  h-[calc(100%_-_56px)]">
-        <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center">
-          <draggable class="h-full" :group="{name: 'activity'}" :list="listSequence" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()" :ghostClass="'!opacity-0'">
+      <div class="m-auto w-full h-[calc(100%_-_56px)]">
+        <div
+          class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center"
+        >
+          <draggable
+            class="h-full"
+            :group="{ name: 'activity' }"
+            :list="listSequence"
+            itemKey="name"
+            animation="300"
+            :forceFallback="true"
+            :dragClass="'dragSelected'"
+            :fallbackTolerance="5"
+            @start="onStart"
+            @end="onEnd"
+            :component-data="getComponentData()"
+            :ghostClass="'!opacity-0'"
+          >
             <template #item="{ element, index }">
               <div :title="element">
                 <div class="flex justify-center items-center">
-                  <div class="w-full p-2 border rounded bg-neutral-10  cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
+                  <div
+                    class="w-full p-2 border rounded bg-neutral-10 cursor-pointer hover:bg-primary/20"
+                    @dblclick="moveSeqItem(index, element)"
+                  >
                     <span>{{ element }}</span>
                   </div>
-                  <span class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger" @click.stop.native="moveSeqItem(index, element)">close</span>
+                  <span
+                    class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger"
+                    @click.stop.native="moveSeqItem(index, element)"
+                    >close</span
+                  >
                 </div>
-                <span v-show="index !== listSequence.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"></span>
+                <span
+                  v-show="
+                    index !== listSequence.length - 1 &&
+                    index !== lastItemIndex - 1
+                  "
+                  class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"
+                ></span>
               </div>
             </template>
           </draggable>
@@ -54,11 +115,11 @@
  *   conformance rule configuration.
  */
 
-import { ref, computed } from 'vue';
-import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
-import emitter from '@/utils/emitter';
+import { ref, computed } from "vue";
+import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
+import emitter from "@/utils/emitter";
 
-const props = defineProps(['data', 'listSeq', 'isSubmit', 'category']);
+const props = defineProps(["data", "listSeq", "isSubmit", "category"]);
 
 const listSequence = ref([]);
 const lastItemIndex = ref(null);
@@ -67,7 +128,7 @@ const isSelect = ref(true);
 const datadata = computed(() => {
   // Sort the Activity List
   let newData;
-  if(props.data !== null) {
+  if (props.data !== null) {
     newData = JSON.parse(JSON.stringify(props.data));
     sortNumEngZhtw(newData);
   }
@@ -96,7 +157,7 @@ function moveSeqItem(index, element) {
  * get listSequence
  */
 function getComponentData() {
-  emitter.emit('getListSequence', {
+  emitter.emit("getListSequence", {
     category: props.category,
     task: listSequence.value,
   });
@@ -107,13 +168,13 @@ function getComponentData() {
  */
 function onStart(evt) {
   const lastChild = evt.to.lastChild.lastChild;
-  lastChild.style.display = 'none';
+  lastChild.style.display = "none";
   // Hide the dragged element at its original position
   const originalElement = evt.item;
-  originalElement.style.display = 'none';
+  originalElement.style.display = "none";
   // When dragging the last element, hide the arrow of the second-to-last element
   const listIndex = listSequence.value.length - 1;
-  if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
+  if (evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
 }
 
 /**
@@ -122,12 +183,12 @@ function onStart(evt) {
 function onEnd(evt) {
   // Show the dragged element
   const originalElement = evt.item;
-  originalElement.style.display = '';
+  originalElement.style.display = "";
   // Show the arrow after drag ends, except for the last element
   const lastChild = evt.item.lastChild;
   const listIndex = listSequence.value.length - 1;
   if (evt.oldIndex !== listIndex) {
-    lastChild.style.display = '';
+    lastChild.style.display = "";
   }
   // Reset: hide the second-to-last element's arrow when dragging the last element
   lastItemIndex.value = null;
@@ -136,16 +197,16 @@ function onEnd(evt) {
 // created
 const newlist = JSON.parse(JSON.stringify(props.listSeq));
 listSequence.value = props.isSubmit ? newlist : [];
-emitter.on('reset', (data) => {
+emitter.on("reset", (data) => {
   listSequence.value = [];
 });
 </script>
 <style scoped>
 @reference "../../../../assets/tailwind.css";
 .ghostSelected {
-  @apply bg-primary/20
+  @apply bg-primary/20;
 }
 .dragSelected {
-  @apply !opacity-100
+  @apply !opacity-100;
 }
 </style>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
index 5ab79f9..48813a1 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
@@ -1,50 +1,117 @@
 <template>
-  <section class="space-y-2  text-sm">
+  <section class="space-y-2 text-sm">
     <!-- Rule Type -->
     <div id="cyp-conformance-type-radio">
       <p class="h2">Rule Type</p>
       <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio"/>
+        <RadioButton
+          v-model="selectedRuleType"
+          :inputId="rule.id + rule.name"
+          name="ruleType"
+          :value="rule.name"
+          @change="changeRadio"
+        />
         <label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
       </div>
     </div>
     <!-- Activity Sequence (2 item) -->
-    <div v-show="selectedRuleType === 'Activity sequence'" id="cyp-conformance-sequence-radio">
+    <div
+      v-show="selectedRuleType === 'Activity sequence'"
+      id="cyp-conformance-sequence-radio"
+    >
       <p class="h2">Activity Sequence</p>
       <div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeRadioSeq"/>
+        <RadioButton
+          v-model="selectedActivitySequence"
+          :inputId="act.id + act.name"
+          name="activitySequence"
+          :value="act.name"
+          @change="changeRadioSeq"
+        />
         <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
       </div>
     </div>
     <!-- Mode -->
-    <div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" id="cyp-conformance-Mode-radio">
+    <div
+      v-show="
+        selectedRuleType === 'Activity sequence' &&
+        selectedActivitySequence === 'Sequence'
+      "
+      id="cyp-conformance-Mode-radio"
+    >
       <p class="h2">Mode</p>
       <div v-for="mode in mode" :key="mode.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedMode" :inputId="mode.id + mode.name" name="mode" :value="mode.name" />
+        <RadioButton
+          v-model="selectedMode"
+          :inputId="mode.id + mode.name"
+          name="mode"
+          :value="mode.name"
+        />
         <label :for="mode.id + mode.name" class="ml-2">{{ mode.name }}</label>
       </div>
     </div>
     <!-- Process Scope -->
-    <div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time'" id="cyp-conformance-procss-radio">
+    <div
+      v-show="
+        selectedRuleType === 'Processing time' ||
+        selectedRuleType === 'Waiting time'
+      "
+      id="cyp-conformance-procss-radio"
+    >
       <p class="h2">Process Scope</p>
       <div v-for="pro in processScope" :key="pro.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" @change="changeRadioProcessScope"/>
+        <RadioButton
+          v-model="selectedProcessScope"
+          :inputId="pro.id + pro.name"
+          name="processScope"
+          :value="pro.name"
+          @change="changeRadioProcessScope"
+        />
         <label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
       </div>
     </div>
     <!-- Activity Sequence (4 item) -->
-    <div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end') || selectedRuleType === 'Cycle time'"  id="cyp-conformance-actseq-radio">
+    <div
+      v-show="
+        (selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'End to end') ||
+        (selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'End to end') ||
+        selectedRuleType === 'Cycle time'
+      "
+      id="cyp-conformance-actseq-radio"
+    >
       <p class="h2">Activity Sequence</p>
       <div v-for="act in actSeqMore" :key="act.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" @change="changeRadioActSeqMore"/>
+        <RadioButton
+          v-model="selectedActSeqMore"
+          :inputId="act.id + act.name"
+          name="activitySequenceMore"
+          :value="act.name"
+          @change="changeRadioActSeqMore"
+        />
         <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
       </div>
     </div>
     <!-- Activity Sequence (3 item) -->
-    <div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial')" id="cyp-conformance-actseqfromto-radio">
+    <div
+      v-show="
+        (selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'Partial') ||
+        (selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'Partial')
+      "
+      id="cyp-conformance-actseqfromto-radio"
+    >
       <p class="h2">Activity Sequence</p>
       <div v-for="act in actSeqFromTo" :key="act.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" @change="changeRadioActSeqFromTo"/>
+        <RadioButton
+          v-model="selectedActSeqFromTo"
+          :inputId="act.id + act.name"
+          name="activitySequenceFromTo"
+          :value="act.name"
+          @change="changeRadioActSeqFromTo"
+        />
         <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
       </div>
     </div>
@@ -62,70 +129,77 @@
  *   sequence, mode, and process scope selection.
  */
 
-import { storeToRefs } from 'pinia';
-import { useConformanceStore } from '@/stores/conformance';
-import emitter from '@/utils/emitter';
+import { storeToRefs } from "pinia";
+import { useConformanceStore } from "@/stores/conformance";
+import emitter from "@/utils/emitter";
 
 const conformanceStore = useConformanceStore();
-const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
+const {
+  selectedRuleType,
+  selectedActivitySequence,
+  selectedMode,
+  selectedProcessScope,
+  selectedActSeqMore,
+  selectedActSeqFromTo,
+} = storeToRefs(conformanceStore);
 
 const ruleType = [
-  {id: 1, name: 'Have activity'},
-  {id: 2, name: 'Activity sequence'},
-  {id: 3, name: 'Activity duration'},
-  {id: 4, name: 'Processing time'},
-  {id: 5, name: 'Waiting time'},
-  {id: 6, name: 'Cycle time'},
+  { id: 1, name: "Have activity" },
+  { id: 2, name: "Activity sequence" },
+  { id: 3, name: "Activity duration" },
+  { id: 4, name: "Processing time" },
+  { id: 5, name: "Waiting time" },
+  { id: 6, name: "Cycle time" },
 ];
 const activitySequence = [
-  {id: 1, name: 'Start & End'},
-  {id: 2, name: 'Sequence'},
+  { id: 1, name: "Start & End" },
+  { id: 2, name: "Sequence" },
 ];
 const mode = [
-  {id: 1, name: 'Directly follows'},
-  {id: 2, name: 'Eventually follows'},
-  {id: 3, name: 'Short loop(s)'},
-  {id: 4, name: 'Self loop(s)'},
+  { id: 1, name: "Directly follows" },
+  { id: 2, name: "Eventually follows" },
+  { id: 3, name: "Short loop(s)" },
+  { id: 4, name: "Self loop(s)" },
 ];
 const processScope = [
-  {id: 1, name: 'End to end'},
-  {id: 2, name: 'Partial'},
+  { id: 1, name: "End to end" },
+  { id: 2, name: "Partial" },
 ];
 const actSeqMore = [
-  {id: 1, name: 'All'},
-  {id: 2, name: 'Start'},
-  {id: 3, name: 'End'},
-  {id: 4, name: 'Start & End'},
+  { id: 1, name: "All" },
+  { id: 2, name: "Start" },
+  { id: 3, name: "End" },
+  { id: 4, name: "Start & End" },
 ];
 const actSeqFromTo = [
-  {id: 1, name: 'From'},
-  {id: 2, name: 'To'},
-  {id: 3, name: 'From & To'},
+  { id: 1, name: "From" },
+  { id: 2, name: "To" },
+  { id: 3, name: "From & To" },
 ];
 
 /** Resets dependent selections when the rule type radio changes. */
 function changeRadio() {
-  selectedActivitySequence.value = 'Start & End';
-  selectedMode.value = 'Directly follows';
-  selectedProcessScope.value = 'End to end';
-  selectedActSeqMore.value = 'All';
-  selectedActSeqFromTo.value = 'From';
-  emitter.emit('isRadioChange', true); // Clear data when switching radio buttons
+  selectedActivitySequence.value = "Start & End";
+  selectedMode.value = "Directly follows";
+  selectedProcessScope.value = "End to end";
+  selectedActSeqMore.value = "All";
+  selectedActSeqFromTo.value = "From";
+  emitter.emit("isRadioChange", true); // Clear data when switching radio buttons
 }
 /** Emits event when the activity sequence radio changes. */
 function changeRadioSeq() {
-  emitter.emit('isRadioSeqChange',true);
+  emitter.emit("isRadioSeqChange", true);
 }
 /** Emits event when the process scope radio changes. */
 function changeRadioProcessScope() {
-  emitter.emit('isRadioProcessScopeChange', true);
+  emitter.emit("isRadioProcessScopeChange", true);
 }
 /** Emits event when the extended activity sequence radio changes. */
 function changeRadioActSeqMore() {
-  emitter.emit('isRadioActSeqMoreChange', true);
+  emitter.emit("isRadioActSeqMoreChange", true);
 }
 /** Emits event when the from/to activity sequence radio changes. */
 function changeRadioActSeqFromTo() {
-  emitter.emit('isRadioActSeqFromToChange', true);
+  emitter.emit("isRadioActSeqFromToChange", true);
 }
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
index 3eafe45..23e9986 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -1,31 +1,183 @@
 <template>
   <div class="px-4 text-sm">
     <!-- Have activity -->
-    <ResultCheck v-if="selectedRuleType === 'Have activity'" :data="state.containstTasksData" :select="isSubmitTask"></ResultCheck>
+    <ResultCheck
+      v-if="selectedRuleType === 'Have activity'"
+      :data="state.containstTasksData"
+      :select="isSubmitTask"
+    ></ResultCheck>
     <!-- Activity sequence  -->
-    <ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="state.selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
-    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="state.selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Activity sequence' &&
+        selectedActivitySequence === 'Start & End'
+      "
+      :timeResultData="selectCfmSeqSE"
+      :select="isSubmitStartAndEnd"
+    ></ResultDot>
+    <ResultArrow
+      v-if="
+        selectedRuleType === 'Activity sequence' &&
+        selectedActivitySequence === 'Sequence' &&
+        selectedMode === 'Directly follows'
+      "
+      :data="state.selectCfmSeqDirectly"
+      :select="isSubmitCfmSeqDirectly"
+    ></ResultArrow>
+    <ResultArrow
+      v-if="
+        selectedRuleType === 'Activity sequence' &&
+        selectedActivitySequence === 'Sequence' &&
+        selectedMode === 'Eventually follows'
+      "
+      :data="state.selectCfmSeqEventually"
+      :select="isSubmitCfmSeqEventually"
+    ></ResultArrow>
     <!-- Activity duration -->
-    <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="state.durationData" :select="isSubmitDurationData"></ResultCheck>
+    <ResultCheck
+      v-if="selectedRuleType === 'Activity duration'"
+      :title="'Activities include'"
+      :data="state.durationData"
+      :select="isSubmitDurationData"
+    ></ResultCheck>
     <!-- Processing time -->
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmPtEteSE" :select="isSubmitCfmPtEteSE"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmPtPSE" :select="isSubmitCfmPtPSE"></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start'
+      "
+      :timeResultData="state.selectCfmPtEteStart"
+      :select="isSubmitCfmPtEteStart"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'End'
+      "
+      :timeResultData="state.selectCfmPtEteEnd"
+      :select="isSubmitCfmPtEteEnd"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start & End'
+      "
+      :timeResultData="selectCfmPtEteSE"
+      :select="isSubmitCfmPtEteSE"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From'
+      "
+      :timeResultData="state.selectCfmPtPStart"
+      :select="isSubmitCfmPtPStart"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'To'
+      "
+      :timeResultData="state.selectCfmPtPEnd"
+      :select="isSubmitCfmPtPEnd"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From & To'
+      "
+      :timeResultData="selectCfmPtPSE"
+      :select="isSubmitCfmPtPSE"
+    ></ResultDot>
     <!-- Waiting time -->
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmWtEteSE" :select="isSubmitCfmWtEteSE"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmWtPSE" :select="isSubmitCfmWtPSE"></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start'
+      "
+      :timeResultData="state.selectCfmWtEteStart"
+      :select="isSubmitCfmWtEteStart"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'End'
+      "
+      :timeResultData="state.selectCfmWtEteEnd"
+      :select="isSubmitCfmWtEteEnd"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start & End'
+      "
+      :timeResultData="selectCfmWtEteSE"
+      :select="isSubmitCfmWtEteSE"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From'
+      "
+      :timeResultData="state.selectCfmWtPStart"
+      :select="isSubmitCfmWtPStart"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'To'
+      "
+      :timeResultData="state.selectCfmWtPEnd"
+      :select="isSubmitCfmWtPEnd"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From & To'
+      "
+      :timeResultData="selectCfmWtPSE"
+      :select="isSubmitCfmWtPSE"
+    ></ResultDot>
     <!-- Cycle time -->
-    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE" :select="isSubmitCfmCtEteSE"></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Cycle time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start'
+      "
+      :timeResultData="state.selectCfmCtEteStart"
+      :select="isSubmitCfmCtEteStart"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Cycle time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'End'
+      "
+      :timeResultData="state.selectCfmCtEteEnd"
+      :select="isSubmitCfmCtEteEnd"
+    ></ResultDot>
+    <ResultDot
+      v-if="
+        selectedRuleType === 'Cycle time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start & End'
+      "
+      :timeResultData="selectCfmCtEteSE"
+      :select="isSubmitCfmCtEteSE"
+    ></ResultDot>
   </div>
 </template>
 <script setup>
@@ -41,18 +193,49 @@
  *   scrollable display of check results.
  */
 
-import { reactive, computed, onBeforeUnmount } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useConformanceStore } from '@/stores/conformance';
-import emitter from '@/utils/emitter';
-import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
-import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
-import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
+import { reactive, computed, onBeforeUnmount } from "vue";
+import { storeToRefs } from "pinia";
+import { useConformanceStore } from "@/stores/conformance";
+import emitter from "@/utils/emitter";
+import ResultCheck from "@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue";
+import ResultArrow from "@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue";
+import ResultDot from "@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue";
 
 const conformanceStore = useConformanceStore();
-const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
+const {
+  selectedRuleType,
+  selectedActivitySequence,
+  selectedMode,
+  selectedProcessScope,
+  selectedActSeqMore,
+  selectedActSeqFromTo,
+  isStartSelected,
+  isEndSelected,
+} = storeToRefs(conformanceStore);
 
-const props = defineProps(['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE']);
+const props = defineProps([
+  "isSubmit",
+  "isSubmitTask",
+  "isSubmitStartAndEnd",
+  "isSubmitCfmSeqDirectly",
+  "isSubmitCfmSeqEventually",
+  "isSubmitDurationData",
+  "isSubmitCfmPtEteStart",
+  "isSubmitCfmPtEteEnd",
+  "isSubmitCfmPtEteSE",
+  "isSubmitCfmPtPStart",
+  "isSubmitCfmPtPEnd",
+  "isSubmitCfmPtPSE",
+  "isSubmitCfmWtEteStart",
+  "isSubmitCfmWtEteEnd",
+  "isSubmitCfmWtEteSE",
+  "isSubmitCfmWtPStart",
+  "isSubmitCfmWtPEnd",
+  "isSubmitCfmWtPSE",
+  "isSubmitCfmCtEteStart",
+  "isSubmitCfmCtEteEnd",
+  "isSubmitCfmCtEteSE",
+]);
 
 const state = reactive({
   containstTasksData: null,
@@ -87,10 +270,10 @@ const state = reactive({
 
 const selectCfmSeqSE = computed(() => {
   const data = [];
-  if(state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
-  if(state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
+  if (state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
+  if (state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
   data.sort((a, b) => {
-    const order = { 'Start': 1, 'End': 2};
+    const order = { Start: 1, End: 2 };
     return order[a.category] - order[b.category];
   });
   return data;
@@ -98,10 +281,10 @@ const selectCfmSeqSE = computed(() => {
 
 const selectCfmPtEteSE = computed(() => {
   const data = [];
-  if(state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
-  if(state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
+  if (state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
+  if (state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
   data.sort((a, b) => {
-    const order = { 'Start': 1, 'End': 2};
+    const order = { Start: 1, End: 2 };
     return order[a.category] - order[b.category];
   });
   return data;
@@ -109,10 +292,10 @@ const selectCfmPtEteSE = computed(() => {
 
 const selectCfmPtPSE = computed(() => {
   const data = [];
-  if(state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
-  if(state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
+  if (state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
+  if (state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
   data.sort((a, b) => {
-    const order = { 'From': 1, 'To': 2};
+    const order = { From: 1, To: 2 };
     return order[a.category] - order[b.category];
   });
   return data;
@@ -120,10 +303,10 @@ const selectCfmPtPSE = computed(() => {
 
 const selectCfmWtEteSE = computed(() => {
   const data = [];
-  if(state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
-  if(state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
+  if (state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
+  if (state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
   data.sort((a, b) => {
-    const order = { 'Start': 1, 'End': 2};
+    const order = { Start: 1, End: 2 };
     return order[a.category] - order[b.category];
   });
   return data;
@@ -131,10 +314,10 @@ const selectCfmWtEteSE = computed(() => {
 
 const selectCfmWtPSE = computed(() => {
   const data = [];
-  if(state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
-  if(state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
+  if (state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
+  if (state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
   data.sort((a, b) => {
-    const order = { 'From': 1, 'To': 2};
+    const order = { From: 1, To: 2 };
     return order[a.category] - order[b.category];
   });
   return data;
@@ -142,10 +325,10 @@ const selectCfmWtPSE = computed(() => {
 
 const selectCfmCtEteSE = computed(() => {
   const data = [];
-  if(state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
-  if(state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
+  if (state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
+  if (state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
   data.sort((a, b) => {
-    const order = { 'Start': 1, 'End': 2};
+    const order = { Start: 1, End: 2 };
     return order[a.category] - order[b.category];
   });
   return data;
@@ -186,35 +369,35 @@ function reset() {
 }
 
 // created() logic
-emitter.on('actListData', (data) => {
+emitter.on("actListData", (data) => {
   state.containstTasksData = data;
 });
-emitter.on('actRadioData', (newData) => {
+emitter.on("actRadioData", (newData) => {
   const data = JSON.parse(JSON.stringify(newData)); // Deep copy the original cases data
 
   const categoryMapping = {
-    'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
-    'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'],
-    'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'],
-    'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'],
-    'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'],
-    'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'],
-    'cfmPtPStart': ['From', 'selectCfmPtPStart'],
-    'cfmPtPEnd': ['To', 'selectCfmPtPEnd'],
-    'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'],
-    'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'],
-    'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'],
-    'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'],
-    'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'],
-    'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'],
-    'cfmWtPStart': ['From', 'selectCfmWtPStart'],
-    'cfmWtPEnd': ['To', 'selectCfmWtPEnd'],
-    'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'],
-    'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'],
-    'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'],
-    'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'],
-    'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'],
-    'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart']
+    cfmSeqStart: ["Start", "selectCfmSeqStart", "selectCfmSeqEnd"],
+    cfmSeqEnd: ["End", "selectCfmSeqEnd", "selectCfmSeqStart"],
+    cfmPtEteStart: ["Start", "selectCfmPtEteStart"],
+    cfmPtEteEnd: ["End", "selectCfmPtEteEnd"],
+    cfmPtEteSEStart: ["Start", "selectCfmPtEteSEStart", "selectCfmPtEteSEEnd"],
+    cfmPtEteSEEnd: ["End", "selectCfmPtEteSEEnd", "selectCfmPtEteSEStart"],
+    cfmPtPStart: ["From", "selectCfmPtPStart"],
+    cfmPtPEnd: ["To", "selectCfmPtPEnd"],
+    cfmPtPSEStart: ["From", "selectCfmPtPSEStart", "selectCfmPtPSEEnd"],
+    cfmPtPSEEnd: ["To", "selectCfmPtPSEEnd", "selectCfmPtPSEStart"],
+    cfmWtEteStart: ["Start", "selectCfmWtEteStart"],
+    cfmWtEteEnd: ["End", "selectCfmWtEteEnd"],
+    cfmWtEteSEStart: ["Start", "selectCfmWtEteSEStart", "selectCfmWtEteSEEnd"],
+    cfmWtEteSEEnd: ["End", "selectCfmWtEteSEEnd", "selectCfmWtEteSEStart"],
+    cfmWtPStart: ["From", "selectCfmWtPStart"],
+    cfmWtPEnd: ["To", "selectCfmWtPEnd"],
+    cfmWtPSEStart: ["From", "selectCfmWtPSEStart", "selectCfmWtPSEEnd"],
+    cfmWtPSEEnd: ["To", "selectCfmWtPSEEnd", "selectCfmWtPSEStart"],
+    cfmCtEteStart: ["Start", "selectCfmCtEteStart"],
+    cfmCtEteEnd: ["End", "selectCfmCtEteEnd"],
+    cfmCtEteSEStart: ["Start", "selectCfmCtEteSEStart", "selectCfmCtEteSEEnd"],
+    cfmCtEteSEEnd: ["End", "selectCfmCtEteSEEnd", "selectCfmCtEteSEStart"],
   };
 
   const updateSelection = (key, mainSelector, secondarySelector) => {
@@ -225,64 +408,65 @@ emitter.on('actRadioData', (newData) => {
     state[mainSelector] = data;
   };
 
-    if (categoryMapping[data.category]) {
-      const [category, mainSelector, secondarySelector] = categoryMapping[data.category];
-      if (secondarySelector) {
-        updateSelection(data.category, mainSelector, secondarySelector);
-      } else {
-        data.category = category;
-        state[mainSelector] = [data];
-      }
-    } else if (selectedRuleType.value === 'Activity duration') {
-      state.durationData = [data.task];
+  if (categoryMapping[data.category]) {
+    const [category, mainSelector, secondarySelector] =
+      categoryMapping[data.category];
+    if (secondarySelector) {
+      updateSelection(data.category, mainSelector, secondarySelector);
+    } else {
+      data.category = category;
+      state[mainSelector] = [data];
     }
+  } else if (selectedRuleType.value === "Activity duration") {
+    state.durationData = [data.task];
+  }
 });
-emitter.on('getListSequence', (data) => {
+emitter.on("getListSequence", (data) => {
   switch (data.category) {
-    case 'cfmSeqDirectly':
+    case "cfmSeqDirectly":
       state.selectCfmSeqDirectly = data.task;
       break;
-    case 'cfmSeqEventually':
+    case "cfmSeqEventually":
       state.selectCfmSeqEventually = data.task;
       break;
     default:
       break;
   }
 });
-emitter.on('reset', (data) => {
+emitter.on("reset", (data) => {
   reset();
 });
 // Clear data when switching radio buttons
-emitter.on('isRadioChange', (data) => {
-  if(data) reset();
+emitter.on("isRadioChange", (data) => {
+  if (data) reset();
 });
-emitter.on('isRadioProcessScopeChange', (data) => {
-  if(data) reset();
+emitter.on("isRadioProcessScopeChange", (data) => {
+  if (data) reset();
 });
-emitter.on('isRadioActSeqMoreChange', (data) => {
-  if(data) reset();
+emitter.on("isRadioActSeqMoreChange", (data) => {
+  if (data) reset();
 });
-emitter.on('isRadioActSeqFromToChange', (data) => {
-  if(data) reset();
+emitter.on("isRadioActSeqFromToChange", (data) => {
+  if (data) reset();
 });
 
 onBeforeUnmount(() => {
-  emitter.off('actListData');
-  emitter.off('actRadioData');
-  emitter.off('getListSequence');
-  emitter.off('reset');
-  emitter.off('isRadioChange');
-  emitter.off('isRadioProcessScopeChange');
-  emitter.off('isRadioActSeqMoreChange');
-  emitter.off('isRadioActSeqFromToChange');
+  emitter.off("actListData");
+  emitter.off("actRadioData");
+  emitter.off("getListSequence");
+  emitter.off("reset");
+  emitter.off("isRadioChange");
+  emitter.off("isRadioProcessScopeChange");
+  emitter.off("isRadioActSeqMoreChange");
+  emitter.off("isRadioActSeqFromToChange");
 });
 </script>
 <style scoped>
 :deep(.disc) {
   font-variation-settings:
-  'FILL' 1,
-  'wght' 100,
-  'GRAD' 0,
-  'opsz' 20
+    "FILL" 1,
+    "wght" 100,
+    "GRAD" 0,
+    "opsz" 20;
 }
 </style>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
index ca684bf..a492a30 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -1,99 +1,345 @@
 <template>
-  <section class="animate-fadein w-full h-full" >
-
+  <section class="animate-fadein w-full h-full">
     <!-- Have activity -->
-    <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
+    <ActList
+      v-if="selectedRuleType === 'Have activity'"
+      :data="conformanceTask"
+      :select="isSubmitTask"
+    ></ActList>
 
     <!-- Activity sequence  -->
-    <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'"
-      class="flex justify-between items-center w-full h-full">
-      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="cfmSeqStartData"
-        :category="'cfmSeqStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
-      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData"
-        :category="'cfmSeqEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
+    <div
+      v-if="
+        selectedRuleType === 'Activity sequence' &&
+        selectedActivitySequence === 'Start & End'
+      "
+      class="flex justify-between items-center w-full h-full"
+    >
+      <ActRadio
+        :title="'Start activity'"
+        :select="isSubmitStartAndEnd?.[0].task"
+        :data="cfmSeqStartData"
+        :category="'cfmSeqStart'"
+        :task="taskStart"
+        :isSubmit="isSubmit"
+        @selected-task="selectStart"
+        class="w-1/2"
+      />
+      <ActRadio
+        :title="'End activity'"
+        :select="isSubmitStartAndEnd?.[1].task"
+        :data="cfmSeqEndData"
+        :category="'cfmSeqEnd'"
+        :task="taskEnd"
+        :isSubmit="isSubmit"
+        @selected-task="selectEnd"
+        class="w-1/2"
+      />
     </div>
 
     <!-- actSeqDrag -->
-    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'
-      && selectedMode === 'Directly follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqDirectly"
-      :isSubmit="isSubmit" :category="'cfmSeqDirectly'"></ActSeqDrag>
-    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'
-      && selectedMode === 'Eventually follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqEventually"
-      :isSubmit="isSubmit" :category="'cfmSeqEventually'"></ActSeqDrag>
+    <ActSeqDrag
+      v-if="
+        selectedRuleType === 'Activity sequence' &&
+        selectedActivitySequence === 'Sequence' &&
+        selectedMode === 'Directly follows'
+      "
+      :data="conformanceTask"
+      :listSeq="isSubmitCfmSeqDirectly"
+      :isSubmit="isSubmit"
+      :category="'cfmSeqDirectly'"
+    ></ActSeqDrag>
+    <ActSeqDrag
+      v-if="
+        selectedRuleType === 'Activity sequence' &&
+        selectedActivitySequence === 'Sequence' &&
+        selectedMode === 'Eventually follows'
+      "
+      :data="conformanceTask"
+      :listSeq="isSubmitCfmSeqEventually"
+      :isSubmit="isSubmit"
+      :category="'cfmSeqEventually'"
+    ></ActSeqDrag>
 
     <!-- Activity duration -->
-    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"
-      :select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'" :isSubmit="isSubmit"/>
+    <ActRadio
+      v-if="selectedRuleType === 'Activity duration'"
+      :title="'Activities include'"
+      :select="isSubmitDurationData?.[0]"
+      :data="conformanceTask"
+      :category="'cfmDur'"
+      :isSubmit="isSubmit"
+    />
 
-      <!-- Processing time -->
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmPtEteStart?.[0].task"
-      :data="cfmPtEteStartData" :category="'cfmPtEteStart'" :isSubmit="isSubmit" />
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmPtEteEnd?.[0].task" :data="cfmPtEteEndData"
-      :category="'cfmPtEteEnd'" :isSubmit="isSubmit" />
-    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
-      <ActRadio :title="'Start'" :select="isSubmitCfmPtEteSE?.[0].task" :data="cfmPtEteSEStartData"
-      :category="'cfmPtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
-      <ActRadio :title="'End'" :select="isSubmitCfmPtEteSE?.[1].task" :data="cfmPtEteSEEndData"
-      :category="'cfmPtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
+    <!-- Processing time -->
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start'
+      "
+      :title="'Start'"
+      :select="isSubmitCfmPtEteStart?.[0].task"
+      :data="cfmPtEteStartData"
+      :category="'cfmPtEteStart'"
+      :isSubmit="isSubmit"
+    />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'End'
+      "
+      :title="'End'"
+      :select="isSubmitCfmPtEteEnd?.[0].task"
+      :data="cfmPtEteEndData"
+      :category="'cfmPtEteEnd'"
+      :isSubmit="isSubmit"
+    />
+    <div
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start & End'
+      "
+      class="flex justify-between items-center w-full h-full"
+    >
+      <ActRadio
+        :title="'Start'"
+        :select="isSubmitCfmPtEteSE?.[0].task"
+        :data="cfmPtEteSEStartData"
+        :category="'cfmPtEteSEStart'"
+        :task="taskStart"
+        :isSubmit="isSubmit"
+        @selected-task="selectStart"
+        class="w-1/2"
+      />
+      <ActRadio
+        :title="'End'"
+        :select="isSubmitCfmPtEteSE?.[1].task"
+        :data="cfmPtEteSEEndData"
+        :category="'cfmPtEteSEEnd'"
+        :task="taskEnd"
+        :isSubmit="isSubmit"
+        @selected-task="selectEnd"
+        class="w-1/2"
+      />
     </div>
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmPtPStart?.[0].task" :data="cfmPtPStartData"
-      :category="'cfmPtPStart'" :isSubmit="isSubmit" />
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmPtPEnd?.[0].task" :data="cfmPtPEndData"
-      :category="'cfmPtPEnd'" :isSubmit="isSubmit" />
-    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
-      <ActRadio :title="'From'" :select="isSubmitCfmPtPSE?.[0].task" :data="cfmPtPSEStartData"
-        class="w-1/2" :category="'cfmPtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
-      <ActRadio :title="'To'" :select="isSubmitCfmPtPSE?.[1].task" :data="cfmPtPSEEndData" class="w-1/2"
-      :category="'cfmPtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From'
+      "
+      :title="'From'"
+      :select="isSubmitCfmPtPStart?.[0].task"
+      :data="cfmPtPStartData"
+      :category="'cfmPtPStart'"
+      :isSubmit="isSubmit"
+    />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'To'
+      "
+      :title="'To'"
+      :select="isSubmitCfmPtPEnd?.[0].task"
+      :data="cfmPtPEndData"
+      :category="'cfmPtPEnd'"
+      :isSubmit="isSubmit"
+    />
+    <div
+      v-if="
+        selectedRuleType === 'Processing time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From & To'
+      "
+      class="flex justify-between items-center w-full h-full"
+    >
+      <ActRadio
+        :title="'From'"
+        :select="isSubmitCfmPtPSE?.[0].task"
+        :data="cfmPtPSEStartData"
+        class="w-1/2"
+        :category="'cfmPtPSEStart'"
+        :task="taskStart"
+        :isSubmit="isSubmit"
+        @selected-task="selectStart"
+      />
+      <ActRadio
+        :title="'To'"
+        :select="isSubmitCfmPtPSE?.[1].task"
+        :data="cfmPtPSEEndData"
+        class="w-1/2"
+        :category="'cfmPtPSEEnd'"
+        :task="taskEnd"
+        :isSubmit="isSubmit"
+        @selected-task="selectEnd"
+      />
     </div>
 
     <!-- Waiting time -->
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmWtEteStart?.[0].task"
-      :data="cfmWtEteStartData" :category="'cfmWtEteStart'" :isSubmit="isSubmit" />
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmWtEteEnd?.[0].task"
-      :data="cfmWtEteEndData" :category="'cfmWtEteEnd'" :isSubmit="isSubmit" />
-    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
-      <ActRadio :title="'Start'" :select="isSubmitCfmWtEteSE?.[0].task" :data="cfmWtEteSEStartData" class="w-1/2"
-        :category="'cfmWtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
-      <ActRadio :title="'End'" :select="isSubmitCfmWtEteSE?.[1].task" :data="cfmWtEteSEEndData" class="w-1/2"
-      :category="'cfmWtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start'
+      "
+      :title="'Start'"
+      :select="isSubmitCfmWtEteStart?.[0].task"
+      :data="cfmWtEteStartData"
+      :category="'cfmWtEteStart'"
+      :isSubmit="isSubmit"
+    />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'End'
+      "
+      :title="'End'"
+      :select="isSubmitCfmWtEteEnd?.[0].task"
+      :data="cfmWtEteEndData"
+      :category="'cfmWtEteEnd'"
+      :isSubmit="isSubmit"
+    />
+    <div
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start & End'
+      "
+      class="flex justify-between items-center w-full h-full"
+    >
+      <ActRadio
+        :title="'Start'"
+        :select="isSubmitCfmWtEteSE?.[0].task"
+        :data="cfmWtEteSEStartData"
+        class="w-1/2"
+        :category="'cfmWtEteSEStart'"
+        :task="taskStart"
+        :isSubmit="isSubmit"
+        @selected-task="selectStart"
+      />
+      <ActRadio
+        :title="'End'"
+        :select="isSubmitCfmWtEteSE?.[1].task"
+        :data="cfmWtEteSEEndData"
+        class="w-1/2"
+        :category="'cfmWtEteSEEnd'"
+        :task="taskEnd"
+        :isSubmit="isSubmit"
+        @selected-task="selectEnd"
+      />
     </div>
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmWtPStart?.[0].task" :data="cfmWtPStartData"
-      :category="'cfmWtPStart'" :isSubmit="isSubmit" />
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmWtPEnd?.[0].task"
-      :data="cfmWtPEndData" :category="'cfmWtPEnd'" :isSubmit="isSubmit" />
-    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
-      <ActRadio :title="'From'" :select="isSubmitCfmWtPSE?.[0].task" :data="cfmWtPSEStartData"
-      class="w-1/2" :category="'cfmWtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
-      <ActRadio :title="'To'" :select="isSubmitCfmWtPSE?.[1].task" :data="cfmWtPSEEndData"
-      class="w-1/2" :category="'cfmWtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From'
+      "
+      :title="'From'"
+      :select="isSubmitCfmWtPStart?.[0].task"
+      :data="cfmWtPStartData"
+      :category="'cfmWtPStart'"
+      :isSubmit="isSubmit"
+    />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'To'
+      "
+      :title="'To'"
+      :select="isSubmitCfmWtPEnd?.[0].task"
+      :data="cfmWtPEndData"
+      :category="'cfmWtPEnd'"
+      :isSubmit="isSubmit"
+    />
+    <div
+      v-if="
+        selectedRuleType === 'Waiting time' &&
+        selectedProcessScope === 'Partial' &&
+        selectedActSeqFromTo === 'From & To'
+      "
+      class="flex justify-between items-center w-full h-full"
+    >
+      <ActRadio
+        :title="'From'"
+        :select="isSubmitCfmWtPSE?.[0].task"
+        :data="cfmWtPSEStartData"
+        class="w-1/2"
+        :category="'cfmWtPSEStart'"
+        :task="taskStart"
+        :isSubmit="isSubmit"
+        @selected-task="selectStart"
+      />
+      <ActRadio
+        :title="'To'"
+        :select="isSubmitCfmWtPSE?.[1].task"
+        :data="cfmWtPSEEndData"
+        class="w-1/2"
+        :category="'cfmWtPSEEnd'"
+        :task="taskEnd"
+        :isSubmit="isSubmit"
+        @selected-task="selectEnd"
+      />
     </div>
 
     <!-- Cycle time -->
-    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmCtEteStart?.[0].task"
-      :data="cfmCtEteStartData" :category="'cfmCtEteStart'" :isSubmit="isSubmit" />
-    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmCtEteEnd?.[0].task" :data="cfmCtEteEndData"
-      :category="'cfmCtEteEnd'" :isSubmit="isSubmit" />
-    <div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"
-      class="flex justify-between items-center w-full h-full">
-      <ActRadio :title="'Start'" :select="isSubmitCfmCtEteSE?.[0].task" :data="cfmCtEteSEStartData" class="w-1/2"
-      :category="'cfmCtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
-      <ActRadio :title="'End'" :select="isSubmitCfmCtEteSE?.[1].task" :data="cfmCtEteSEEndData" class="w-1/2"
-      :category="'cfmCtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Cycle time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start'
+      "
+      :title="'Start'"
+      :select="isSubmitCfmCtEteStart?.[0].task"
+      :data="cfmCtEteStartData"
+      :category="'cfmCtEteStart'"
+      :isSubmit="isSubmit"
+    />
+    <ActRadio
+      v-if="
+        selectedRuleType === 'Cycle time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'End'
+      "
+      :title="'End'"
+      :select="isSubmitCfmCtEteEnd?.[0].task"
+      :data="cfmCtEteEndData"
+      :category="'cfmCtEteEnd'"
+      :isSubmit="isSubmit"
+    />
+    <div
+      v-if="
+        selectedRuleType === 'Cycle time' &&
+        selectedProcessScope === 'End to end' &&
+        selectedActSeqMore === 'Start & End'
+      "
+      class="flex justify-between items-center w-full h-full"
+    >
+      <ActRadio
+        :title="'Start'"
+        :select="isSubmitCfmCtEteSE?.[0].task"
+        :data="cfmCtEteSEStartData"
+        class="w-1/2"
+        :category="'cfmCtEteSEStart'"
+        :task="taskStart"
+        :isSubmit="isSubmit"
+        @selected-task="selectStart"
+      />
+      <ActRadio
+        :title="'End'"
+        :select="isSubmitCfmCtEteSE?.[1].task"
+        :data="cfmCtEteSEEndData"
+        class="w-1/2"
+        :category="'cfmCtEteSEEnd'"
+        :task="taskEnd"
+        :isSubmit="isSubmit"
+        @selected-task="selectEnd"
+      />
     </div>
   </section>
 </template>
@@ -110,31 +356,75 @@
  *   check result statistics.
  */
 
-import { ref, computed, watch } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
-import { useConformanceStore } from '@/stores/conformance';
-import emitter from '@/utils/emitter';
-import ActList from './ActList.vue';
-import ActRadio from './ActRadio.vue';
-import ActSeqDrag from './ActSeqDrag.vue';
+import { ref, computed, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useLoadingStore } from "@/stores/loading";
+import { useConformanceStore } from "@/stores/conformance";
+import emitter from "@/utils/emitter";
+import ActList from "./ActList.vue";
+import ActRadio from "./ActRadio.vue";
+import ActSeqDrag from "./ActSeqDrag.vue";
 
 const loadingStore = useLoadingStore();
 const conformanceStore = useConformanceStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore,
-  selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE,
-  cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd,
-  cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected
+const {
+  selectedRuleType,
+  selectedActivitySequence,
+  selectedMode,
+  selectedProcessScope,
+  selectedActSeqMore,
+  selectedActSeqFromTo,
+  conformanceTask,
+  cfmSeqStart,
+  cfmSeqEnd,
+  cfmPtEteStart,
+  cfmPtEteEnd,
+  cfmPtEteSE,
+  cfmPtPStart,
+  cfmPtPEnd,
+  cfmPtPSE,
+  cfmWtEteStart,
+  cfmWtEteEnd,
+  cfmWtEteSE,
+  cfmWtPStart,
+  cfmWtPEnd,
+  cfmWtPSE,
+  cfmCtEteStart,
+  cfmCtEteEnd,
+  cfmCtEteSE,
+  isStartSelected,
+  isEndSelected,
 } = storeToRefs(conformanceStore);
 
-const props = defineProps(['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually',
-  'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE',
-  'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart',
-  'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd',
-  'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE',
-  'isSubmitShowDataSeq', 'isSubmitShowDataPtEte', 'isSubmitShowDataPtP', 'isSubmitShowDataWtEte',
-  'isSubmitShowDataWtP', 'isSubmitShowDataCt'
+const props = defineProps([
+  "isSubmit",
+  "isSubmitTask",
+  "isSubmitStartAndEnd",
+  "isSubmitCfmSeqDirectly",
+  "isSubmitCfmSeqEventually",
+  "isSubmitDurationData",
+  "isSubmitCfmPtEteStart",
+  "isSubmitCfmPtEteEnd",
+  "isSubmitCfmPtEteSE",
+  "isSubmitCfmPtPStart",
+  "isSubmitCfmPtPEnd",
+  "isSubmitCfmPtPSE",
+  "isSubmitCfmWtEteStart",
+  "isSubmitCfmWtEteEnd",
+  "isSubmitCfmWtEteSE",
+  "isSubmitCfmWtPStart",
+  "isSubmitCfmWtPEnd",
+  "isSubmitCfmWtPSE",
+  "isSubmitCfmCtEteStart",
+  "isSubmitCfmCtEteEnd",
+  "isSubmitCfmCtEteSE",
+  "isSubmitShowDataSeq",
+  "isSubmitShowDataPtEte",
+  "isSubmitShowDataPtP",
+  "isSubmitShowDataWtEte",
+  "isSubmitShowDataWtP",
+  "isSubmitShowDataCt",
 ]);
 
 const task = ref(null);
@@ -143,112 +433,166 @@ const taskEnd = ref(null);
 
 // Activity sequence
 const cfmSeqStartData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
-  return isEndSelected.value ? setSeqStartAndEndData(cfmSeqEnd.value, 'sources', task.value) : cfmSeqStart.value.map(i => i.label);
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataSeq.task;
+  return isEndSelected.value
+    ? setSeqStartAndEndData(cfmSeqEnd.value, "sources", task.value)
+    : cfmSeqStart.value.map((i) => i.label);
 });
 const cfmSeqEndData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
-  return isStartSelected.value ? setSeqStartAndEndData(cfmSeqStart.value, 'sinks', task.value) : cfmSeqEnd.value.map(i => i.label);
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataSeq.task;
+  return isStartSelected.value
+    ? setSeqStartAndEndData(cfmSeqStart.value, "sinks", task.value)
+    : cfmSeqEnd.value.map((i) => i.label);
 });
 // Processing time
 const cfmPtEteStartData = computed(() => {
-  return cfmPtEteStart.value.map(i => i.task);
+  return cfmPtEteStart.value.map((i) => i.task);
 });
 const cfmPtEteEndData = computed(() => {
-  return cfmPtEteEnd.value.map(i => i.task);
+  return cfmPtEteEnd.value.map((i) => i.task);
 });
 const cfmPtEteSEStartData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
-  return isEndSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'end', task.value) : setTaskData(cfmPtEteSE.value, 'start');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataPtEte.task;
+  return isEndSelected.value
+    ? setStartAndEndData(cfmPtEteSE.value, "end", task.value)
+    : setTaskData(cfmPtEteSE.value, "start");
 });
 const cfmPtEteSEEndData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
-  return isStartSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'start', task.value) : setTaskData(cfmPtEteSE.value, 'end');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataPtEte.task;
+  return isStartSelected.value
+    ? setStartAndEndData(cfmPtEteSE.value, "start", task.value)
+    : setTaskData(cfmPtEteSE.value, "end");
 });
 const cfmPtPStartData = computed(() => {
-  return cfmPtPStart.value.map(i => i.task);
+  return cfmPtPStart.value.map((i) => i.task);
 });
 const cfmPtPEndData = computed(() => {
-  return cfmPtPEnd.value.map(i => i.task);
+  return cfmPtPEnd.value.map((i) => i.task);
 });
 const cfmPtPSEStartData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
-  return isEndSelected.value ? setStartAndEndData(cfmPtPSE.value, 'end', task.value) : setTaskData(cfmPtPSE.value, 'start');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataPtP.task;
+  return isEndSelected.value
+    ? setStartAndEndData(cfmPtPSE.value, "end", task.value)
+    : setTaskData(cfmPtPSE.value, "start");
 });
 const cfmPtPSEEndData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
-  return isStartSelected.value ? setStartAndEndData(cfmPtPSE.value, 'start', task.value) : setTaskData(cfmPtPSE.value, 'end');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataPtP.task;
+  return isStartSelected.value
+    ? setStartAndEndData(cfmPtPSE.value, "start", task.value)
+    : setTaskData(cfmPtPSE.value, "end");
 });
 // Waiting time
 const cfmWtEteStartData = computed(() => {
-  return cfmWtEteStart.value.map(i => i.task);
+  return cfmWtEteStart.value.map((i) => i.task);
 });
 const cfmWtEteEndData = computed(() => {
-  return cfmWtEteEnd.value.map(i => i.task);
+  return cfmWtEteEnd.value.map((i) => i.task);
 });
 const cfmWtEteSEStartData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
-  return isEndSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'end', task.value) : setTaskData(cfmWtEteSE.value, 'start');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataWtEte.task;
+  return isEndSelected.value
+    ? setStartAndEndData(cfmWtEteSE.value, "end", task.value)
+    : setTaskData(cfmWtEteSE.value, "start");
 });
 const cfmWtEteSEEndData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
-  return isStartSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'start', task.value) : setTaskData(cfmWtEteSE.value, 'end');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataWtEte.task;
+  return isStartSelected.value
+    ? setStartAndEndData(cfmWtEteSE.value, "start", task.value)
+    : setTaskData(cfmWtEteSE.value, "end");
 });
 const cfmWtPStartData = computed(() => {
-  return cfmWtPStart.value.map(i => i.task);
+  return cfmWtPStart.value.map((i) => i.task);
 });
 const cfmWtPEndData = computed(() => {
-  return cfmWtPEnd.value.map(i => i.task);
+  return cfmWtPEnd.value.map((i) => i.task);
 });
 const cfmWtPSEStartData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
-  return isEndSelected.value ? setStartAndEndData(cfmWtPSE.value, 'end', task.value) : setTaskData(cfmWtPSE.value, 'start');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataWtP.task;
+  return isEndSelected.value
+    ? setStartAndEndData(cfmWtPSE.value, "end", task.value)
+    : setTaskData(cfmWtPSE.value, "start");
 });
 const cfmWtPSEEndData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
-  return isStartSelected.value ? setStartAndEndData(cfmWtPSE.value, 'start', task.value) : setTaskData(cfmWtPSE.value, 'end');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataWtP.task;
+  return isStartSelected.value
+    ? setStartAndEndData(cfmWtPSE.value, "start", task.value)
+    : setTaskData(cfmWtPSE.value, "end");
 });
 // Cycle time
 const cfmCtEteStartData = computed(() => {
-  return cfmCtEteStart.value.map(i => i.task);
+  return cfmCtEteStart.value.map((i) => i.task);
 });
 const cfmCtEteEndData = computed(() => {
-  return cfmCtEteEnd.value.map(i => i.task);
+  return cfmCtEteEnd.value.map((i) => i.task);
 });
 const cfmCtEteSEStartData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
-  return isEndSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'end', task.value) : setTaskData(cfmCtEteSE.value, 'start');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataCt.task;
+  return isEndSelected.value
+    ? setStartAndEndData(cfmCtEteSE.value, "end", task.value)
+    : setTaskData(cfmCtEteSE.value, "start");
 });
 const cfmCtEteSEEndData = computed(() => {
-  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
-  return isStartSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'start', task.value) : setTaskData(cfmCtEteSE.value, 'end');
+  if (props.isSubmit && task.value === null)
+    task.value = props.isSubmitShowDataCt.task;
+  return isStartSelected.value
+    ? setStartAndEndData(cfmCtEteSE.value, "start", task.value)
+    : setTaskData(cfmCtEteSE.value, "end");
 });
 
 // Watchers - Fix issue where saved rule files could not be re-edited
-watch(() => props.isSubmitShowDataSeq, (newValue) => {
-  taskStart.value = newValue.taskStart;
-  taskEnd.value = newValue.taskEnd;
-});
-watch(() => props.isSubmitShowDataPtEte, (newValue) => {
-  taskStart.value = newValue.taskStart;
-  taskEnd.value = newValue.taskEnd;
-});
-watch(() => props.isSubmitShowDataPtP, (newValue) => {
-  taskStart.value = newValue.taskStart;
-  taskEnd.value = newValue.taskEnd;
-});
-watch(() => props.isSubmitShowDataWtEte, (newValue) => {
-  taskStart.value = newValue.taskStart;
-  taskEnd.value = newValue.taskEnd;
-});
-watch(() => props.isSubmitShowDataWtP, (newValue) => {
-  taskStart.value = newValue.taskStart;
-  taskEnd.value = newValue.taskEnd;
-});
-watch(() => props.isSubmitShowDataCt, (newValue) => {
-  taskStart.value = newValue.taskStart;
-  taskEnd.value = newValue.taskEnd;
-});
+watch(
+  () => props.isSubmitShowDataSeq,
+  (newValue) => {
+    taskStart.value = newValue.taskStart;
+    taskEnd.value = newValue.taskEnd;
+  },
+);
+watch(
+  () => props.isSubmitShowDataPtEte,
+  (newValue) => {
+    taskStart.value = newValue.taskStart;
+    taskEnd.value = newValue.taskEnd;
+  },
+);
+watch(
+  () => props.isSubmitShowDataPtP,
+  (newValue) => {
+    taskStart.value = newValue.taskStart;
+    taskEnd.value = newValue.taskEnd;
+  },
+);
+watch(
+  () => props.isSubmitShowDataWtEte,
+  (newValue) => {
+    taskStart.value = newValue.taskStart;
+    taskEnd.value = newValue.taskEnd;
+  },
+);
+watch(
+  () => props.isSubmitShowDataWtP,
+  (newValue) => {
+    taskStart.value = newValue.taskStart;
+    taskEnd.value = newValue.taskEnd;
+  },
+);
+watch(
+  () => props.isSubmitShowDataCt,
+  (newValue) => {
+    taskStart.value = newValue.taskStart;
+    taskEnd.value = newValue.taskEnd;
+  },
+);
 
 /**
  * Sets the start and end radio data.
@@ -257,7 +601,7 @@ watch(() => props.isSubmitShowDataCt, (newValue) => {
  * @returns {array}
  */
 function setTaskData(data, category) {
-  let newData = data.map(i => i[category]);
+  let newData = data.map((i) => i[category]);
   newData = [...new Set(newData)]; // Set is a collection type that only stores unique values.
   return newData;
 }
@@ -269,13 +613,15 @@ function setTaskData(data, category) {
  * @returns {array}
  */
 function setStartAndEndData(data, category, taskVal) {
-  let oppositeCategory = '';
-  if (category === 'start') {
-      oppositeCategory = 'end';
+  let oppositeCategory = "";
+  if (category === "start") {
+    oppositeCategory = "end";
   } else {
-      oppositeCategory = 'start';
-  };
-  let newData = data.filter(i => i[category] === taskVal).map(i => i[oppositeCategory]);
+    oppositeCategory = "start";
+  }
+  let newData = data
+    .filter((i) => i[category] === taskVal)
+    .map((i) => i[oppositeCategory]);
   newData = [...new Set(newData)];
   return newData;
 }
@@ -287,7 +633,7 @@ function setStartAndEndData(data, category, taskVal) {
  * @returns {array}
  */
 function setSeqStartAndEndData(data, category, taskVal) {
-  let newData = data.filter(i => i.label === taskVal).map(i => i[category]);
+  let newData = data.filter((i) => i.label === taskVal).map((i) => i[category]);
   newData = [...new Set(...newData)];
   return newData;
 }
@@ -297,16 +643,16 @@ function setSeqStartAndEndData(data, category, taskVal) {
  */
 function selectStart(e) {
   taskStart.value = e;
-  if(isStartSelected.value === null || isStartSelected.value === true){
+  if (isStartSelected.value === null || isStartSelected.value === true) {
     isStartSelected.value = true;
     isEndSelected.value = false;
     task.value = e;
     taskEnd.value = null;
-    emitter.emit('sratrAndEndToStart', {
+    emitter.emit("sratrAndEndToStart", {
       start: true,
       end: false,
     });
-  };
+  }
 }
 /**
  * select End list's task
@@ -314,12 +660,12 @@ function selectStart(e) {
  */
 function selectEnd(e) {
   taskEnd.value = e;
-  if(isEndSelected.value === null || isEndSelected.value === true){
+  if (isEndSelected.value === null || isEndSelected.value === true) {
     isEndSelected.value = true;
     isStartSelected.value = false;
     task.value = e;
     taskStart.value = null;
-    emitter.emit('sratrAndEndToStart', {
+    emitter.emit("sratrAndEndToStart", {
       start: false,
       end: true,
     });
@@ -340,22 +686,23 @@ function reset() {
  * @param {boolean} data - Whether data should be restored from submission state.
  */
 function setResetData(data) {
-  if(data) {
-    if(props.isSubmit) {
+  if (data) {
+    if (props.isSubmit) {
       switch (selectedRuleType.value) {
-        case 'Activity sequence':
+        case "Activity sequence":
           task.value = props.isSubmitShowDataSeq.task;
           isStartSelected.value = props.isSubmitShowDataSeq.isStartSelected;
           isEndSelected.value = props.isSubmitShowDataSeq.isEndSelected;
           break;
-        case 'Processing time':
+        case "Processing time":
           switch (selectedProcessScope.value) {
-            case 'End to end':
+            case "End to end":
               task.value = props.isSubmitShowDataPtEte.task;
-              isStartSelected.value = props.isSubmitShowDataPtEte.isStartSelected;
+              isStartSelected.value =
+                props.isSubmitShowDataPtEte.isStartSelected;
               isEndSelected.value = props.isSubmitShowDataPtEte.isEndSelected;
               break;
-            case 'Partial':
+            case "Partial":
               task.value = props.isSubmitShowDataPtP.task;
               isStartSelected.value = props.isSubmitShowDataPtP.isStartSelected;
               isEndSelected.value = props.isSubmitShowDataPtP.isEndSelected;
@@ -364,23 +711,24 @@ function setResetData(data) {
               break;
           }
           break;
-        case 'Waiting time':
+        case "Waiting time":
           switch (selectedProcessScope.value) {
-              case 'End to end':
-                task.value = props.isSubmitShowDataWtEte.task;
-                isStartSelected.value = props.isSubmitShowDataWtEte.isStartSelected;
-                isEndSelected.value = props.isSubmitShowDataWtEte.isEndSelected;
-                break;
-              case 'Partial':
-                task.value = props.isSubmitShowDataWtP.task;
-                isStartSelected.value = props.isSubmitShowDataWtP.isStartSelected;
-                isEndSelected.value = props.isSubmitShowDataWtP.isEndSelected;
-                break;
-              default:
-                break;
-            }
-            break;
-        case 'Cycle time':
+            case "End to end":
+              task.value = props.isSubmitShowDataWtEte.task;
+              isStartSelected.value =
+                props.isSubmitShowDataWtEte.isStartSelected;
+              isEndSelected.value = props.isSubmitShowDataWtEte.isEndSelected;
+              break;
+            case "Partial":
+              task.value = props.isSubmitShowDataWtP.task;
+              isStartSelected.value = props.isSubmitShowDataWtP.isStartSelected;
+              isEndSelected.value = props.isSubmitShowDataWtP.isEndSelected;
+              break;
+            default:
+              break;
+          }
+          break;
+        case "Cycle time":
           task.value = props.isSubmitShowDataCt.task;
           isStartSelected.value = props.isSubmitShowDataCt.isStartSelected;
           isEndSelected.value = props.isSubmitShowDataCt.isEndSelected;
@@ -395,28 +743,28 @@ function setResetData(data) {
 }
 
 // created() logic
-emitter.on('isRadioChange', (data) => {
+emitter.on("isRadioChange", (data) => {
   setResetData(data);
 });
-emitter.on('isRadioSeqChange', (data) => {
+emitter.on("isRadioSeqChange", (data) => {
   setResetData(data);
 });
-emitter.on('isRadioProcessScopeChange', (data) => {
-  if(data) {
+emitter.on("isRadioProcessScopeChange", (data) => {
+  if (data) {
     setResetData(data);
-  };
+  }
 });
-emitter.on('isRadioActSeqMoreChange', (data) => {
-  if(data) {
+emitter.on("isRadioActSeqMoreChange", (data) => {
+  if (data) {
     setResetData(data);
-  };
+  }
 });
-emitter.on('isRadioActSeqFromToChange', (data) => {
-  if(data) {
+emitter.on("isRadioActSeqFromToChange", (data) => {
+  if (data) {
     setResetData(data);
-  };
+  }
 });
-emitter.on('reset', data => {
+emitter.on("reset", (data) => {
   reset();
 });
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index 31e11c7..703bed4 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -1,71 +1,226 @@
 <template>
-<div class="mt-2 mb-12" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time'
-  || selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
-  <p class="h2">Time Range</p>
-  <div class=" text-sm leading-normal">
+  <div
+    class="mt-2 mb-12"
+    v-if="
+      selectedRuleType === 'Activity duration' ||
+      selectedRuleType === 'Waiting time' ||
+      selectedRuleType === 'Processing time' ||
+      selectedRuleType === 'Cycle time'
+    "
+  >
+    <p class="h2">Time Range</p>
+    <div class="text-sm leading-normal">
       <!-- Activity duration -->
       <TimeRangeDuration
-      v-if="selectedRuleType === 'Activity duration'" :time="state.timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <!-- Processing time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'All'" :time="state.timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start'" :time="state.timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds"
-         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'End'" :time="state.timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start & End'" :time="state.timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From'" :time="state.timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'To'" :time="state.timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From & To'" :time="state.timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <!-- Waiting time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'All'" :time="state.timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start'" :time="state.timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'End'" :time="state.timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start & End'" :time="state.timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From'" :time="state.timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'To'" :time="state.timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
-      && selectedActSeqFromTo === 'From & To'" :time="state.timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <!-- Cycle time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'All'" :time="state.timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start'" :time="state.timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'End'" :time="state.timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
-      && selectedActSeqMore === 'Start & End'" :time="state.timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds"
-        @max-total-seconds="maxTotalSeconds" />
+        v-if="selectedRuleType === 'Activity duration'"
+        :time="state.timeDuration"
+        :select="isSubmitDurationTime"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <!-- Processing time -->
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'All'
+        "
+        :time="state.timeCfmPtEteAll"
+        :select="isSubmitTimeCfmPtEteAll"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'Start'
+        "
+        :time="state.timeCfmPtEteStart"
+        :select="isSubmitTimeCfmPtEteStart"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'End'
+        "
+        :time="state.timeCfmPtEteEnd"
+        :select="isSubmitTimeCfmPtEteEnd"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'Start & End'
+        "
+        :time="state.timeCfmPtEteSE"
+        :select="isSubmitTimeCfmPtEteSE"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'Partial' &&
+          selectedActSeqFromTo === 'From'
+        "
+        :time="state.timeCfmPtPStart"
+        :select="isSubmitTimeCfmPtPStart"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'Partial' &&
+          selectedActSeqFromTo === 'To'
+        "
+        :time="state.timeCfmPtPEnd"
+        :select="isSubmitTimeCfmPtPEnd"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Processing time' &&
+          selectedProcessScope === 'Partial' &&
+          selectedActSeqFromTo === 'From & To'
+        "
+        :time="state.timeCfmPtPSE"
+        :select="isSubmitTimeCfmPtPSE"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <!-- Waiting time -->
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'All'
+        "
+        :time="state.timeCfmWtEteAll"
+        :select="isSubmitTimeCfmWtEteAll"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'Start'
+        "
+        :time="state.timeCfmWtEteStart"
+        :select="isSubmitTimeCfmWtEteStart"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'End'
+        "
+        :time="state.timeCfmWtEteEnd"
+        :select="isSubmitTimeCfmWtEteEnd"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'Start & End'
+        "
+        :time="state.timeCfmWtEteSE"
+        :select="isSubmitTimeCfmWtEteSE"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'Partial' &&
+          selectedActSeqFromTo === 'From'
+        "
+        :time="state.timeCfmWtPStart"
+        :select="isSubmitTimeCfmWtPStart"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'Partial' &&
+          selectedActSeqFromTo === 'To'
+        "
+        :time="state.timeCfmWtPEnd"
+        :select="isSubmitTimeCfmWtPEnd"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Waiting time' &&
+          selectedProcessScope === 'Partial' &&
+          selectedActSeqFromTo === 'From & To'
+        "
+        :time="state.timeCfmWtPSE"
+        :select="isSubmitTimeCfmWtPSE"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <!-- Cycle time -->
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Cycle time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'All'
+        "
+        :time="state.timeCfmCtEteAll"
+        :select="isSubmitTimeCfmCtEteAll"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Cycle time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'Start'
+        "
+        :time="state.timeCfmCtEteStart"
+        :select="isSubmitTimeCfmCtEteStart"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Cycle time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'End'
+        "
+        :time="state.timeCfmCtEteEnd"
+        :select="isSubmitTimeCfmCtEteEnd"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+      <TimeRangeDuration
+        v-if="
+          selectedRuleType === 'Cycle time' &&
+          selectedProcessScope === 'End to end' &&
+          selectedActSeqMore === 'Start & End'
+        "
+        :time="state.timeCfmCtEteSE"
+        :select="isSubmitTimeCfmCtEteSE"
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+      />
+    </div>
   </div>
-</div>
 </template>
 <script setup>
 // The Lucia project.
@@ -80,30 +235,67 @@
  *   configuration with calendar inputs.
  */
 
-import { reactive } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useConformanceStore } from '@/stores/conformance';
-import emitter from '@/utils/emitter';
-import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
+import { reactive } from "vue";
+import { storeToRefs } from "pinia";
+import { useConformanceStore } from "@/stores/conformance";
+import emitter from "@/utils/emitter";
+import TimeRangeDuration from "@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue";
 
 const conformanceStore = useConformanceStore();
-const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
-  selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
-  cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
-  cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart,
-  cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
-  cfmWtEteWhole, cfmCtEteWhole
+const {
+  selectedRuleType,
+  selectedActivitySequence,
+  selectedMode,
+  selectedProcessScope,
+  selectedActSeqMore,
+  selectedActSeqFromTo,
+  conformanceAllTasks,
+  conformanceTask,
+  cfmSeqStart,
+  cfmSeqEnd,
+  cfmPtEteStart,
+  cfmPtEteEnd,
+  cfmPtEteSE,
+  cfmPtPStart,
+  cfmPtPEnd,
+  cfmPtPSE,
+  cfmWtEteStart,
+  cfmWtEteEnd,
+  cfmWtEteSE,
+  cfmWtPStart,
+  cfmWtPEnd,
+  cfmWtPSE,
+  cfmCtEteStart,
+  cfmCtEteEnd,
+  cfmCtEteSE,
+  cfmPtEteWhole,
+  cfmWtEteWhole,
+  cfmCtEteWhole,
 } = storeToRefs(conformanceStore);
 
-const props = defineProps(['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart',
-  'isSubmitTimeCfmPtEteEnd', 'isSubmitTimeCfmPtEteSE', 'isSubmitTimeCfmPtPStart',
-  'isSubmitTimeCfmPtPEnd', 'isSubmitTimeCfmPtPSE', 'isSubmitTimeCfmWtEteAll',
-  'isSubmitTimeCfmWtEteStart', 'isSubmitTimeCfmWtEteEnd', 'isSubmitTimeCfmWtEteSE',
-  'isSubmitTimeCfmWtPStart', 'isSubmitTimeCfmWtPEnd', 'isSubmitTimeCfmWtPSE', 'isSubmitTimeCfmCtEteAll',
-   'isSubmitTimeCfmCtEteStart', 'isSubmitTimeCfmCtEteEnd', 'isSubmitTimeCfmCtEteSE'
+const props = defineProps([
+  "isSubmitDurationTime",
+  "isSubmitTimeCfmPtEteAll",
+  "isSubmitTimeCfmPtEteStart",
+  "isSubmitTimeCfmPtEteEnd",
+  "isSubmitTimeCfmPtEteSE",
+  "isSubmitTimeCfmPtPStart",
+  "isSubmitTimeCfmPtPEnd",
+  "isSubmitTimeCfmPtPSE",
+  "isSubmitTimeCfmWtEteAll",
+  "isSubmitTimeCfmWtEteStart",
+  "isSubmitTimeCfmWtEteEnd",
+  "isSubmitTimeCfmWtEteSE",
+  "isSubmitTimeCfmWtPStart",
+  "isSubmitTimeCfmWtPEnd",
+  "isSubmitTimeCfmWtPSE",
+  "isSubmitTimeCfmCtEteAll",
+  "isSubmitTimeCfmCtEteStart",
+  "isSubmitTimeCfmCtEteEnd",
+  "isSubmitTimeCfmCtEteSE",
 ]);
 
-const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
+const emit = defineEmits(["min-total-seconds", "max-total-seconds"]);
 
 const state = reactive({
   timeDuration: null, // Activity duration
@@ -164,14 +356,14 @@ const storeRefs = {
  * @param {number} e - The minimum total seconds.
  */
 function minTotalSeconds(e) {
-  emit('min-total-seconds', e);
+  emit("min-total-seconds", e);
 }
 /**
  * get min total seconds
  * @param {number} e - The maximum total seconds.
  */
 function maxTotalSeconds(e) {
-  emit('max-total-seconds', e);
+  emit("max-total-seconds", e);
 }
 /**
  * get Time Range(duration)
@@ -182,35 +374,35 @@ function maxTotalSeconds(e) {
  * @returns {object} {min:12, max:345}
  */
 function getDurationTime(data, category, task, taskTwo) {
-  let result = {min:0, max:0};
+  let result = { min: 0, max: 0 };
   switch (category) {
-    case 'act':
-      data.forEach(i => {
-        if(i.label === task) {
+    case "act":
+      data.forEach((i) => {
+        if (i.label === task) {
           result = i.duration;
         }
       });
       break;
-    case 'single':
-      data.forEach(i => {
-        if(i.task === task) {
+    case "single":
+      data.forEach((i) => {
+        if (i.task === task) {
           result = i.time;
         }
       });
       break;
-    case 'double':
-      data.forEach(i => {
-        if(i.start === task && i.end === taskTwo) {
+    case "double":
+      data.forEach((i) => {
+        if (i.start === task && i.end === taskTwo) {
           result = i.time;
         }
       });
       break;
-    case 'all':
+    case "all":
       result = data;
-      break
+      break;
     default:
       break;
-  };
+  }
   return result;
 }
 /**
@@ -249,148 +441,235 @@ function reset() {
 }
 
 // created() logic
-emitter.on('actRadioData', (data) => {
+emitter.on("actRadioData", (data) => {
   const category = data.category;
   const task = data.task;
 
   const handleDoubleSelection = (startKey, endKey, timeKey, durationType) => {
-      state[startKey] = task;
-      state[timeKey] = { min: 0, max: 0 };
-      if (state[endKey]) {
-          state[timeKey] = getDurationTime(storeRefs[durationType].value, 'double', task, state[endKey]);
-      }
+    state[startKey] = task;
+    state[timeKey] = { min: 0, max: 0 };
+    if (state[endKey]) {
+      state[timeKey] = getDurationTime(
+        storeRefs[durationType].value,
+        "double",
+        task,
+        state[endKey],
+      );
+    }
   };
 
   const handleSingleSelection = (key, timeKey, durationType) => {
-      state[timeKey] = getDurationTime(storeRefs[durationType].value, 'single', task);
+    state[timeKey] = getDurationTime(
+      storeRefs[durationType].value,
+      "single",
+      task,
+    );
   };
 
   switch (category) {
-      // Activity duration
-      case 'cfmDur':
-          state.timeDuration = getDurationTime(conformanceAllTasks.value, 'act', task);
-          break;
-      // Processing time
-      case 'cfmPtEteStart':
-          handleSingleSelection('cfmPtEteStart', 'timeCfmPtEteStart', 'cfmPtEteStart');
-          break;
-      case 'cfmPtEteEnd':
-          handleSingleSelection('cfmPtEteEnd', 'timeCfmPtEteEnd', 'cfmPtEteEnd');
-          break;
-      case 'cfmPtEteSEStart':
-          handleDoubleSelection('selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd', 'timeCfmPtEteSE', 'cfmPtEteSE');
-          break;
-      case 'cfmPtEteSEEnd':
-          handleDoubleSelection('selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart', 'timeCfmPtEteSE', 'cfmPtEteSE');
-          break;
-      case 'cfmPtPStart':
-          handleSingleSelection('cfmPtPStart', 'timeCfmPtPStart', 'cfmPtPStart');
-          break;
-      case 'cfmPtPEnd':
-          handleSingleSelection('cfmPtPEnd', 'timeCfmPtPEnd', 'cfmPtPEnd');
-          break;
-      case 'cfmPtPSEStart':
-          handleDoubleSelection('selectCfmPtPSEStart', 'selectCfmPtPSEEnd', 'timeCfmPtPSE', 'cfmPtPSE');
-          break;
-      case 'cfmPtPSEEnd':
-          handleDoubleSelection('selectCfmPtPSEEnd', 'selectCfmPtPSEStart', 'timeCfmPtPSE', 'cfmPtPSE');
-          break;
-      // Waiting time
-      case 'cfmWtEteStart':
-          handleSingleSelection('cfmWtEteStart', 'timeCfmWtEteStart', 'cfmWtEteStart');
-          break;
-      case 'cfmWtEteEnd':
-          handleSingleSelection('cfmWtEteEnd', 'timeCfmWtEteEnd', 'cfmWtEteEnd');
-          break;
-      case 'cfmWtEteSEStart':
-          handleDoubleSelection('selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd', 'timeCfmWtEteSE', 'cfmWtEteSE');
-          break;
-      case 'cfmWtEteSEEnd':
-          handleDoubleSelection('selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart', 'timeCfmWtEteSE', 'cfmWtEteSE');
-          break;
-      case 'cfmWtPStart':
-          handleSingleSelection('cfmWtPStart', 'timeCfmWtPStart', 'cfmWtPStart');
-          break;
-      case 'cfmWtPEnd':
-          handleSingleSelection('cfmWtPEnd', 'timeCfmWtPEnd', 'cfmWtPEnd');
-          break;
-      case 'cfmWtPSEStart':
-          handleDoubleSelection('selectCfmWtPSEStart', 'selectCfmWtPSEEnd', 'timeCfmWtPSE', 'cfmWtPSE');
-          break;
-      case 'cfmWtPSEEnd':
-          handleDoubleSelection('selectCfmWtPSEEnd', 'selectCfmWtPSEStart', 'timeCfmWtPSE', 'cfmWtPSE');
-          break;
-      // Cycle time
-      case 'cfmCtEteStart':
-          handleSingleSelection('cfmCtEteStart', 'timeCfmCtEteStart', 'cfmCtEteStart');
-          break;
-      case 'cfmCtEteEnd':
-          handleSingleSelection('cfmCtEteEnd', 'timeCfmCtEteEnd', 'cfmCtEteEnd');
-          break;
-      case 'cfmCtEteSEStart':
-          handleDoubleSelection('selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd', 'timeCfmCtEteSE', 'cfmCtEteSE');
-          break;
-      case 'cfmCtEteSEEnd':
-          handleDoubleSelection('selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart', 'timeCfmCtEteSE', 'cfmCtEteSE');
-          break;
-      default:
-          break;
-    };
-});
-emitter.on('reset', (data) => {
-  reset();
-});
-emitter.on('isRadioChange', (data) => {
-  if(data) {
-    reset();
-    switch (selectedRuleType.value) {
-      case 'Processing time':
-        state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
-        state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
-        break;
-      case 'Waiting time':
-        state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
-        state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
-        break;
-      case 'Cycle time':
-        state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
-        state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
-        break;
-      default:
-        break;
-    };
+    // Activity duration
+    case "cfmDur":
+      state.timeDuration = getDurationTime(
+        conformanceAllTasks.value,
+        "act",
+        task,
+      );
+      break;
+    // Processing time
+    case "cfmPtEteStart":
+      handleSingleSelection(
+        "cfmPtEteStart",
+        "timeCfmPtEteStart",
+        "cfmPtEteStart",
+      );
+      break;
+    case "cfmPtEteEnd":
+      handleSingleSelection("cfmPtEteEnd", "timeCfmPtEteEnd", "cfmPtEteEnd");
+      break;
+    case "cfmPtEteSEStart":
+      handleDoubleSelection(
+        "selectCfmPtEteSEStart",
+        "selectCfmPtEteSEEnd",
+        "timeCfmPtEteSE",
+        "cfmPtEteSE",
+      );
+      break;
+    case "cfmPtEteSEEnd":
+      handleDoubleSelection(
+        "selectCfmPtEteSEEnd",
+        "selectCfmPtEteSEStart",
+        "timeCfmPtEteSE",
+        "cfmPtEteSE",
+      );
+      break;
+    case "cfmPtPStart":
+      handleSingleSelection("cfmPtPStart", "timeCfmPtPStart", "cfmPtPStart");
+      break;
+    case "cfmPtPEnd":
+      handleSingleSelection("cfmPtPEnd", "timeCfmPtPEnd", "cfmPtPEnd");
+      break;
+    case "cfmPtPSEStart":
+      handleDoubleSelection(
+        "selectCfmPtPSEStart",
+        "selectCfmPtPSEEnd",
+        "timeCfmPtPSE",
+        "cfmPtPSE",
+      );
+      break;
+    case "cfmPtPSEEnd":
+      handleDoubleSelection(
+        "selectCfmPtPSEEnd",
+        "selectCfmPtPSEStart",
+        "timeCfmPtPSE",
+        "cfmPtPSE",
+      );
+      break;
+    // Waiting time
+    case "cfmWtEteStart":
+      handleSingleSelection(
+        "cfmWtEteStart",
+        "timeCfmWtEteStart",
+        "cfmWtEteStart",
+      );
+      break;
+    case "cfmWtEteEnd":
+      handleSingleSelection("cfmWtEteEnd", "timeCfmWtEteEnd", "cfmWtEteEnd");
+      break;
+    case "cfmWtEteSEStart":
+      handleDoubleSelection(
+        "selectCfmWtEteSEStart",
+        "selectCfmWtEteSEEnd",
+        "timeCfmWtEteSE",
+        "cfmWtEteSE",
+      );
+      break;
+    case "cfmWtEteSEEnd":
+      handleDoubleSelection(
+        "selectCfmWtEteSEEnd",
+        "selectCfmWtEteSEStart",
+        "timeCfmWtEteSE",
+        "cfmWtEteSE",
+      );
+      break;
+    case "cfmWtPStart":
+      handleSingleSelection("cfmWtPStart", "timeCfmWtPStart", "cfmWtPStart");
+      break;
+    case "cfmWtPEnd":
+      handleSingleSelection("cfmWtPEnd", "timeCfmWtPEnd", "cfmWtPEnd");
+      break;
+    case "cfmWtPSEStart":
+      handleDoubleSelection(
+        "selectCfmWtPSEStart",
+        "selectCfmWtPSEEnd",
+        "timeCfmWtPSE",
+        "cfmWtPSE",
+      );
+      break;
+    case "cfmWtPSEEnd":
+      handleDoubleSelection(
+        "selectCfmWtPSEEnd",
+        "selectCfmWtPSEStart",
+        "timeCfmWtPSE",
+        "cfmWtPSE",
+      );
+      break;
+    // Cycle time
+    case "cfmCtEteStart":
+      handleSingleSelection(
+        "cfmCtEteStart",
+        "timeCfmCtEteStart",
+        "cfmCtEteStart",
+      );
+      break;
+    case "cfmCtEteEnd":
+      handleSingleSelection("cfmCtEteEnd", "timeCfmCtEteEnd", "cfmCtEteEnd");
+      break;
+    case "cfmCtEteSEStart":
+      handleDoubleSelection(
+        "selectCfmCtEteSEStart",
+        "selectCfmCtEteSEEnd",
+        "timeCfmCtEteSE",
+        "cfmCtEteSE",
+      );
+      break;
+    case "cfmCtEteSEEnd":
+      handleDoubleSelection(
+        "selectCfmCtEteSEEnd",
+        "selectCfmCtEteSEStart",
+        "timeCfmCtEteSE",
+        "cfmCtEteSE",
+      );
+      break;
+    default:
+      break;
   }
 });
-emitter.on('isRadioProcessScopeChange', (data) => {
-  if(data) {
-    reset();
-  };
+emitter.on("reset", (data) => {
+  reset();
 });
-emitter.on('isRadioActSeqMoreChange', (data) => {
-  if(data) {
-    if(selectedActSeqMore.value === 'All') {
+emitter.on("isRadioChange", (data) => {
+  if (data) {
+    reset();
+    switch (selectedRuleType.value) {
+      case "Processing time":
+        state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all");
+        state.timeCfmPtEteAllDefault = JSON.parse(
+          JSON.stringify(state.timeCfmPtEteAll),
+        );
+        break;
+      case "Waiting time":
+        state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
+        state.timeCfmWtEteAllDefault = JSON.parse(
+          JSON.stringify(state.timeCfmWtEteAll),
+        );
+        break;
+      case "Cycle time":
+        state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
+        state.timeCfmCtEteAllDefault = JSON.parse(
+          JSON.stringify(state.timeCfmCtEteAll),
+        );
+        break;
+      default:
+        break;
+    }
+  }
+});
+emitter.on("isRadioProcessScopeChange", (data) => {
+  if (data) {
+    reset();
+  }
+});
+emitter.on("isRadioActSeqMoreChange", (data) => {
+  if (data) {
+    if (selectedActSeqMore.value === "All") {
       switch (selectedRuleType.value) {
-        case 'Processing time':
-          state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
-          state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
+        case "Processing time":
+          state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all");
+          state.timeCfmPtEteAllDefault = JSON.parse(
+            JSON.stringify(state.timeCfmPtEteAll),
+          );
           break;
-        case 'Waiting time':
-          state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
-          state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
+        case "Waiting time":
+          state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
+          state.timeCfmWtEteAllDefault = JSON.parse(
+            JSON.stringify(state.timeCfmWtEteAll),
+          );
           break;
-        case 'Cycle time':
-          state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
-          state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
+        case "Cycle time":
+          state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
+          state.timeCfmCtEteAllDefault = JSON.parse(
+            JSON.stringify(state.timeCfmCtEteAll),
+          );
           break;
         default:
           break;
-      };
-    }else reset();
-  };
+      }
+    } else reset();
+  }
 });
-emitter.on('isRadioActSeqFromToChange', (data) => {
-  if(data) {
+emitter.on("isRadioActSeqFromToChange", (data) => {
+  if (data) {
     reset();
-  };
+  }
 });
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue
index d9b587d..6d6228b 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue
@@ -1,10 +1,19 @@
 <template>
   <ul class="space-y-2" id="cyp-conformance-result-arrow">
-    <li class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index" :title="act">
+    <li
+      class="flex justify-start items-center pr-4"
+      v-for="(act, index) in data"
+      :key="index"
+      :title="act"
+    >
       <span class="material-symbols-outlined text-primary mr-2">
         arrow_circle_down
       </span>
-      <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
+      <p
+        class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden"
+      >
+        {{ act }}
+      </p>
     </li>
   </ul>
 </template>
@@ -20,5 +29,5 @@
  *   sequences.
  */
 
-defineProps(['data', 'select']);
+defineProps(["data", "select"]);
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
index f2d8f27..fb32ba4 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
@@ -1,10 +1,19 @@
 <template>
   <ul class="space-y-2" id="cyp-conformance-result-check">
-    <li class="flex justify-start items-center pr-4" v-for="(act, index) in datadata" :key="index" :title="act">
+    <li
+      class="flex justify-start items-center pr-4"
+      v-for="(act, index) in datadata"
+      :key="index"
+      :title="act"
+    >
       <span class="material-symbols-outlined text-primary mr-2">
         check_circle
       </span>
-      <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
+      <p
+        class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden"
+      >
+        {{ act }}
+      </p>
     </li>
   </ul>
 </template>
@@ -20,20 +29,26 @@
  *   matched activities.
  */
 
-import { ref, watch } from 'vue';
-import emitter from '@/utils/emitter';
+import { ref, watch } from "vue";
+import emitter from "@/utils/emitter";
 
-const props = defineProps(['data', 'select']);
+const props = defineProps(["data", "select"]);
 
 const datadata = ref(props.select);
 
-watch(() => props.data, (newValue) => {
-  datadata.value = newValue;
-});
+watch(
+  () => props.data,
+  (newValue) => {
+    datadata.value = newValue;
+  },
+);
 
-watch(() => props.select, (newValue) => {
-  datadata.value = newValue;
-});
+watch(
+  () => props.select,
+  (newValue) => {
+    datadata.value = newValue;
+  },
+);
 
-emitter.on('reset', (val) => datadata.value = val);
+emitter.on("reset", (val) => (datadata.value = val));
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
index baa7f7f..b6f7ce6 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
@@ -1,9 +1,19 @@
 <template>
   <ul id="cyp-conformance-result-dot">
-    <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in data" :key="index + act" :title="act">
-      <span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>
+    <li
+      class="flex justify-start items-center py-1 pr-4"
+      v-for="(act, index) in data"
+      :key="index + act"
+      :title="act"
+    >
+      <span class="material-symbols-outlined disc !text-sm align-middle mr-1"
+        >fiber_manual_record</span
+      >
       <span class="mr-2 block w-12">{{ act.category }}</span>
-      <span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.task }}</span>
+      <span
+        class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block"
+        >{{ act.task }}</span
+      >
     </li>
   </ul>
 </template>
@@ -19,16 +29,20 @@
  *   and task pairs.
  */
 
-import { ref, watch } from 'vue';
-import emitter from '@/utils/emitter';
+import { ref, watch } from "vue";
+import emitter from "@/utils/emitter";
 
-const props = defineProps(['timeResultData', 'select']);
+const props = defineProps(["timeResultData", "select"]);
 
 const data = ref(props.select);
 
-watch(() => props.timeResultData, (newValue) => {
-  data.value = newValue;
-}, { deep: true });
+watch(
+  () => props.timeResultData,
+  (newValue) => {
+    data.value = newValue;
+  },
+  { deep: true },
+);
 
-emitter.on('reset', (val) => data.value = val);
+emitter.on("reset", (val) => (data.value = val));
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
index 5fd0cb0..6b29c28 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -1,11 +1,23 @@
 <template>
   <div id="timeranges_s_e_container" class="flex justify-between items-center">
-    <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax"
-      @total-seconds="minTotalSeconds" :value="durationMin">
+    <Durationjs
+      :max="minVuemax"
+      :min="minVuemin"
+      :size="'min'"
+      :updateMax="updateMax"
+      @total-seconds="minTotalSeconds"
+      :value="durationMin"
+    >
     </Durationjs>
-      <span>~</span>
-    <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin"
-      @total-seconds="maxTotalSeconds" :value="durationMax">
+    <span>~</span>
+    <Durationjs
+      :max="maxVuemax"
+      :min="maxVuemin"
+      :size="'max'"
+      :updateMin="updateMin"
+      @total-seconds="maxTotalSeconds"
+      :value="durationMax"
+    >
     </Durationjs>
   </div>
 </template>
@@ -22,11 +34,11 @@
  *   for conformance time-based rules.
  */
 
-import { ref, watch } from 'vue';
-import Durationjs from '@/components/durationjs.vue';
+import { ref, watch } from "vue";
+import Durationjs from "@/components/durationjs.vue";
 
-const props = defineProps(['time', 'select']);
-const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
+const props = defineProps(["time", "select"]);
+const emit = defineEmits(["min-total-seconds", "max-total-seconds"]);
 
 const timeData = ref({ min: 0, max: 0 });
 const timeRangeMin = ref(0);
@@ -56,7 +68,7 @@ function setTimeValue() {
 function minTotalSeconds(e) {
   timeRangeMin.value = e;
   updateMin.value = e;
-  emit('min-total-seconds', e);
+  emit("min-total-seconds", e);
 }
 
 /**
@@ -66,29 +78,33 @@ function minTotalSeconds(e) {
 function maxTotalSeconds(e) {
   timeRangeMax.value = e;
   updateMax.value = e;
-  emit('max-total-seconds', e);
+  emit("max-total-seconds", e);
 }
 
-watch(() => props.time, (newValue, oldValue) => {
-  durationMax.value = null;
-  durationMin.value = null;
-  if(newValue === null) {
-    timeData.value = { min: 0, max: 0 };
-  }else if(newValue !== null) {
-    timeData.value = { min: newValue.min, max: newValue.max };
-    emit('min-total-seconds', newValue.min);
-    emit('max-total-seconds', newValue.max);
-  }
-  setTimeValue();
-}, { deep: true, immediate: true });
+watch(
+  () => props.time,
+  (newValue, oldValue) => {
+    durationMax.value = null;
+    durationMin.value = null;
+    if (newValue === null) {
+      timeData.value = { min: 0, max: 0 };
+    } else if (newValue !== null) {
+      timeData.value = { min: newValue.min, max: newValue.max };
+      emit("min-total-seconds", newValue.min);
+      emit("max-total-seconds", newValue.max);
+    }
+    setTimeValue();
+  },
+  { deep: true, immediate: true },
+);
 
 // created
-if(props.select){
-  if(Object.keys(props.select.base).length !== 0) {
+if (props.select) {
+  if (Object.keys(props.select.base).length !== 0) {
     timeData.value = props.select.base;
     setTimeValue();
   }
-  if(Object.keys(props.select.rule).length !== 0) {
+  if (Object.keys(props.select.rule).length !== 0) {
     durationMin.value = props.select.rule.min;
     durationMax.value = props.select.rule.max;
   }
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index 207bb7e..446aa88 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -1,65 +1,112 @@
 <template>
-<Dialog :visible="listModal" @update:visible="emit('closeModal', $event)"  modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass">
-  <template #header>
-    <div class=" py-5">
-      <p class="text-base font-bold">Non-conformance Issue</p>
-    </div>
-  </template>
-  <div class="h-full flex items-start justify-start p-4">
-    <!-- Trace List -->
-    <section class="w-80 h-full pr-4">
-      <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
-      <p class="text-primary h2 px-2 mb-2">
-        <span class="material-symbols-outlined !text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
-      </p>
-      <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
-        <table class="border-separate border-spacing-x-2 text-sm">
-          <caption class="hidden">Trace List</caption>
-          <thead class="sticky top-0 z-10 bg-neutral-100">
-            <tr>
-              <th class="h2 px-2 border-b border-neutral-500">Trace</th>
-              <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
-              <td class="p-2">#{{ trace.id }}</td>
-              <td class="p-2 w-24">
-                <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
-                  <div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
-                </div>
-              </td>
-              <td class="py-2 text-right">{{ trace.count }}</td>
-              <td class="p-2 text-right">{{ trace.ratio }}%</td>
-            </tr>
-          </tbody>
-        </table>
+  <Dialog
+    :visible="listModal"
+    @update:visible="emit('closeModal', $event)"
+    modal
+    :style="{ width: '90vw', height: '90vh' }"
+    :contentClass="contentClass"
+  >
+    <template #header>
+      <div class="py-5">
+        <p class="text-base font-bold">Non-conformance Issue</p>
       </div>
-    </section>
-    <!-- Trace item Table -->
-    <section class="px-4 py-2 h-full w-[calc(100%_-_320px)] bg-neutral-10 rounded-xl">
-      <p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p>
-      <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
-        <div class="h-full w-full">
-          <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
+    </template>
+    <div class="h-full flex items-start justify-start p-4">
+      <!-- Trace List -->
+      <section class="w-80 h-full pr-4">
+        <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
+        <p class="text-primary h2 px-2 mb-2">
+          <span class="material-symbols-outlined !text-sm align-[-10%] mr-2"
+            >info</span
+          >Click trace number to see more.
+        </p>
+        <div
+          class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]"
+        >
+          <table class="border-separate border-spacing-x-2 text-sm">
+            <caption class="hidden">
+              Trace List
+            </caption>
+            <thead class="sticky top-0 z-10 bg-neutral-100">
+              <tr>
+                <th class="h2 px-2 border-b border-neutral-500">Trace</th>
+                <th
+                  class="h2 px-2 border-b border-neutral-500 text-start"
+                  colspan="3"
+                >
+                  Occurrences
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(trace, key) in traceList"
+                :key="key"
+                class="cursor-pointer hover:text-primary"
+                @click="switchCaseData(trace.id)"
+              >
+                <td class="p-2">#{{ trace.id }}</td>
+                <td class="p-2 w-24">
+                  <div
+                    class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"
+                  >
+                    <div
+                      class="h-full bg-primary"
+                      :style="progressWidth(trace.value)"
+                    ></div>
+                  </div>
+                </td>
+                <td class="py-2 text-right">{{ trace.count }}</td>
+                <td class="p-2 text-right">{{ trace.ratio }}%</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
-      </div>
-      <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable" @scroll="handleScroll">
-          <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
+      </section>
+      <!-- Trace item Table -->
+      <section
+        class="px-4 py-2 h-full w-[calc(100%_-_320px)] bg-neutral-10 rounded-xl"
+      >
+        <p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p>
+        <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
+          <div class="h-full w-full">
+            <div
+              id="cfmTrace"
+              ref="cfmTrace"
+              class="h-full min-w-full relative"
+            ></div>
+          </div>
+        </div>
+        <div
+          class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable"
+          @scroll="handleScroll"
+        >
+          <DataTable
+            :value="caseData"
+            showGridlines
+            tableClass="text-sm"
+            breakpoint="0"
+          >
             <div v-for="(col, index) in columnData" :key="index">
               <Column :field="col.field" :header="col.header">
                 <template #body="{ data }">
-                  <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
+                  <div
+                    :class="
+                      data[col.field]?.length > 18
+                        ? 'whitespace-normal'
+                        : 'whitespace-nowrap'
+                    "
+                  >
                     {{ data[col.field] }}
                   </div>
                 </template>
               </Column>
             </div>
           </DataTable>
-      </div>
-    </section>
-  </div>
-</Dialog>
+        </div>
+      </section>
+    </div>
+  </Dialog>
 </template>
 <script setup>
 // The Lucia project.
@@ -74,30 +121,39 @@
  *   results with expandable activity sequences.
  */
 
-import { ref, computed, watch, nextTick, useTemplateRef } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useConformanceStore } from '@/stores/conformance';
-import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
+import { ref, computed, watch, nextTick, useTemplateRef } from "vue";
+import { storeToRefs } from "pinia";
+import { useConformanceStore } from "@/stores/conformance";
+import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
 
-const props = defineProps(['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category']);
-const emit = defineEmits(['closeModal']);
+const props = defineProps([
+  "listModal",
+  "listNo",
+  "traceId",
+  "firstCases",
+  "listTraces",
+  "taskSeq",
+  "cases",
+  "category",
+]);
+const emit = defineEmits(["closeModal"]);
 
 const conformanceStore = useConformanceStore();
 const { infinite404 } = storeToRefs(conformanceStore);
 
 // template ref
-const cfmTrace = useTemplateRef('cfmTrace');
+const cfmTrace = useTemplateRef("cfmTrace");
 
 // data
-const contentClass = ref('!bg-neutral-100 border-t border-neutral-300 h-full');
+const contentClass = ref("!bg-neutral-100 border-t border-neutral-300 h-full");
 const showTraceId = ref(null);
 const infiniteData = ref(null);
 const maxItems = ref(false);
 const infiniteFinish = ref(true); // Whether infinite scroll loading is complete
 const startNum = ref(0);
 const processMap = ref({
-  nodes:[],
-  edges:[],
+  nodes: [],
+  edges: [],
 });
 
 // computed
@@ -106,23 +162,27 @@ const traceTotal = computed(() => {
 });
 
 const traceList = computed(() => {
-  const sum = props.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+  const sum = props.listTraces
+    .map((trace) => trace.count)
+    .reduce((acc, cur) => acc + cur, 0);
 
-  return props.listTraces.map(trace => {
-    return {
-      id: trace.id,
-      value: Number((getPercentLabel(trace.count / sum))),
-      count: trace.count.toLocaleString('en-US'),
-      count_base: trace.count,
-      ratio: getPercentLabel(trace.count / sum),
-    };
-  }).sort((x, y) => x.id - y.id);
+  return props.listTraces
+    .map((trace) => {
+      return {
+        id: trace.id,
+        value: Number(getPercentLabel(trace.count / sum)),
+        count: trace.count.toLocaleString("en-US"),
+        count_base: trace.count,
+        ratio: getPercentLabel(trace.count / sum),
+      };
+    })
+    .sort((x, y) => x.id - y.id);
 });
 
 const caseData = computed(() => {
-  if(infiniteData.value !== null){
+  if (infiniteData.value !== null) {
     const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
-    data.forEach(item => {
+    data.forEach((item) => {
       item.facets.forEach((facet, index) => {
         item[`fac_${index}`] = facet.value; // Create a new key-value pair
       });
@@ -132,47 +192,74 @@ const caseData = computed(() => {
         item[`att_${index}`] = attribute.value; // Create a new key-value pair
       });
       delete item.attributes; // Remove the original attributes property
-    })
+    });
     return data;
   }
 });
 
 const columnData = computed(() => {
   const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
-  const facetName = facName => facName.trim().replace(/^(.)(.*)$/, (match, firstChar, restOfString) => firstChar.toUpperCase() + restOfString.toLowerCase());
+  const facetName = (facName) =>
+    facName
+      .trim()
+      .replace(
+        /^(.)(.*)$/,
+        (match, firstChar, restOfString) =>
+          firstChar.toUpperCase() + restOfString.toLowerCase(),
+      );
 
   const result = [
-    { field: 'id', header: 'Case Id' },
-    { field: 'started_at', header: 'Start time' },
-    { field: 'completed_at', header: 'End time' },
-    ...data[0].facets.map((fac, index) => ({ field: `fac_${index}`, header: facetName(fac.name) })),
-    ...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
+    { field: "id", header: "Case Id" },
+    { field: "started_at", header: "Start time" },
+    { field: "completed_at", header: "End time" },
+    ...data[0].facets.map((fac, index) => ({
+      field: `fac_${index}`,
+      header: facetName(fac.name),
+    })),
+    ...data[0].attributes.map((att, index) => ({
+      field: `att_${index}`,
+      header: att.key,
+    })),
   ];
-  return result
+  return result;
 });
 
 // watch
-watch(() => props.listModal, (newValue) => { // Draw the chart when the modal is opened for the first time
-  if(newValue) createCy();
-});
+watch(
+  () => props.listModal,
+  (newValue) => {
+    // Draw the chart when the modal is opened for the first time
+    if (newValue) createCy();
+  },
+);
 
-watch(() => props.taskSeq, (newValue) => {
-  if (newValue !== null) createCy();
-});
+watch(
+  () => props.taskSeq,
+  (newValue) => {
+    if (newValue !== null) createCy();
+  },
+);
 
-watch(() => props.traceId, (newValue) => {
-  // Update showTraceId when the traceId prop changes
-  showTraceId.value = newValue;
-});
+watch(
+  () => props.traceId,
+  (newValue) => {
+    // Update showTraceId when the traceId prop changes
+    showTraceId.value = newValue;
+  },
+);
 
 watch(showTraceId, (newValue, oldValue) => {
-  const isScrollTop = document.querySelector('.infiniteTable');
-  if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
+  const isScrollTop = document.querySelector(".infiniteTable");
+  if (isScrollTop && typeof isScrollTop.scrollTop !== "undefined")
+    if (newValue !== oldValue) isScrollTop.scrollTop = 0;
 });
 
-watch(() => props.firstCases, (newValue) => {
-  infiniteData.value = newValue;
-});
+watch(
+  () => props.firstCases,
+  (newValue) => {
+    infiniteData.value = newValue;
+  },
+);
 
 watch(infinite404, (newValue) => {
   if (newValue === 404) maxItems.value = true;
@@ -184,8 +271,8 @@ watch(infinite404, (newValue) => {
  * @param   {number} val - The raw ratio value.
  * @returns {string} The formatted percentage string.
  */
-function getPercentLabel(val){
-  if((val * 100).toFixed(1) >= 100) return 100;
+function getPercentLabel(val) {
+  if ((val * 100).toFixed(1) >= 100) return 100;
   else return parseFloat((val * 100).toFixed(1));
 }
 /**
@@ -193,78 +280,93 @@ function getPercentLabel(val){
  * @param   {number} value - The percentage value.
  * @returns {string} The CSS width style string.
  */
-function progressWidth(value){
-  return `width:${value}%;`
+function progressWidth(value) {
+  return `width:${value}%;`;
 }
 /**
  * switch case data
  * @param {number} id case id
  */
 async function switchCaseData(id) {
-  if(id == showTraceId.value) return;
+  if (id == showTraceId.value) return;
   infinite404.value = null;
   maxItems.value = false;
   startNum.value = 0;
 
   let result;
-  if(props.category === 'issue') result = await conformanceStore.getConformanceTraceDetail(props.listNo, id, 0);
-  else if(props.category === 'loop') result = await conformanceStore.getConformanceLoopsTraceDetail(props.listNo, id, 0);
+  if (props.category === "issue")
+    result = await conformanceStore.getConformanceTraceDetail(
+      props.listNo,
+      id,
+      0,
+    );
+  else if (props.category === "loop")
+    result = await conformanceStore.getConformanceLoopsTraceDetail(
+      props.listNo,
+      id,
+      0,
+    );
   infiniteData.value = await result;
   showTraceId.value = id; // Set after getDetail so the case table finishes loading before switching showTraceId
 }
 /**
  * Assembles the trace element nodes data for Cytoscape rendering.
  */
-function setNodesData(){
+function setNodesData() {
   // Clear nodes to prevent accumulation on each render
   processMap.value.nodes = [];
   // Populate nodes with data returned from the API call
-  if(props.taskSeq !== null) {
+  if (props.taskSeq !== null) {
     props.taskSeq.forEach((node, index) => {
       processMap.value.nodes.push({
         data: {
           id: index,
           label: node,
-          backgroundColor: '#CCE5FF',
-          bordercolor: '#003366',
-          shape: 'round-rectangle',
+          backgroundColor: "#CCE5FF",
+          bordercolor: "#003366",
+          shape: "round-rectangle",
           height: 80,
-          width: 100
-        }
+          width: 100,
+        },
       });
     });
-  };
+  }
 }
 /**
  * Assembles the trace edge line data for Cytoscape rendering.
  */
-function setEdgesData(){
+function setEdgesData() {
   processMap.value.edges = [];
-  if(props.taskSeq !== null) {
+  if (props.taskSeq !== null) {
     props.taskSeq.forEach((edge, index) => {
       processMap.value.edges.push({
         data: {
           source: `${index}`,
           target: `${index + 1}`,
           lineWidth: 1,
-          style: 'solid'
-        }
+          style: "solid",
+        },
       });
     });
-  };
+  }
   // The number of edges is one less than the number of nodes
   processMap.value.edges.pop();
 }
 /**
  * create trace cytoscape's map
  */
-function createCy(){
+function createCy() {
   nextTick(() => {
     const graphId = cfmTrace.value;
 
     setNodesData();
     setEdgesData();
-    if(graphId !== null) cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
+    if (graphId !== null)
+      cytoscapeMapTrace(
+        processMap.value.nodes,
+        processMap.value.edges,
+        graphId,
+      );
   });
 }
 /**
@@ -273,12 +375,16 @@ function createCy(){
 async function fetchData() {
   try {
     infiniteFinish.value = false;
-    startNum.value += 20
-    const result = await conformanceStore.getConformanceTraceDetail(props.listNo, showTraceId.value, startNum.value);
+    startNum.value += 20;
+    const result = await conformanceStore.getConformanceTraceDetail(
+      props.listNo,
+      showTraceId.value,
+      startNum.value,
+    );
     infiniteData.value = [...infiniteData.value, ...result];
     infiniteFinish.value = true;
-  } catch(error) {
-    console.error('Failed to load data:', error);
+  } catch (error) {
+    console.error("Failed to load data:", error);
   }
 }
 /**
@@ -286,10 +392,16 @@ async function fetchData() {
  * @param {Event} event - The scroll event.
  */
 function handleScroll(event) {
-  if(maxItems.value || infiniteData.value.length < 20 || infiniteFinish.value === false) return;
+  if (
+    maxItems.value ||
+    infiniteData.value.length < 20 ||
+    infiniteFinish.value === false
+  )
+    return;
 
   const container = event.target;
-  const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;
+  const overScrollHeight =
+    container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;
 
   if (overScrollHeight) fetchData();
 }
@@ -298,22 +410,22 @@ function handleScroll(event) {
 @reference "../../../assets/tailwind.css";
 /* Progress bar color */
 :deep(.p-progressbar .p-progressbar-value) {
-  @apply bg-primary
+  @apply bg-primary;
 }
 /* Table set */
 :deep(.p-datatable-thead) {
-  @apply sticky top-0 left-0 z-10 bg-neutral-10
+  @apply sticky top-0 left-0 z-10 bg-neutral-10;
 }
 :deep(.p-datatable .p-datatable-thead > tr > th) {
   @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500;
   white-space: nowrap;
 }
 :deep(.p-datatable .p-datatable-tbody > tr > td) {
-  @apply border-neutral-500 !border-t-0 text-center
+  @apply border-neutral-500 !border-t-0 text-center;
 }
 /* Center header title */
 :deep(.p-column-header-content) {
-  @apply justify-center
+  @apply justify-center;
 }
 :deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
   min-width: 72px;
diff --git a/src/components/Discover/Map/Filter/ActAndSeq.vue b/src/components/Discover/Map/Filter/ActAndSeq.vue
index d2ec503..8964bd4 100644
--- a/src/components/Discover/Map/Filter/ActAndSeq.vue
+++ b/src/components/Discover/Map/Filter/ActAndSeq.vue
@@ -1,30 +1,70 @@
 <template>
   <!-- Activity List -->
-  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
+  <div
+    class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full"
+  >
     <div class="flex justify-between items-center my-2 flex-wrap">
       <p class="h2">Activity List&nbsp({{ data.length }})</p>
     </div>
     <!-- Table -->
-    <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]">
-      <table class="border-separate border-spacing-x-2 table-auto min-w-full text-sm" :class="data.length === 0? 'h-full': null">
-        <caption class="hidden">Activity List</caption>
+    <div
+      class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]"
+    >
+      <table
+        class="border-separate border-spacing-x-2 table-auto min-w-full text-sm"
+        :class="data.length === 0 ? 'h-full' : null"
+      >
+        <caption class="hidden">
+          Activity List
+        </caption>
         <thead class="sticky top-0 left-0 z-10 bg-neutral-10">
           <tr>
-            <th class="text-start font-semibold leading-10 px-2 border-b border-neutral-500">Activity</th>
-            <th class="font-semibold leading-10 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
+            <th
+              class="text-start font-semibold leading-10 px-2 border-b border-neutral-500"
+            >
+              Activity
+            </th>
+            <th
+              class="font-semibold leading-10 px-2 border-b border-neutral-500 text-start"
+              colspan="3"
+            >
+              Occurrences
+            </th>
           </tr>
         </thead>
-        <Draggable :list="data" :group="{ name: 'activity', pull: 'clone', put: false }" itemKey="name" tag="tbody" animation="300" @end="onEnd"  :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" :sort="false">
+        <Draggable
+          :list="data"
+          :group="{ name: 'activity', pull: 'clone', put: false }"
+          itemKey="name"
+          tag="tbody"
+          animation="300"
+          @end="onEnd"
+          :fallbackTolerance="5"
+          :forceFallback="true"
+          :ghostClass="'ghostSelected'"
+          :dragClass="'dragSelected'"
+          :sort="false"
+        >
           <template #item="{ element, index }">
-            <tr @dblclick="moveActItem(index, element)" :class="listSequence.includes(element) ? 'text-primary' : ''">
+            <tr
+              @dblclick="moveActItem(index, element)"
+              :class="listSequence.includes(element) ? 'text-primary' : ''"
+            >
               <td class="px-4 py-2" :id="element.label">{{ element.label }}</td>
               <td class="px-4 py-2 w-24">
-                <div class="h-4 min-w-[96px] bg-neutral-300 rounded-sm overflow-hidden">
-                  <div class="h-full bg-primary" :style="progressWidth(element.occ_value)"></div>
+                <div
+                  class="h-4 min-w-[96px] bg-neutral-300 rounded-sm overflow-hidden"
+                >
+                  <div
+                    class="h-full bg-primary"
+                    :style="progressWidth(element.occ_value)"
+                  ></div>
                 </div>
               </td>
               <td class="px-4 py-2 text-right">{{ element.occurrences }}</td>
-              <td class="px-4 py-2 text-right">{{ element.occurrence_ratio }}</td>
+              <td class="px-4 py-2 text-right">
+                {{ element.occurrence_ratio }}
+              </td>
             </tr>
           </template>
         </Draggable>
@@ -32,24 +72,61 @@
     </div>
   </div>
   <!-- Sequence -->
-  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm">
-    <p class="h2 border-b border-500 my-2">Sequence&nbsp({{ listSeq.length }})</p>
+  <div
+    class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm"
+  >
+    <p class="h2 border-b border-500 my-2">
+      Sequence&nbsp({{ listSeq.length }})
+    </p>
     <!-- No Data -->
-    <div v-if="listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
-      <p class="text-neutral-500">Please drag and drop at least two activities here and sort.</p>
+    <div
+      v-if="listSequence.length === 0"
+      class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute"
+    >
+      <p class="text-neutral-500">
+        Please drag and drop at least two activities here and sort.
+      </p>
     </div>
     <!-- Have Data -->
-    <div class="py-4 m-auto w-full  h-[calc(100%_-_56px)]">
-      <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
-        <draggable class="h-full" :list="listSequence" :group="{name: 'activity'}" itemKey="name" animation="300" :forceFallback="true" :fallbackTolerance="5" :dragClass="'!opacity-100'" @start="onStart" @end="onEnd" :component-data="getComponentData()" :ghostClass="'!opacity-0'">
+    <div class="py-4 m-auto w-full h-[calc(100%_-_56px)]">
+      <div
+        class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence"
+      >
+        <draggable
+          class="h-full"
+          :list="listSequence"
+          :group="{ name: 'activity' }"
+          itemKey="name"
+          animation="300"
+          :forceFallback="true"
+          :fallbackTolerance="5"
+          :dragClass="'!opacity-100'"
+          @start="onStart"
+          @end="onEnd"
+          :component-data="getComponentData()"
+          :ghostClass="'!opacity-0'"
+        >
           <template #item="{ element, index }">
             <div>
               <div class="flex justify-center items-center">
-                <div class="w-full p-2 border border-primary rounded text-primary bg-neutral-10" @dblclick="moveSeqItem(index, element)"><span>{{ element.label }}</span>
+                <div
+                  class="w-full p-2 border border-primary rounded text-primary bg-neutral-10"
+                  @dblclick="moveSeqItem(index, element)"
+                >
+                  <span>{{ element.label }}</span>
                 </div>
-                <span class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger" @click.stop.native="moveSeqItem(index, element)">close</span>
+                <span
+                  class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger"
+                  @click.stop.native="moveSeqItem(index, element)"
+                  >close</span
+                >
               </div>
-              <span v-show="index !== listSeq.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"></span>
+              <span
+                v-show="
+                  index !== listSeq.length - 1 && index !== lastItemIndex - 1
+                "
+                class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"
+              ></span>
             </div>
           </template>
         </draggable>
@@ -68,8 +145,8 @@
  *   rules.
  */
 
-import { ref, computed, watch } from 'vue';
-import { sortNumEngZhtwForFilter } from '@/module/sortNumEngZhtw.js';
+import { ref, computed, watch } from "vue";
+import { sortNumEngZhtwForFilter } from "@/module/sortNumEngZhtw.js";
 
 const props = defineProps({
   filterTaskData: {
@@ -83,10 +160,10 @@ const props = defineProps({
   listSeq: {
     type: Array,
     required: true,
-  }
+  },
 });
 
-const emit = defineEmits(['update:listSeq']);
+const emit = defineEmits(["update:listSeq"]);
 
 const listSequence = ref([]);
 const filteredData = ref(props.filterTaskData);
@@ -101,13 +178,19 @@ const data = computed(() => {
   return filteredData.value;
 });
 
-watch(() => props.listSeq, (newval) => {
-  listSequence.value = newval;
-});
+watch(
+  () => props.listSeq,
+  (newval) => {
+    listSequence.value = newval;
+  },
+);
 
-watch(() => props.filterTaskData, (newval) => {
-  filteredData.value = newval;
-});
+watch(
+  () => props.filterTaskData,
+  (newval) => {
+    filteredData.value = newval;
+  },
+);
 
 /**
  * Moves an activity from the list to the sequence on double-click.
@@ -129,7 +212,7 @@ function moveSeqItem(index, element) {
 
 /** Emits the current sequence list to the parent component. */
 function getComponentData() {
-  emit('update:listSeq', listSequence.value);
+  emit("update:listSeq", listSequence.value);
 }
 
 /**
@@ -138,13 +221,13 @@ function getComponentData() {
  */
 function onStart(evt) {
   const lastChild = evt.to.lastChild.lastChild;
-  lastChild.style.display = 'none';
+  lastChild.style.display = "none";
   // Hide the dragged element at its original position
   const originalElement = evt.item;
-  originalElement.style.display = 'none';
+  originalElement.style.display = "none";
   // When dragging the last element, hide the arrow of the second-to-last element
   const listIndex = listSequence.value.length - 1;
-  if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
+  if (evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
 }
 
 /**
@@ -154,12 +237,12 @@ function onStart(evt) {
 function onEnd(evt) {
   // Show the dragged element
   const originalElement = evt.item;
-  originalElement.style.display = '';
+  originalElement.style.display = "";
   // Show the arrow after drag ends, except for the last element
   const lastChild = evt.item.lastChild;
-  const listIndex = listSequence.value.length - 1
+  const listIndex = listSequence.value.length - 1;
   if (evt.oldIndex !== listIndex) {
-      lastChild.style.display = '';
+    lastChild.style.display = "";
   }
   // Reset: hide the second-to-last element's arrow when dragging the last element
   lastItemIndex.value = null;
@@ -168,9 +251,9 @@ function onEnd(evt) {
 <style scoped>
 @reference "../../../../assets/tailwind.css";
 .ghostSelected {
-  @apply shadow-[0px_0px_100px_-10px_inset] shadow-neutral-200
+  @apply shadow-[0px_0px_100px_-10px_inset] shadow-neutral-200;
 }
 .dragSelected {
-  @apply shadow-[0px_0px_4px_2px] bg-neutral-10 shadow-neutral-300 !opacity-100
+  @apply shadow-[0px_0px_4px_2px] bg-neutral-10 shadow-neutral-300 !opacity-100;
 }
 </style>
diff --git a/src/components/Discover/Map/Filter/ActOcc.vue b/src/components/Discover/Map/Filter/ActOcc.vue
index 156be7c..3372511 100644
--- a/src/components/Discover/Map/Filter/ActOcc.vue
+++ b/src/components/Discover/Map/Filter/ActOcc.vue
@@ -1,29 +1,69 @@
 <template>
-  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
+  <div
+    class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full"
+  >
     <div class="flex justify-between items-center my-2 flex-wrap">
       <p class="h2">{{ tableTitle }}&nbsp({{ tableData.length }})</p>
     </div>
     <!-- Table -->
-    <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]">
-      <DataTable v-model:selection="select" :value="tableData" dataKey="label" breakpoint="0" tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm"  @row-select="onRowSelect">
+    <div
+      class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]"
+    >
+      <DataTable
+        v-model:selection="select"
+        :value="tableData"
+        dataKey="label"
+        breakpoint="0"
+        tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm"
+        @row-select="onRowSelect"
+      >
         <ColumnGroup type="header">
           <Row>
-              <Column selectionMode="single" headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10"></Column>
-              <Column field="label" header="Activity" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable />
-              <Column field="occurrences_base" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
+            <Column
+              selectionMode="single"
+              headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10"
+            ></Column>
+            <Column
+              field="label"
+              header="Activity"
+              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
+              sortable
+            />
+            <Column
+              field="occurrences_base"
+              header="Occurrences"
+              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
+              sortable
+              :colspan="3"
+            />
           </Row>
         </ColumnGroup>
         <Column selectionMode="single" bodyClass="!p-2 !border-0"></Column>
-        <Column field="label" header="Activity" bodyClass="break-words !py-2 !border-0"></Column>
+        <Column
+          field="label"
+          header="Activity"
+          bodyClass="break-words !py-2 !border-0"
+        ></Column>
         <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
           <template #body="slotProps">
             <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
-              <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_value)"></div>
+              <div
+                class="h-full bg-primary"
+                :style="progressWidth(slotProps.data.occ_value)"
+              ></div>
             </div>
           </template>
         </Column>
-        <Column field="occurrences" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
-        <Column field="occurrence_ratio" header="Occurrence Ratio" bodyClass="!text-right !py-2 !border-0"></Column>
+        <Column
+          field="occurrences"
+          header="Occurrences"
+          bodyClass="!text-right !py-2 !border-0"
+        ></Column>
+        <Column
+          field="occurrence_ratio"
+          header="Occurrence Ratio"
+          bodyClass="!text-right !py-2 !border-0"
+        ></Column>
       </DataTable>
     </div>
   </div>
@@ -38,7 +78,7 @@
  *   occurrences filter table with single-row radio selection.
  */
 
-import { ref, watch } from 'vue';
+import { ref, watch } from "vue";
 
 const props = defineProps({
   tableTitle: {
@@ -51,28 +91,31 @@ const props = defineProps({
   },
   tableSelect: {
     type: [Object, Array],
-    default: null
+    default: null,
   },
   progressWidth: {
     type: Function,
     required: false,
-  }
+  },
 });
 
-const emit = defineEmits(['on-row-select']);
+const emit = defineEmits(["on-row-select"]);
 
 const select = ref(null);
 const metaKey = ref(true);
 
-watch(() => props.tableSelect, (newval) => {
-  select.value = newval;
-});
+watch(
+  () => props.tableSelect,
+  (newval) => {
+    select.value = newval;
+  },
+);
 
 /**
  * Emits the selected row to the parent component.
  * @param {Event} e - The row selection event.
  */
 function onRowSelect(e) {
-  emit('on-row-select', e);
+  emit("on-row-select", e);
 }
 </script>
diff --git a/src/components/Discover/Map/Filter/ActOccCase.vue b/src/components/Discover/Map/Filter/ActOccCase.vue
index 1e06785..89a543e 100644
--- a/src/components/Discover/Map/Filter/ActOccCase.vue
+++ b/src/components/Discover/Map/Filter/ActOccCase.vue
@@ -4,36 +4,93 @@
       <p class="h2">{{ tableTitle }}&nbsp({{ data.length }})</p>
     </div>
     <!-- Table -->
-    <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]">
-      <DataTable v-model:selection="select" :value="data" breakpoint="0" tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm" @row-select="onRowSelect" @row-unselect="onRowUnselect" @row-select-all="onRowSelectAll" @row-unselect-all="onRowUnelectAll">
+    <div
+      class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]"
+    >
+      <DataTable
+        v-model:selection="select"
+        :value="data"
+        breakpoint="0"
+        tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm"
+        @row-select="onRowSelect"
+        @row-unselect="onRowUnselect"
+        @row-select-all="onRowSelectAll"
+        @row-unselect-all="onRowUnelectAll"
+      >
         <ColumnGroup type="header">
           <Row>
-              <Column selectionMode="multiple" headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10 allCheckboxAct"></Column>
-              <Column field="label" header="Activity" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable />
-              <Column field="occurrences_base" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
-              <Column field="cases_base" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" header="Cases with Activity" sortable :colspan="3" />
+            <Column
+              selectionMode="multiple"
+              headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10 allCheckboxAct"
+            ></Column>
+            <Column
+              field="label"
+              header="Activity"
+              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
+              sortable
+            />
+            <Column
+              field="occurrences_base"
+              header="Occurrences"
+              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
+              sortable
+              :colspan="3"
+            />
+            <Column
+              field="cases_base"
+              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
+              header="Cases with Activity"
+              sortable
+              :colspan="3"
+            />
           </Row>
         </ColumnGroup>
         <Column selectionMode="multiple" bodyClass="!p-2 !border-0"></Column>
-        <Column field="label" header="Activity" bodyClass="break-words !py-2 !border-0"></Column>
+        <Column
+          field="label"
+          header="Activity"
+          bodyClass="break-words !py-2 !border-0"
+        ></Column>
         <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
           <template #body="slotProps">
             <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
-              <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_value)"></div>
+              <div
+                class="h-full bg-primary"
+                :style="progressWidth(slotProps.data.occ_value)"
+              ></div>
             </div>
           </template>
         </Column>
-        <Column field="occurrences" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
-        <Column field="occurrence_ratio" header="O2" bodyClass="!text-right !py-2 !border-0"></Column>
+        <Column
+          field="occurrences"
+          header="Occurrences"
+          bodyClass="!text-right !py-2 !border-0"
+        ></Column>
+        <Column
+          field="occurrence_ratio"
+          header="O2"
+          bodyClass="!text-right !py-2 !border-0"
+        ></Column>
         <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
           <template #body="slotProps">
             <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
-              <div class="h-full bg-primary" :style="progressWidth(slotProps.data.case_value)"></div>
+              <div
+                class="h-full bg-primary"
+                :style="progressWidth(slotProps.data.case_value)"
+              ></div>
             </div>
           </template>
         </Column>
-        <Column field="cases" header="Cases with Activity" bodyClass="!text-right !py-2 !border-0"></Column>
-        <Column field="case_ratio" header="C2" bodyClass="!text-right !py-2 !border-0"></Column>
+        <Column
+          field="cases"
+          header="Cases with Activity"
+          bodyClass="!text-right !py-2 !border-0"
+        ></Column>
+        <Column
+          field="case_ratio"
+          header="C2"
+          bodyClass="!text-right !py-2 !border-0"
+        ></Column>
       </DataTable>
     </div>
   </div>
@@ -50,27 +107,35 @@
  *   selection.
  */
 
-import { ref, watch } from 'vue';
+import { ref, watch } from "vue";
 
-const props = defineProps(['tableTitle', 'tableData', 'tableSelect', 'progressWidth']);
+const props = defineProps([
+  "tableTitle",
+  "tableData",
+  "tableSelect",
+  "progressWidth",
+]);
 
-const emit = defineEmits(['on-row-select']);
+const emit = defineEmits(["on-row-select"]);
 
 const select = ref(null);
 const data = ref(props.tableData);
 
-watch(() => props.tableSelect, (newval) => {
-  select.value = newval;
-});
+watch(
+  () => props.tableSelect,
+  (newval) => {
+    select.value = newval;
+  },
+);
 
 /** Emits the current selection when a row is selected. */
 function onRowSelect() {
-  emit('on-row-select', select.value);
+  emit("on-row-select", select.value);
 }
 
 /** Emits the current selection when a row is unselected. */
 function onRowUnselect() {
-  emit('on-row-select', select.value);
+  emit("on-row-select", select.value);
 }
 
 /**
@@ -79,7 +144,7 @@ function onRowUnselect() {
  */
 function onRowSelectAll(e) {
   select.value = e.data;
-  emit('on-row-select', select.value);
+  emit("on-row-select", select.value);
 }
 
 /**
@@ -88,6 +153,6 @@ function onRowSelectAll(e) {
  */
 function onRowUnelectAll(e) {
   select.value = null;
-  emit('on-row-select', select.value);
+  emit("on-row-select", select.value);
 }
 </script>
diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue
index d23cbef..88c3792 100644
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/src/components/Discover/Map/Filter/Attributes.vue
@@ -1,123 +1,310 @@
 <template>
-<section class="w-full h-full">
-  <p class="h2 ml-1 mb-2">Activity Select</p>
-  <div class="flex flex-row justify-between items-start gap-4 w-full h-[calc(100%_-_48px)]">
-    <!-- Attribute Name -->
-    <div class="basis-1/3 bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm">
-      <p class="h2 my-2">Attribute Name ({{ attTotal }})<span class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer" v-tooltip.bottom="tooltip.attributeName">info</span></p>
-      <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_56px)]">
-        <DataTable v-model:selection="selectedAttName" :value="filterAttrs" dataKey="key" breakpoint="0" :tableClass="tableClass" @row-select="switchAttNameRadio">
-          <Column selectionMode="single" :headerClass="headerModeClass" :bodyClass="bodyModeClass"></Column>
-          <Column field="key" header="Attribute" :headerClass="headerClass" :bodyClass="bodyClass" sortable>
-            <template #body="slotProps">
-                <div :title="slotProps.data.key" class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full">
+  <section class="w-full h-full">
+    <p class="h2 ml-1 mb-2">Activity Select</p>
+    <div
+      class="flex flex-row justify-between items-start gap-4 w-full h-[calc(100%_-_48px)]"
+    >
+      <!-- Attribute Name -->
+      <div
+        class="basis-1/3 bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm"
+      >
+        <p class="h2 my-2">
+          Attribute Name ({{ attTotal }})<span
+            class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer"
+            v-tooltip.bottom="tooltip.attributeName"
+            >info</span
+          >
+        </p>
+        <div
+          class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_56px)]"
+        >
+          <DataTable
+            v-model:selection="selectedAttName"
+            :value="filterAttrs"
+            dataKey="key"
+            breakpoint="0"
+            :tableClass="tableClass"
+            @row-select="switchAttNameRadio"
+          >
+            <Column
+              selectionMode="single"
+              :headerClass="headerModeClass"
+              :bodyClass="bodyModeClass"
+            ></Column>
+            <Column
+              field="key"
+              header="Attribute"
+              :headerClass="headerClass"
+              :bodyClass="bodyClass"
+              sortable
+            >
+              <template #body="slotProps">
+                <div
+                  :title="slotProps.data.key"
+                  class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full"
+                >
                   {{ slotProps.data.key }}
                 </div>
               </template>
-          </Column>
-        </DataTable>
-      </div>
-    </div>
-    <!-- Range Selection -->
-    <div class="basis-2/3 bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
-      <div class="flex justify-between items-center my-2 flex-wrap">
-        <p class="h2">Range Selection {{ attRangeTotal }}</p>
-      </div>
-      <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 w-full h-[calc(100%_-_70px)]">
-        <!-- type: boolean -->
-        <div v-if="selectedAttName.type === 'boolean'" class="w-full">
-          <DataTable v-model:selection="selectedAttRange" :value="attRangeData" dataKey="id" breakpoint="0" :tableClass="tableClass" @row-select="onRowSelect" >
-            <ColumnGroup type="header">
-              <Row>
-                  <Column selectionMode="single" :headerClass="headerModeClass" ></Column>
-                  <Column field="value" header="Value" :headerClass="headerClass"  sortable />
-                  <Column field="freq" header="Occurrences" :headerClass="headerClass" sortable :colspan="3" />
-              </Row>
-            </ColumnGroup>
-            <Column selectionMode="single" :bodyClass="bodyModeClass"></Column>
-            <Column field="label" header="Activity" :bodyClass="bodyClass">
-              <template #body="slotProps">
-                <div :title="slotProps.data.label" class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full">
-                  {{ slotProps.data.label }}
-                </div>
-              </template>
             </Column>
-            <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
-              <template #body="slotProps">
-                <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
-                  <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_progress_bar)"></div>
-                </div>
-              </template>
-            </Column>
-            <Column field="occ_value" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
-            <Column field="occ_ratio" header="Occurrence Ratio" bodyClass="!text-right !py-2 !border-0"></Column>
           </DataTable>
         </div>
-        <!-- type: string -->
-        <div v-else-if="selectedAttName.type === 'string'" class="w-full">
-          <DataTable v-model:selection="selectedAttRange" :value="attRangeData" dataKey="id" breakpoint="0" tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm" @row-select="onRowSelect" @row-unselect="onRowUnselect" @row-select-all="onRowSelectAll($event)" @row-unselect-all="onRowUnelectAll">
-            <ColumnGroup type="header">
-              <Row>
-                  <Column selectionMode="multiple" :headerClass="headerModeClass" ></Column>
-                  <Column field="value" header="Value" :headerClass="headerClass"  sortable />
-                  <Column field="freq" header="Occurrences" :headerClass="headerClass" sortable :colspan="3" />
-              </Row>
-            </ColumnGroup>
-            <Column selectionMode="multiple" :bodyClass="bodyModeClass"></Column>
-            <Column field="value" header="Activity" :bodyClass="bodyClass">
-              <template #body="slotProps">
-                <div :title="slotProps.data.value" class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full">
-                  {{ slotProps.data.value }}
-                </div>
-              </template>
-            </Column>
-            <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
-              <template #body="slotProps">
-                <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
-                  <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_progress_bar)"></div>
-                </div>
-              </template>
-            </Column>
-            <Column field="occ_value" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
-            <Column field="occ_ratio" header="Occurrence Ratio" bodyClass="!text-right !py-2 !border-0"></Column>
-          </DataTable>
+      </div>
+      <!-- Range Selection -->
+      <div
+        class="basis-2/3 bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full"
+      >
+        <div class="flex justify-between items-center my-2 flex-wrap">
+          <p class="h2">Range Selection {{ attRangeTotal }}</p>
         </div>
-        <!-- type: value -->
-        <div v-else-if="valueTypes.includes(selectedAttName.type)" class="space-y-2 text-sm w-full">
-          <!-- Chart.js -->
-          <div class="h-3/5 relative">
-            <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" id="chartCanvasId"/>
-            <div id="chart-mask-left" class="absolute bg-neutral-10/50"></div>
-            <div id="chart-mask-right" class="absolute bg-neutral-10/50"></div>
+        <div
+          class="overflow-y-auto overflow-x-auto scrollbar -mx-2 w-full h-[calc(100%_-_70px)]"
+        >
+          <!-- type: boolean -->
+          <div v-if="selectedAttName.type === 'boolean'" class="w-full">
+            <DataTable
+              v-model:selection="selectedAttRange"
+              :value="attRangeData"
+              dataKey="id"
+              breakpoint="0"
+              :tableClass="tableClass"
+              @row-select="onRowSelect"
+            >
+              <ColumnGroup type="header">
+                <Row>
+                  <Column
+                    selectionMode="single"
+                    :headerClass="headerModeClass"
+                  ></Column>
+                  <Column
+                    field="value"
+                    header="Value"
+                    :headerClass="headerClass"
+                    sortable
+                  />
+                  <Column
+                    field="freq"
+                    header="Occurrences"
+                    :headerClass="headerClass"
+                    sortable
+                    :colspan="3"
+                  />
+                </Row>
+              </ColumnGroup>
+              <Column
+                selectionMode="single"
+                :bodyClass="bodyModeClass"
+              ></Column>
+              <Column field="label" header="Activity" :bodyClass="bodyClass">
+                <template #body="slotProps">
+                  <div
+                    :title="slotProps.data.label"
+                    class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full"
+                  >
+                    {{ slotProps.data.label }}
+                  </div>
+                </template>
+              </Column>
+              <Column
+                header="Progress"
+                bodyClass="!py-2 !border-0 min-w-[96px]"
+              >
+                <template #body="slotProps">
+                  <div
+                    class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"
+                  >
+                    <div
+                      class="h-full bg-primary"
+                      :style="progressWidth(slotProps.data.occ_progress_bar)"
+                    ></div>
+                  </div>
+                </template>
+              </Column>
+              <Column
+                field="occ_value"
+                header="Occurrences"
+                bodyClass="!text-right !py-2 !border-0"
+              ></Column>
+              <Column
+                field="occ_ratio"
+                header="Occurrence Ratio"
+                bodyClass="!text-right !py-2 !border-0"
+              ></Column>
+            </DataTable>
           </div>
-          <!-- Slider -->
-          <div class="px-2 py-3">
-            <Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/>
+          <!-- type: string -->
+          <div v-else-if="selectedAttName.type === 'string'" class="w-full">
+            <DataTable
+              v-model:selection="selectedAttRange"
+              :value="attRangeData"
+              dataKey="id"
+              breakpoint="0"
+              tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm"
+              @row-select="onRowSelect"
+              @row-unselect="onRowUnselect"
+              @row-select-all="onRowSelectAll($event)"
+              @row-unselect-all="onRowUnelectAll"
+            >
+              <ColumnGroup type="header">
+                <Row>
+                  <Column
+                    selectionMode="multiple"
+                    :headerClass="headerModeClass"
+                  ></Column>
+                  <Column
+                    field="value"
+                    header="Value"
+                    :headerClass="headerClass"
+                    sortable
+                  />
+                  <Column
+                    field="freq"
+                    header="Occurrences"
+                    :headerClass="headerClass"
+                    sortable
+                    :colspan="3"
+                  />
+                </Row>
+              </ColumnGroup>
+              <Column
+                selectionMode="multiple"
+                :bodyClass="bodyModeClass"
+              ></Column>
+              <Column field="value" header="Activity" :bodyClass="bodyClass">
+                <template #body="slotProps">
+                  <div
+                    :title="slotProps.data.value"
+                    class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full"
+                  >
+                    {{ slotProps.data.value }}
+                  </div>
+                </template>
+              </Column>
+              <Column
+                header="Progress"
+                bodyClass="!py-2 !border-0 min-w-[96px]"
+              >
+                <template #body="slotProps">
+                  <div
+                    class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"
+                  >
+                    <div
+                      class="h-full bg-primary"
+                      :style="progressWidth(slotProps.data.occ_progress_bar)"
+                    ></div>
+                  </div>
+                </template>
+              </Column>
+              <Column
+                field="occ_value"
+                header="Occurrences"
+                bodyClass="!text-right !py-2 !border-0"
+              ></Column>
+              <Column
+                field="occ_ratio"
+                header="Occurrence Ratio"
+                bodyClass="!text-right !py-2 !border-0"
+              ></Column>
+            </DataTable>
           </div>
-          <!-- Calendar / InputNumber group -->
-          <div>
-            <div v-if="selectedAttName.type === 'date'" class="flex justify-center items-center space-x-2 w-full">
-              <div>
-                <span class="block mb-2">Start time</span>
-                <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderValueRange($event, 'start')" id="startCalendar" />
-              </div>
-              <span class="block mt-4">~</span>
-              <div>
-                <span class="block mb-2">End time</span>
-                <Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderValueRange($event, 'end')" id="endCalendar"/>
-              </div>
+          <!-- type: value -->
+          <div
+            v-else-if="valueTypes.includes(selectedAttName.type)"
+            class="space-y-2 text-sm w-full"
+          >
+            <!-- Chart.js -->
+            <div class="h-3/5 relative">
+              <Chart
+                type="line"
+                :data="chartData"
+                :options="chartOptions"
+                class="h-30rem"
+                id="chartCanvasId"
+              />
+              <div id="chart-mask-left" class="absolute bg-neutral-10/50"></div>
+              <div
+                id="chart-mask-right"
+                class="absolute bg-neutral-10/50"
+              ></div>
             </div>
-            <div v-else class="flex justify-center items-center space-x-2 w-full">
-              <InputNumber v-model="valueStart" :min="valueStartMin" :max="valueStartMax" :maxFractionDigits="2" inputClass="w-24 text-sm text-right" @blur="sliderValueRange($event, 'start')"></InputNumber>
-              <span class="block px-2">~</span>
-              <InputNumber v-model="valueEnd" :min="valueEndMin" :max="valueEndMax"  inputClass="w-24 text-sm text-right" :maxFractionDigits="2" @blur="sliderValueRange($event, 'end')"></InputNumber>
+            <!-- Slider -->
+            <div class="px-2 py-3">
+              <Slider
+                v-model="selectArea"
+                :step="1"
+                :min="0"
+                :max="selectRange"
+                range
+                class="mx-2"
+                @change="changeSelectArea($event)"
+              />
+            </div>
+            <!-- Calendar / InputNumber group -->
+            <div>
+              <div
+                v-if="selectedAttName.type === 'date'"
+                class="flex justify-center items-center space-x-2 w-full"
+              >
+                <div>
+                  <span class="block mb-2">Start time</span>
+                  <Calendar
+                    v-model="startTime"
+                    dateFormat="yy/mm/dd"
+                    :panelProps="panelProps"
+                    :minDate="startMinDate"
+                    :maxDate="startMaxDate"
+                    showTime
+                    showIcon
+                    hourFormat="24"
+                    @date-select="sliderValueRange($event, 'start')"
+                    id="startCalendar"
+                  />
+                </div>
+                <span class="block mt-4">~</span>
+                <div>
+                  <span class="block mb-2">End time</span>
+                  <Calendar
+                    v-model="endTime"
+                    dateFormat="yy/mm/dd"
+                    :panelProps="panelProps"
+                    :minDate="endMinDate"
+                    :maxDate="endMaxDate"
+                    showTime
+                    showIcon
+                    hourFormat="24"
+                    @date-select="sliderValueRange($event, 'end')"
+                    id="endCalendar"
+                  />
+                </div>
+              </div>
+              <div
+                v-else
+                class="flex justify-center items-center space-x-2 w-full"
+              >
+                <InputNumber
+                  v-model="valueStart"
+                  :min="valueStartMin"
+                  :max="valueStartMax"
+                  :maxFractionDigits="2"
+                  inputClass="w-24 text-sm text-right"
+                  @blur="sliderValueRange($event, 'start')"
+                ></InputNumber>
+                <span class="block px-2">~</span>
+                <InputNumber
+                  v-model="valueEnd"
+                  :min="valueEndMin"
+                  :max="valueEndMax"
+                  inputClass="w-24 text-sm text-right"
+                  :maxFractionDigits="2"
+                  @blur="sliderValueRange($event, 'end')"
+                ></InputNumber>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
 </template>
 <script setup>
 // The Lucia project.
@@ -132,24 +319,24 @@
  *   for filtering by attribute values.
  */
 
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { setLineChartData } from '@/module/setChartData.js';
-import getMoment from 'moment';
-import InputNumber from 'primevue/inputnumber';
-import { Decimal } from 'decimal.js';
-import emitter from '@/utils/emitter';
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { storeToRefs } from "pinia";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { setLineChartData } from "@/module/setChartData.js";
+import getMoment from "moment";
+import InputNumber from "primevue/inputnumber";
+import { Decimal } from "decimal.js";
+import emitter from "@/utils/emitter";
 
-const emit = defineEmits(['select-attribute']);
+const emit = defineEmits(["select-attribute"]);
 
 const allMapDataStore = useAllMapDataStore();
 const { filterAttrs } = storeToRefs(allMapDataStore);
 
 const selectedAttName = ref({});
 const selectedAttRange = ref(null);
-const valueTypes = ['int', 'float', 'date'];
-const classTypes = ['boolean', 'string'];
+const valueTypes = ["int", "float", "date"];
+const classTypes = ["boolean", "string"];
 const chartData = ref({});
 const chartOptions = ref({});
 const chartComplete = ref(null); // Rendered chart.js instance data
@@ -162,16 +349,19 @@ const startMaxDate = ref(null);
 const endMinDate = ref(null);
 const endMaxDate = ref(null);
 const valueStart = ref(null); // PrimeVue InputNumber v-model
-const valueEnd = ref(null);   // PrimeVue InputNumber v-model
+const valueEnd = ref(null); // PrimeVue InputNumber v-model
 const valueStartMin = ref(null);
 const valueStartMax = ref(null);
 const valueEndMin = ref(null);
 const valueEndMax = ref(null);
-const tableClass = 'w-full h-full !border-separate !border-spacing-x-2 !table-auto text-sm';
-const headerModeClass = 'w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10';
-const headerClass = '!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10';
-const bodyModeClass = '!p-2 !border-0';
-const bodyClass = 'break-words !py-2 !border-0';
+const tableClass =
+  "w-full h-full !border-separate !border-spacing-x-2 !table-auto text-sm";
+const headerModeClass =
+  "w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10";
+const headerClass =
+  "!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10";
+const bodyModeClass = "!p-2 !border-0";
+const bodyClass = "break-words !py-2 !border-0";
 const panelProps = {
   onClick: (event) => {
     event.stopPropagation();
@@ -179,8 +369,9 @@ const panelProps = {
 };
 const tooltip = {
   attributeName: {
-    value: 'Attributes with too many discrete values are excluded from selection. But users can still view those attributes in the DATA page.',
-    class: '!max-w-[212px] !text-[10px] !opacity-90',
+    value:
+      "Attributes with too many discrete values are excluded from selection. But users can still view those attributes in the DATA page.",
+    class: "!max-w-[212px] !text-[10px] !opacity-90",
   },
 };
 
@@ -194,7 +385,7 @@ const attRangeTotal = computed(() => {
   let result = null; // Initialize the result variable with null
 
   if (classTypes.includes(type) && attRangeData.value) {
-      result = `(${attRangeData.value.length})`; // Assign the length of attRangeData if it exists
+    result = `(${attRangeData.value.length})`; // Assign the length of attRangeData if it exists
   }
   return result;
 });
@@ -202,7 +393,9 @@ const attRangeTotal = computed(() => {
 const attRangeData = computed(() => {
   let data = [];
   const type = selectedAttName.value.type;
-  const sum = selectedAttName.value.options.map(item => item.freq).reduce((acc, cur) => acc + cur, 0);
+  const sum = selectedAttName.value.options
+    .map((item) => item.freq)
+    .reduce((acc, cur) => acc + cur, 0);
   data = selectedAttName.value.options.map((item, index) => {
     const ratio = item.freq / sum;
     const result = {
@@ -211,27 +404,31 @@ const attRangeData = computed(() => {
       type: type,
       value: item.value,
       occ_progress_bar: ratio * 100,
-      occ_value: item.freq.toLocaleString('en-US'),
+      occ_value: item.freq.toLocaleString("en-US"),
       occ_ratio: getPercentLabel(ratio),
-      freq: item.freq
+      freq: item.freq,
     };
     result.label = null;
-    if (type === 'boolean') {
-      result.label = item.value ? 'Yes' : 'No';
+    if (type === "boolean") {
+      result.label = item.value ? "Yes" : "No";
     } else {
       result.label = null;
     }
     return result;
-  })
+  });
   return data.sort((x, y) => y.freq - x.freq);
 });
 
 // Get the selected Attribute radio's numeric-type data
 const valueData = computed(() => {
   // filter returns an array, find returns the first matched element, so use find here.
-  if(valueTypes.includes(selectedAttName.value.type)){
-    const data = filterAttrs.value.find(item => item.type === selectedAttName.value.type && item.key === selectedAttName.value.key);
-    return data
+  if (valueTypes.includes(selectedAttName.value.type)) {
+    const data = filterAttrs.value.find(
+      (item) =>
+        item.type === selectedAttName.value.type &&
+        item.key === selectedAttName.value.key,
+    );
+    return data;
   }
 });
 
@@ -243,8 +440,8 @@ const sliderDataComputed = computed(() => {
   const max = valueData.value.max;
   const type = valueData.value.type;
   switch (type) {
-    case 'dummy':
-    case 'date':
+    case "dummy":
+    case "date":
       xAxisMin = new Date(min).getTime();
       xAxisMax = new Date(max).getTime();
       break;
@@ -255,25 +452,25 @@ const sliderDataComputed = computed(() => {
   }
   const range = xAxisMax - xAxisMin;
   const step = range / selectRange.value;
-  let data = []
+  let data = [];
 
   for (let i = 0; i <= selectRange.value; i++) {
-    data.push(xAxisMin + (step * i));
+    data.push(xAxisMin + step * i);
   }
   switch (type) {
-    case 'int':
-      data = data.map(value => {
+    case "int":
+      data = data.map((value) => {
         let result = Math.round(value);
         result = result === -0 ? 0 : result;
         return result;
       });
       break;
-    case 'float':
-      data = data.map(value => {
+    case "float":
+      data = data.map((value) => {
         let result = new Decimal(value.toFixed(2)).toNumber();
         result = result === -0 ? 0 : result;
         return result;
-      })
+      });
       break;
     default:
       break;
@@ -288,25 +485,26 @@ const attValueTypeStartEnd = computed(() => {
   const type = selectedAttName.value.type;
 
   switch (type) {
-    case 'dummy': //sonar-qube
-    case 'date':
-      start = getMoment(startTime.value).format('YYYY-MM-DDTHH:mm:00');
-      end = getMoment(endTime.value).format('YYYY-MM-DDTHH:mm:00');
+    case "dummy": //sonar-qube
+    case "date":
+      start = getMoment(startTime.value).format("YYYY-MM-DDTHH:mm:00");
+      end = getMoment(endTime.value).format("YYYY-MM-DDTHH:mm:00");
       break;
     default:
       start = valueStart.value;
       end = valueEnd.value;
       break;
   }
-  const data = { // Data to send to the backend
+  const data = {
+    // Data to send to the backend
     type: type,
     data: {
       key: selectedAttName.value.key,
       min: start,
       max: end,
-    }
-  }
-  emit('select-attribute', data);
+    },
+  };
+  emit("select-attribute", data);
 
   return [start, end];
 });
@@ -317,7 +515,7 @@ const labelsData = computed(() => {
   const numPoints = 11;
   const step = (max - min) / (numPoints - 1);
   const data = [];
-  for(let i = 0; i< numPoints; i++) {
+  for (let i = 0; i < numPoints; i++) {
     const x = min + i * step;
     data.push(x);
   }
@@ -333,7 +531,7 @@ function onRowSelect() {
     type: type,
     data: selectedAttRange.value,
   };
-  emit('select-attribute', data);
+  emit("select-attribute", data);
 }
 
 /**
@@ -345,7 +543,7 @@ function onRowUnselect() {
     type: type,
     data: selectedAttRange.value,
   };
-  emit('select-attribute', data);
+  emit("select-attribute", data);
 }
 
 /**
@@ -359,7 +557,7 @@ function onRowSelectAll(e) {
     type: type,
     data: selectedAttRange.value,
   };
-  emit('select-attribute', data);
+  emit("select-attribute", data);
 }
 
 /**
@@ -372,7 +570,7 @@ function onRowUnelectAll() {
     type: type,
     data: selectedAttRange.value,
   };
-  emit('select-attribute', data)
+  emit("select-attribute", data);
 }
 
 /**
@@ -385,14 +583,15 @@ function switchAttNameRadio(e) {
   endTime.value = null;
   valueStart.value = null;
   valueEnd.value = null;
-  if(valueData.value) { // Switch Attribute Name
+  if (valueData.value) {
+    // Switch Attribute Name
     // Initialize two-way bindings
     selectArea.value = [0, selectRange.value];
     const min = valueData.value.min;
     const max = valueData.value.max;
     switch (selectedAttName.value.type) {
-      case 'dummy': //sonar-qube
-      case 'date':
+      case "dummy": //sonar-qube
+      case "date":
         // Clear two-way bindings except for date
         valueStart.value = null;
         valueEnd.value = null;
@@ -431,8 +630,8 @@ function switchAttNameRadio(e) {
  * @param   {number} value - The percentage value.
  * @returns {string} The CSS width style string.
  */
-function progressWidth(value){
-  return `width:${value}%;`
+function progressWidth(value) {
+  return `width:${value}%;`;
 }
 
 /**
@@ -440,8 +639,8 @@ function progressWidth(value){
  * @param   {number} val - The raw ratio value.
  * @returns {string} The formatted percentage string.
  */
-function getPercentLabel(val){
-  if((val * 100).toFixed(1) >= 100) return `100%`;
+function getPercentLabel(val) {
+  if ((val * 100).toFixed(1) >= 100) return `100%`;
   else return `${(val * 100).toFixed(1)}%`;
 }
 
@@ -461,7 +660,7 @@ function resizeMask(chart) {
  * @param {object} chart - The Chart.js instance data.
  */
 function resizeLeftMask(chart, from) {
-  const canvas = document.querySelector('#chartCanvasId canvas');
+  const canvas = document.querySelector("#chartCanvasId canvas");
   const mask = document.getElementById("chart-mask-left");
   mask.style.left = `${canvas.offsetLeft + chart.chartArea.left}px`;
   mask.style.width = `${chart.chartArea.width * from}px`;
@@ -474,7 +673,7 @@ function resizeLeftMask(chart, from) {
  * @param {object} chart - The Chart.js instance data.
  */
 function resizeRightMask(chart, to) {
-  const canvas = document.querySelector('#chartCanvasId canvas');
+  const canvas = document.querySelector("#chartCanvasId canvas");
   const mask = document.getElementById("chart-mask-right");
   mask.style.left = `${canvas.offsetLeft + chart.chartArea.left + chart.chartArea.width * to}px`;
   mask.style.width = `${chart.chartArea.width * (1 - to)}px`;
@@ -488,33 +687,37 @@ function resizeRightMask(chart, to) {
 function createChart() {
   const vData = valueData.value;
   const max = vData.chart.y_axis.max * 1.1;
-  const data = setLineChartData(vData.chart.data, vData.chart.x_axis.max, vData.chart.x_axis.min);
-  const isDateType = vData.type === 'date';
+  const data = setLineChartData(
+    vData.chart.data,
+    vData.chart.x_axis.max,
+    vData.chart.x_axis.min,
+  );
+  const isDateType = vData.type === "date";
   const minX = vData.chart.x_axis.min;
   const maxX = vData.chart.x_axis.max;
-  let setChartData= {};
-  let setChartOptions= {};
+  let setChartData = {};
+  let setChartOptions = {};
   let setLabels = [];
 
   switch (vData.type) {
-    case 'int':
-      setLabels = data.map(item => Math.round(item.x));
+    case "int":
+      setLabels = data.map((item) => Math.round(item.x));
       break;
-    case 'float':
+    case "float":
       setLabels = data.map((item, index) => {
         let x;
         if (index === 0) {
-            x = Math.floor(item.x * 100) / 100;
+          x = Math.floor(item.x * 100) / 100;
         } else if (index === data.length - 1) {
-            item.x = Math.ceil(item.x * 100) / 100;
-            x = item.x;
+          item.x = Math.ceil(item.x * 100) / 100;
+          x = item.x;
         } else {
-            x = Math.round(item.x * 100) / 100;
+          x = Math.round(item.x * 100) / 100;
         }
-        return x
+        return x;
       });
       break;
-    case 'date':
+    case "date":
       setLabels = labelsData.value;
       break;
     default:
@@ -523,14 +726,14 @@ function createChart() {
   setChartData = {
     datasets: [
       {
-        label: 'Attribute Value',
+        label: "Attribute Value",
         data: data,
-        fill: 'start',
+        fill: "start",
         showLine: false,
         tension: 0.4,
-        backgroundColor: 'rgba(0,153,255)',
+        backgroundColor: "rgba(0,153,255)",
         pointRadius: 0,
-      }
+      },
     ],
     labels: setLabels,
   };
@@ -542,20 +745,20 @@ function createChart() {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false, // Hide legend
       filler: {
-        propagate: false
+        propagate: false,
       },
-      title: false
+      title: false,
     },
     animation: {
-      onComplete: e => {
+      onComplete: (e) => {
         chartComplete.value = e.chart;
         resizeMask(e.chart);
-      }
+      },
     },
     interaction: {
       intersect: true,
@@ -564,59 +767,60 @@ function createChart() {
       y: {
         beginAtZero: true, // Scale includes 0
         max: max,
-        ticks: { // Set tick intervals
+        ticks: {
+          // Set tick intervals
           display: false, // Hide values, only show grid lines
           stepSize: max / 4,
         },
         grid: {
-          color: 'rgba(100,116,139)',
+          color: "rgba(100,116,139)",
           z: 1,
         },
         border: {
           display: false, // Hide the extra border line on the left
-        }
+        },
       },
     },
   };
-  if(isDateType) {
+  if (isDateType) {
     setChartOptions.scales.x = {
-      type: 'time',
+      type: "time",
       ticks: {
         min: minX,
         max: maxX,
         autoSkip: true, // Automatically determine whether to convert time units
         maxRotation: 0, // Do not rotate labels (0~50)
-        color: '#334155',
+        color: "#334155",
         display: true,
-        source: 'labels', // Flexibly display label count proportionally
+        source: "labels", // Flexibly display label count proportionally
       },
       grid: {
         display: false, // Hide x-axis grid lines
       },
       time: {
-        minUnit: 'day', // Minimum display unit
+        minUnit: "day", // Minimum display unit
         // displayFormats: {
         //   minute: 'HH:mm MMM d',
         //   hour: 'HH:mm MMM d',
         // }
-      }
-    }
+      },
+    };
   } else {
     setChartOptions.scales.x = {
-      bounds: 'data',
-      type: 'linear',
+      bounds: "data",
+      type: "linear",
       min: minX,
       max: maxX,
       ticks: {
         autoSkip: true,
         maxRotation: 0, // Do not rotate labels (0~50)
-        color: '#334155',
-        callback: ((value, index, values) => {
+        color: "#334155",
+        callback: (value, index, values) => {
           let x;
           switch (vData.type) {
-            case 'int':
+            case "int":
               return Math.round(value);
-            case 'float':
+            case "float":
               switch (index) {
                 case 0:
                   x = Math.floor(value * 100) / 100;
@@ -629,15 +833,17 @@ function createChart() {
               }
               // Handle scientific notation and other format conversions
               // Decimal cannot handle numbers exceeding 16 digits
-              x = new Intl.NumberFormat(undefined, {useGrouping: false}).format(x);
-              return x
+              x = new Intl.NumberFormat(undefined, {
+                useGrouping: false,
+              }).format(x);
+              return x;
           }
-        })
+        },
       },
       grid: {
         display: false, // Hide x-axis grid lines
       },
-    }
+    };
   }
   chartData.value = setChartData;
   chartOptions.value = setChartOptions;
@@ -654,8 +860,8 @@ function changeSelectArea(e) {
   const end = sliderData[e[1].toFixed()]; // Get the index, which must be an integer.
 
   switch (selectedAttName.value.type) {
-    case 'dummy':
-    case 'date':
+    case "dummy":
+    case "date":
       startTime.value = new Date(start);
       endTime.value = new Date(end);
       // Reset the start/end calendar selection range
@@ -684,48 +890,56 @@ function changeSelectArea(e) {
 function sliderValueRange(e, direction) {
   // Find the closest index; time format: millisecond timestamps
   const sliderData = sliderDataComputed.value;
-  const isDateType = selectedAttName.value.type === 'date';
+  const isDateType = selectedAttName.value.type === "date";
   let targetTime = [];
   let inputValue;
 
-  if(isDateType) targetTime = [new Date(attValueTypeStartEnd.value[0]).getTime(), new Date(attValueTypeStartEnd.value[1]).getTime()];
-  else targetTime = [attValueTypeStartEnd.value[0], attValueTypeStartEnd.value[1]]
+  if (isDateType)
+    targetTime = [
+      new Date(attValueTypeStartEnd.value[0]).getTime(),
+      new Date(attValueTypeStartEnd.value[1]).getTime(),
+    ];
+  else
+    targetTime = [attValueTypeStartEnd.value[0], attValueTypeStartEnd.value[1]];
 
-  const closestIndexes = targetTime.map(target => {
+  const closestIndexes = targetTime.map((target) => {
     let closestIndex = 0;
-    closestIndex = ((target - sliderData[0])/(sliderData[sliderData.length-1]-sliderData[0])) * sliderData.length;
+    closestIndex =
+      ((target - sliderData[0]) /
+        (sliderData[sliderData.length - 1] - sliderData[0])) *
+      sliderData.length;
     let result = Math.round(Math.abs(closestIndex));
     result = result > selectRange.value ? selectRange.value : result;
-    return result
+    return result;
   });
   // Update the slider
   selectArea.value = closestIndexes;
   // Reset the start/end calendar selection range
-  if(!isDateType) inputValue = Number(e.value.replace(/,/g, '')) ;
-  if(direction === 'start') {
-    if(isDateType){
+  if (!isDateType) inputValue = Number(e.value.replace(/,/g, ""));
+  if (direction === "start") {
+    if (isDateType) {
       endMinDate.value = e;
     } else {
       valueEndMin.value = inputValue;
     }
-  }
-  else if(direction === 'end') {
-    if(isDateType) {
+  } else if (direction === "end") {
+    if (isDateType) {
       startMaxDate.value = e;
     } else {
       valueStartMax.value = inputValue;
-    };
+    }
   }
   // Recalculate the chart mask
-  if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) resizeMask(chartComplete.value);
+  if (!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1]))
+    resizeMask(chartComplete.value);
   else return;
 }
 
 // created() equivalent
-emitter.on('map-filter-reset', value => {
-  if(value) {
+emitter.on("map-filter-reset", (value) => {
+  if (value) {
     selectedAttRange.value = null;
-    if(valueData.value && valueTypes.includes(selectedAttName.value.type)){
+    if (valueData.value && valueTypes.includes(selectedAttName.value.type)) {
       const min = valueData.value.min;
       const max = valueData.value.max;
       startTime.value = new Date(min);
@@ -745,12 +959,12 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   selectedAttName.value = {};
-  emitter.off('map-filter-reset');
+  emitter.off("map-filter-reset");
 });
 </script>
 <style scoped>
 @reference "../../../../assets/tailwind.css";
 :deep(table tbody td:nth-child(2)) {
-  @apply whitespace-nowrap break-keep overflow-hidden text-ellipsis max-w-0
+  @apply whitespace-nowrap break-keep overflow-hidden text-ellipsis max-w-0;
 }
 </style>
diff --git a/src/components/Discover/Map/Filter/Funnel.vue b/src/components/Discover/Map/Filter/Funnel.vue
index a0a15df..5a03d65 100644
--- a/src/components/Discover/Map/Filter/Funnel.vue
+++ b/src/components/Discover/Map/Filter/Funnel.vue
@@ -1,41 +1,75 @@
 <template>
-  <div class=" w-full h-full">
-      <div class="h-[calc(100%_-_58px)] border-b border-neutral-400 mb-2 scrollbar overflow-x-hidden overflow-y-auto">
-        <div v-if="this.temporaryData.length === 0" class="h-full flex justify-center items-center">
-          <span class="text-neutral-500">No Filter.</span>
-        </div>
-        <div v-else>
-          <div class="text-primary h2 flex items-center justify-start my-4">
-            <span class="material-symbols-outlined m-2">info</span>
-            <p>Disabled filters will not be saved.</p>
-          </div>
-          <Timeline :value="ruleData">
-            <template #content="rule">
-              <div class="border-b border-neutral-300 flex justify-between items-center space-x-2">
-                <!-- content -->
-                <div class="pl-2 mb-2">
-                  <p class="text-sm font-medium leading-5">{{ rule.item.type }}:&nbsp;<span class="text-neutral-500">{{ rule.item.label }}</span></p>
-                </div>
-                <!-- button -->
-                <div class="min-w-fit">
-                  <InputSwitch v-model="rule.item.toggle" @input="isRule($event, rule.index)"/>
-                  <button type="button" class="m-2 focus:ring focus:ring-danger/20 text-neutral-500 hover:text-danger" @click.stop="deleteRule(rule.index)">
-                    <span class="material-symbols-outlined">delete</span>
-                  </button>
-                </div>
-              </div>
-            </template>
-          </Timeline>
-        </div>
+  <div class="w-full h-full">
+    <div
+      class="h-[calc(100%_-_58px)] border-b border-neutral-400 mb-2 scrollbar overflow-x-hidden overflow-y-auto"
+    >
+      <div
+        v-if="this.temporaryData.length === 0"
+        class="h-full flex justify-center items-center"
+      >
+        <span class="text-neutral-500">No Filter.</span>
       </div>
-      <!-- Button -->
-      <div>
-        <div class="float-right space-x-4 px-4 py-2">
-          <button type="button" class="btn btn-sm " :class="[ temporaryData.length === 0 ? 'btn-disable' : 'btn-neutral']" :disabled="temporaryData.length === 0" @click="deleteRule('all')">Delete All</button>
-          <button type="button" class="btn btn-sm" :class="[ temporaryData.length === 0 ? 'btn-disable' : 'btn-neutral']" :disabled="temporaryData.length === 0" @click="submitAll">Apply All</button>
+      <div v-else>
+        <div class="text-primary h2 flex items-center justify-start my-4">
+          <span class="material-symbols-outlined m-2">info</span>
+          <p>Disabled filters will not be saved.</p>
         </div>
+        <Timeline :value="ruleData">
+          <template #content="rule">
+            <div
+              class="border-b border-neutral-300 flex justify-between items-center space-x-2"
+            >
+              <!-- content -->
+              <div class="pl-2 mb-2">
+                <p class="text-sm font-medium leading-5">
+                  {{ rule.item.type }}:&nbsp;<span class="text-neutral-500">{{
+                    rule.item.label
+                  }}</span>
+                </p>
+              </div>
+              <!-- button -->
+              <div class="min-w-fit">
+                <InputSwitch
+                  v-model="rule.item.toggle"
+                  @input="isRule($event, rule.index)"
+                />
+                <button
+                  type="button"
+                  class="m-2 focus:ring focus:ring-danger/20 text-neutral-500 hover:text-danger"
+                  @click.stop="deleteRule(rule.index)"
+                >
+                  <span class="material-symbols-outlined">delete</span>
+                </button>
+              </div>
+            </div>
+          </template>
+        </Timeline>
       </div>
     </div>
+    <!-- Button -->
+    <div>
+      <div class="float-right space-x-4 px-4 py-2">
+        <button
+          type="button"
+          class="btn btn-sm"
+          :class="[temporaryData.length === 0 ? 'btn-disable' : 'btn-neutral']"
+          :disabled="temporaryData.length === 0"
+          @click="deleteRule('all')"
+        >
+          Delete All
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm"
+          :class="[temporaryData.length === 0 ? 'btn-disable' : 'btn-neutral']"
+          :disabled="temporaryData.length === 0"
+          @click="submitAll"
+        >
+          Apply All
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -49,30 +83,37 @@
  *   apply-all actions.
  */
 
-import { storeToRefs } from 'pinia';
-import { useToast } from 'vue-toast-notification';
-import { useLoadingStore } from '@/stores/loading';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { delaySecond, } from '@/utils/timeUtil.js';
+import { storeToRefs } from "pinia";
+import { useToast } from "vue-toast-notification";
+import { useLoadingStore } from "@/stores/loading";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { delaySecond } from "@/utils/timeUtil.js";
 
-const emit = defineEmits(['submit-all']);
+const emit = defineEmits(["submit-all"]);
 const $toast = useToast();
 
 const loadingStore = useLoadingStore();
 const allMapDataStore = useAllMapDataStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, tempFilterId } = storeToRefs(allMapDataStore);
+const {
+  hasResultRule,
+  temporaryData,
+  postRuleData,
+  ruleData,
+  isRuleData,
+  tempFilterId,
+} = storeToRefs(allMapDataStore);
 
 /**
  * Toggles a filter rule on or off.
  * @param {boolean} e - Whether the rule is enabled.
  * @param {number} index - The rule index.
  */
-function isRule(e, index){
+function isRule(e, index) {
   const rule = isRuleData.value[index];
   // First get the rule object
   // To preserve data order, set the value to 0 and remove it during submitAll
-  if(!e) temporaryData.value[index] = 0;
+  if (!e) temporaryData.value[index] = 0;
   else temporaryData.value[index] = rule;
 }
 
@@ -81,20 +122,20 @@ function isRule(e, index){
  * @param {number|string} index - The rule index, or 'all' to delete all.
  */
 async function deleteRule(index) {
-  if(index === 'all') {
+  if (index === "all") {
     temporaryData.value = [];
     isRuleData.value = [];
     ruleData.value = [];
-    if(tempFilterId.value) {
+    if (tempFilterId.value) {
       isLoading.value = true;
       tempFilterId.value = await null;
       await allMapDataStore.getAllMapData();
       await allMapDataStore.getAllTrace(); // SidebarTrace needs to update in sync
-      await emit('submit-all');
+      await emit("submit-all");
       isLoading.value = false;
     }
-    $toast.success('Filter(s) deleted.');
-  }else{
+    $toast.success("Filter(s) deleted.");
+  } else {
     $toast.success(`Filter deleted.`);
     temporaryData.value.splice(index, 1);
     isRuleData.value.splice(index, 1);
@@ -104,23 +145,23 @@ async function deleteRule(index) {
 
 /** Submits all enabled filter rules and refreshes the map data. */
 async function submitAll() {
-  postRuleData.value = temporaryData.value.filter(item => item !== 0); // Get submit data; if toggle buttons are used, find and remove items set to 0
-  if(!postRuleData.value?.length) return $toast.error('Not selected');
+  postRuleData.value = temporaryData.value.filter((item) => item !== 0); // Get submit data; if toggle buttons are used, find and remove items set to 0
+  if (!postRuleData.value?.length) return $toast.error("Not selected");
   await allMapDataStore.checkHasResult(); // Quick backend check for results
 
-  if(hasResultRule.value === null) {
+  if (hasResultRule.value === null) {
     return;
-  } else if(hasResultRule.value) {
+  } else if (hasResultRule.value) {
     isLoading.value = true;
     await allMapDataStore.addTempFilterId();
     await allMapDataStore.getAllMapData();
     await allMapDataStore.getAllTrace(); // SidebarTrace needs to update in sync
-    if(temporaryData.value[0]?.type) {
+    if (temporaryData.value[0]?.type) {
       allMapDataStore.traceId = await allMapDataStore.traces[0]?.id;
     }
-    await emit('submit-all');
+    await emit("submit-all");
     isLoading.value = false;
-    $toast.success('Filter(s) applied.');
+    $toast.success("Filter(s) applied.");
     return;
   }
 
@@ -128,7 +169,7 @@ async function submitAll() {
   isLoading.value = true;
   await delaySecond(1);
   isLoading.value = false;
-  $toast.warning('No result.');
+  $toast.warning("No result.");
 }
 </script>
 
@@ -136,21 +177,21 @@ async function submitAll() {
 @reference "../../../../assets/tailwind.css";
 /* TimeLine */
 :deep(.p-timeline) {
-  @apply leading-none my-4
+  @apply leading-none my-4;
 }
 :deep(.p-timeline-event-opposite) {
-  @apply hidden
+  @apply hidden;
 }
 :deep(.p-timeline-event-separator) {
-  @apply mx-4
+  @apply mx-4;
 }
 :deep(.p-timeline-event-marker) {
-  @apply !bg-primary !border-primary !w-2 !h-2
+  @apply !bg-primary !border-primary !w-2 !h-2;
 }
 :deep(.p-timeline-event-connector) {
-  @apply !bg-primary my-2 !w-[1px]
+  @apply !bg-primary my-2 !w-[1px];
 }
 :deep(.p-timeline-event-content) {
-  @apply !px-0
+  @apply !px-0;
 }
 </style>
diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue
index 7fa9381..07de323 100644
--- a/src/components/Discover/Map/Filter/Timeframes.vue
+++ b/src/components/Discover/Map/Filter/Timeframes.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
+  <div
+    class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full"
+  >
     <section class="pt-2 pb-20 space-y-2 text-sm min-w-[48%] h-full">
       <p class="h2">Range Selection</p>
       <div class="text-primary h2 flex items-center justify-start">
@@ -12,18 +14,48 @@
         <div id="chart-mask-right" class="absolute bg-neutral-10/50"></div>
       </div>
       <div class="px-2 py-3">
-        <Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/>
+        <Slider
+          v-model="selectArea"
+          :step="1"
+          :min="0"
+          :max="selectRange"
+          range
+          class="mx-2"
+          @change="changeSelectArea($event)"
+        />
       </div>
       <!-- Calendar group -->
       <div class="flex justify-center items-center space-x-2 w-full">
         <div>
           <span class="block mb-2">Start time</span>
-          <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar"/>
+          <Calendar
+            v-model="startTime"
+            dateFormat="yy/mm/dd"
+            :panelProps="panelProps"
+            :minDate="startMinDate"
+            :maxDate="startMaxDate"
+            showTime
+            showIcon
+            hourFormat="24"
+            @date-select="sliderTimeRange($event, 'start')"
+            id="startCalendar"
+          />
         </div>
         <span class="block mt-4">~</span>
         <div>
           <span class="block mb-2">End time</span>
-          <Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'end')" id="endCalendar"/>
+          <Calendar
+            v-model="endTime"
+            dateFormat="yy/mm/dd"
+            :panelProps="panelProps"
+            :minDate="endMinDate"
+            :maxDate="endMaxDate"
+            showTime
+            showIcon
+            hourFormat="24"
+            @date-select="sliderTimeRange($event, 'end')"
+            id="endCalendar"
+          />
         </div>
       </div>
       <!-- End calendar group -->
@@ -41,14 +73,14 @@
  *   duration range selectors.
  */
 
-import { ref, computed, watch, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { Chart, registerables } from 'chart.js';
-import 'chartjs-adapter-moment';
-import getMoment from 'moment';
+import { ref, computed, watch, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { Chart, registerables } from "chart.js";
+import "chartjs-adapter-moment";
+import getMoment from "moment";
 
-const props = defineProps(['selectValue']);
+const props = defineProps(["selectValue"]);
 
 const allMapDataStore = useAllMapDataStore();
 const { filterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore);
@@ -71,8 +103,8 @@ const panelProps = ref({
 
 // user select time start and end
 const timeFrameStartEnd = computed(() => {
-  const start = getMoment(startTime.value).format('YYYY-MM-DDTHH:mm:00');
-  const end = getMoment(endTime.value).format('YYYY-MM-DDTHH:mm:00');
+  const start = getMoment(startTime.value).format("YYYY-MM-DDTHH:mm:00");
+  const end = getMoment(endTime.value).format("YYYY-MM-DDTHH:mm:00");
   selectTimeFrame.value = [start, end]; // Data to send to the backend
 
   return [start, end];
@@ -84,10 +116,10 @@ const sliderData = computed(() => {
   const xAxisMax = new Date(filterTimeframe.value.x_axis.max).getTime();
   const range = xAxisMax - xAxisMin;
   const step = range / selectRange.value;
-  const data = []
+  const data = [];
 
   for (let i = 0; i <= selectRange.value; i++) {
-    data.push(xAxisMin + (step * i));
+    data.push(xAxisMin + step * i);
   }
 
   return data;
@@ -95,7 +127,7 @@ const sliderData = computed(() => {
 
 // Add the minimum and maximum values
 const timeFrameData = computed(() => {
-  const data = filterTimeframe.value.data.map(i=>({x:i.x,y:i.y}))
+  const data = filterTimeframe.value.data.map((i) => ({ x: i.x, y: i.y }));
   // See ./public/timeFrameSlope for the y-axis slope calculation diagram
   // x values are 0 ~ 11,
   // Name three coordinates (ax, ay), (bx, by), (cx, cy) as (a, b), (c, d), (e, f)
@@ -109,8 +141,8 @@ const timeFrameData = computed(() => {
   const d = filterTimeframe.value.data[0].y;
   const e = 2;
   const f = filterTimeframe.value.data[1].y;
-  b = (e*d - a*d - f*a - f*c) / (e - c - a);
-  if(b < 0) {
+  b = (e * d - a * d - f * a - f * c) / (e - c - a);
+  if (b < 0) {
     b = 0;
   }
   // Y-axis maximum value
@@ -119,8 +151,8 @@ const timeFrameData = computed(() => {
   const mc = 10;
   const md = filterTimeframe.value.data[9].y;
   const me = 11;
-  let mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
-  if(mf < 0) {
+  let mf = (mb * me - mb * mc - md * me + md * ma) / (ma - mc);
+  if (mf < 0) {
     mf = 0;
   }
 
@@ -128,12 +160,12 @@ const timeFrameData = computed(() => {
   data.unshift({
     x: filterTimeframe.value.x_axis.min_base,
     y: b,
-  })
+  });
   // Add the maximum value
   data.push({
     x: filterTimeframe.value.x_axis.max_base,
     y: mf,
-  })
+  });
 
   return data;
 });
@@ -144,7 +176,7 @@ const labelsData = computed(() => {
   const numPoints = 11;
   const step = (max - min) / (numPoints - 1);
   const data = [];
-  for(let i = 0; i< numPoints; i++) {
+  for (let i = 0; i < numPoints; i++) {
     const x = min + i * step;
     data.push(x);
   }
@@ -152,7 +184,7 @@ const labelsData = computed(() => {
 });
 
 watch(selectTimeFrame, (newValue, oldValue) => {
-  if(newValue.length === 0) {
+  if (newValue.length === 0) {
     startTime.value = new Date(filterTimeframe.value.x_axis.min);
     endTime.value = new Date(filterTimeframe.value.x_axis.max);
     selectArea.value = [0, selectRange.value];
@@ -167,7 +199,7 @@ watch(selectTimeFrame, (newValue, oldValue) => {
 function resizeMask(chartInstance) {
   const from = (selectArea.value[0] * 0.01) / (selectRange.value * 0.01);
   const to = (selectArea.value[1] * 0.01) / (selectRange.value * 0.01);
-  if(props.selectValue[0] === 'Timeframes') {
+  if (props.selectValue[0] === "Timeframes") {
     resizeLeftMask(chartInstance, from);
     resizeRightMask(chartInstance, to);
   }
@@ -208,20 +240,20 @@ function createChart() {
   const maxX = timeFrameData.value[timeFrameData.value.length - 1]?.x;
 
   const data = {
-    labels:labelsData.value,
+    labels: labelsData.value,
     datasets: [
       {
-        label: 'Case',
+        label: "Case",
         data: timeFrameData.value,
-        fill: 'start',
+        fill: "start",
         showLine: false,
         tension: 0.4,
-        backgroundColor: 'rgba(0,153,255)',
+        backgroundColor: "rgba(0,153,255)",
         pointRadius: 0,
-        x: 'x',
-        y: 'y',
-      }
-    ]
+        x: "x",
+        y: "y",
+      },
+    ],
   };
   const options = {
     responsive: true,
@@ -231,66 +263,67 @@ function createChart() {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false, // Hide legend
       filler: {
-        propagate: false
+        propagate: false,
       },
-      title: false
+      title: false,
     },
     // animations: false, // Disable animations
     animation: {
-      onComplete: e => {
+      onComplete: (e) => {
         resizeMask(e.chart);
-      }
+      },
     },
     interaction: {
       intersect: true,
     },
     scales: {
       x: {
-        type: 'time',
+        type: "time",
         min: minX,
         max: maxX,
         ticks: {
           autoSkip: true,
           maxRotation: 0, // Do not rotate labels (0~50)
-          color: '#334155',
+          color: "#334155",
           display: true,
-          source: 'labels',
+          source: "labels",
         },
         grid: {
           display: false, // Hide x-axis grid lines
         },
         time: {
-          minUnit: 'day', // Minimum display unit
+          minUnit: "day", // Minimum display unit
           // displayFormats: {
           //   minute: 'HH:mm MMM d',
           //   hour: 'HH:mm MMM d',
           // }
-        }
+        },
       },
       y: {
         beginAtZero: true, // Scale includes 0
         max: max,
-        ticks: { // Set tick intervals
+        ticks: {
+          // Set tick intervals
           display: false, // Hide values, only show grid lines
           stepSize: max / 4,
         },
         grid: {
-          color: 'rgba(100,116,139)',
+          color: "rgba(100,116,139)",
           z: 1,
         },
         border: {
           display: false, // Hide the extra border line on the left
-        }
+        },
       },
     },
   };
-  const config =  {
-    type: 'line',
+  const config = {
+    type: "line",
     data: data,
     options: options,
   };
@@ -327,22 +360,29 @@ function changeSelectArea(e) {
 function sliderTimeRange(e, direction) {
   // Find the closest index; time format: millisecond timestamps
   const sliderDataVal = sliderData.value;
-  const targetTime = [new Date(timeFrameStartEnd.value[0]).getTime(), new Date(timeFrameStartEnd.value[1]).getTime()];
-  const closestIndexes = targetTime.map(target => {
+  const targetTime = [
+    new Date(timeFrameStartEnd.value[0]).getTime(),
+    new Date(timeFrameStartEnd.value[1]).getTime(),
+  ];
+  const closestIndexes = targetTime.map((target) => {
     let closestIndex = 0;
-    closestIndex = ((target - sliderDataVal[0])/(sliderDataVal[sliderDataVal.length-1]-sliderDataVal[0])) * sliderDataVal.length;
+    closestIndex =
+      ((target - sliderDataVal[0]) /
+        (sliderDataVal[sliderDataVal.length - 1] - sliderDataVal[0])) *
+      sliderDataVal.length;
     let result = Math.round(Math.abs(closestIndex));
     result = result > selectRange.value ? selectRange.value : result;
-    return result
+    return result;
   });
 
   // Update the slider
   selectArea.value = closestIndexes;
   // Reset the start/end calendar selection range
-  if(direction === 'start') endMinDate.value = e;
-  else if(direction === 'end') startMaxDate.value = e;
+  if (direction === "start") endMinDate.value = e;
+  else if (direction === "end") startMaxDate.value = e;
   // Recalculate the chart mask
-  if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) resizeMask(chart.value);
+  if (!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1]))
+    resizeMask(chart.value);
   else return;
 }
 
diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index 0f0d32d..3aacaff 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/src/components/Discover/Map/Filter/Trace.vue
@@ -1,5 +1,7 @@
 <template>
-<div class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full space-x-4 overflow-y-auto overflow-x-auto scrollbar">
+  <div
+    class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full space-x-4 overflow-y-auto overflow-x-auto scrollbar"
+  >
     <!-- Range Selection -->
     <section class="py-2 space-y-2 text-sm min-w-[48%] h-full">
       <p class="h2">Range Selection</p>
@@ -7,32 +9,64 @@
         <span class="material-symbols-outlined mr-2 !text-base">info</span>
         <p>Select a percentage range.</p>
       </div>
-      <Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
+      <Chart
+        type="bar"
+        :data="chartData"
+        :options="chartOptions"
+        class="h-2/5"
+      />
       <div class="px-2">
-        <p class="py-4">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
-        <Slider v-model="selectArea" :step="1" :min="0" :max="traceTotal" range class="mx-2" />
+        <p class="py-4">
+          Select percentage of case
+          <span class="float-right">{{ caseTotalPercent }}%</span>
+        </p>
+        <Slider
+          v-model="selectArea"
+          :step="1"
+          :min="0"
+          :max="traceTotal"
+          range
+          class="mx-2"
+        />
       </div>
     </section>
     <!-- Trace List -->
     <section class="h-full min-w-[48%] py-2 space-y-2">
       <p class="h2">Trace List ({{ traceTotal }})</p>
       <p class="text-primary h2 flex items-center justify-start">
-        <span class="material-symbols-outlined mr-2 !text-base">info</span>Click trace number to see more.
+        <span class="material-symbols-outlined mr-2 !text-base">info</span>Click
+        trace number to see more.
       </p>
-      <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
+      <div
+        class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]"
+      >
         <table class="border-separate border-spacing-x-2 text-sm w-full">
-          <caption class="hidden">Trace list</caption>
+          <caption class="hidden">
+            Trace list
+          </caption>
           <thead class="sticky top-0 z-10 bg-neutral-10">
             <tr>
               <th class="h2 px-2 border-b border-neutral-500">Trace</th>
-              <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
+              <th
+                class="h2 px-2 border-b border-neutral-500 text-start"
+                colspan="3"
+              >
+                Occurrences
+              </th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id, trace.base_count)">
+            <tr
+              v-for="(trace, key) in traceList"
+              :key="key"
+              class="cursor-pointer hover:text-primary"
+              @click="switchCaseData(trace.id, trace.base_count)"
+            >
               <td class="p-2 text-center">#{{ trace.id }}</td>
               <td class="p-2 min-w-[96px]">
-                <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+                <div
+                  class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"
+                >
                   <div class="h-full bg-primary" :style="trace.value"></div>
                 </div>
               </td>
@@ -48,16 +82,34 @@
       <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
       <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
         <div class="h-full w-full">
-          <div id="cyTrace" ref="cyTraceRef" class="h-full min-w-full relative"></div>
+          <div
+            id="cyTrace"
+            ref="cyTraceRef"
+            class="h-full min-w-full relative"
+          ></div>
         </div>
       </div>
-      <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable" @scroll="handleScroll">
-        <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
+      <div
+        class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable"
+        @scroll="handleScroll"
+      >
+        <DataTable
+          :value="caseData"
+          showGridlines
+          tableClass="text-sm"
+          breakpoint="0"
+        >
           <div v-for="(col, index) in columnData" :key="index">
             <Column :field="col.field" :header="col.header">
               <template #body="{ data }">
-                <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
-                    {{ data[col.field] }}
+                <div
+                  :class="
+                    data[col.field]?.length > 18
+                      ? 'whitespace-normal'
+                      : 'whitespace-nowrap'
+                  "
+                >
+                  {{ data[col.field] }}
                 </div>
               </template>
             </Column>
@@ -65,7 +117,7 @@
         </DataTable>
       </div>
     </section>
-</div>
+  </div>
 </template>
 
 <script setup>
@@ -79,22 +131,28 @@
  *   trace detail display.
  */
 
-import { ref, computed, watch, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { useLoadingStore } from '@/stores/loading';
-import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
+import { ref, computed, watch, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useLoadingStore } from "@/stores/loading";
+import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
 
-const emit = defineEmits(['filter-trace-selectArea']);
+const emit = defineEmits(["filter-trace-selectArea"]);
 
 const allMapDataStore = useAllMapDataStore();
 const loadingStore = useLoadingStore();
-const { infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases } = storeToRefs(allMapDataStore);
+const {
+  infinit404,
+  baseInfiniteStart,
+  baseTraces,
+  baseTraceTaskSeq,
+  baseCases,
+} = storeToRefs(allMapDataStore);
 const { isLoading } = storeToRefs(loadingStore);
 
 const processMap = ref({
-  nodes:[],
-  edges:[],
+  nodes: [],
+  edges: [],
 });
 const showTraceId = ref(null);
 const infinitMaxItems = ref(false);
@@ -111,95 +169,113 @@ const traceTotal = computed(() => {
 defineExpose({ selectArea, showTraceId, traceTotal });
 
 const traceCountTotal = computed(() => {
-  return baseTraces.value.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+  return baseTraces.value
+    .map((trace) => trace.count)
+    .reduce((acc, cur) => acc + cur, 0);
 });
 
 const traceList = computed(() => {
-  return baseTraces.value.map(trace => {
-    return {
-      id: trace.id,
-      value: progressWidth(Number(((trace.count / traceCountTotal.value) * 100).toFixed(1))),
-      count: trace.count.toLocaleString(),
-      base_count: trace.count,
-      ratio: getPercentLabel(trace.count / traceCountTotal.value),
-    };
-  }).slice(selectArea.value[0], selectArea.value[1]);
+  return baseTraces.value
+    .map((trace) => {
+      return {
+        id: trace.id,
+        value: progressWidth(
+          Number(((trace.count / traceCountTotal.value) * 100).toFixed(1)),
+        ),
+        count: trace.count.toLocaleString(),
+        base_count: trace.count,
+        ratio: getPercentLabel(trace.count / traceCountTotal.value),
+      };
+    })
+    .slice(selectArea.value[0], selectArea.value[1]);
 });
 
 const caseTotalPercent = computed(() => {
-  const ratioSum = traceList.value.map(trace => trace.base_count).reduce((acc, cur) => acc + cur, 0) / traceCountTotal.value;
-  return getPercentLabel(ratioSum)
+  const ratioSum =
+    traceList.value
+      .map((trace) => trace.base_count)
+      .reduce((acc, cur) => acc + cur, 0) / traceCountTotal.value;
+  return getPercentLabel(ratioSum);
 });
 
 const chartData = computed(() => {
   const start = selectArea.value[0];
   const end = selectArea.value[1] - 1;
-  const labels = baseTraces.value.map(trace => `#${trace.id}`);
-  const data = baseTraces.value.map(trace => getPercentLabel(trace.count / traceCountTotal.value));
-  const selectAreaData = baseTraces.value.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
+  const labels = baseTraces.value.map((trace) => `#${trace.id}`);
+  const data = baseTraces.value.map((trace) =>
+    getPercentLabel(trace.count / traceCountTotal.value),
+  );
+  const selectAreaData = baseTraces.value.map((trace, index) =>
+    index >= start && index <= end ? "rgba(0,153,255)" : "rgba(203, 213, 225)",
+  );
 
-  return { // Data to display
+  return {
+    // Data to display
     labels,
     datasets: [
       {
-        label: 'Trace', // Dataset label
+        label: "Trace", // Dataset label
         data,
         backgroundColor: selectAreaData,
         categoryPercentage: 1.0,
-        barPercentage: 1.0
+        barPercentage: 1.0,
       },
-    ]
+    ],
   };
 });
 
 const caseData = computed(() => {
   const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
-  data.forEach(item => {
+  data.forEach((item) => {
     item.attributes.forEach((attribute, index) => {
       item[`att_${index}`] = attribute.value; // Create a new key-value pair
     });
     delete item.attributes; // Remove the original attributes property
-  })
+  });
   return data;
 });
 
 const columnData = computed(() => {
   const data = JSON.parse(JSON.stringify(baseCases.value)); // Deep copy the original cases data
   let result = [
-      { field: 'id', header: 'Case Id' },
-      { field: 'started_at', header: 'Start time' },
-      { field: 'completed_at', header: 'End time' },
-    ];
-  if(data.length !== 0){
+    { field: "id", header: "Case Id" },
+    { field: "started_at", header: "Start time" },
+    { field: "completed_at", header: "End time" },
+  ];
+  if (data.length !== 0) {
     result = [
-      { field: 'id', header: 'Case Id' },
-      { field: 'started_at', header: 'Start time' },
-      { field: 'completed_at', header: 'End time' },
-      ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
+      { field: "id", header: "Case Id" },
+      { field: "started_at", header: "Start time" },
+      { field: "completed_at", header: "End time" },
+      ...(data[0]?.attributes ?? []).map((att, index) => ({
+        field: `att_${index}`,
+        header: att.key,
+      })),
     ];
   }
-  return result
+  return result;
 });
 
 watch(selectArea, (newValue, oldValue) => {
   const roundValue = Math.round(newValue[1].toFixed());
-  if(newValue[1] !== roundValue) selectArea.value[1] = roundValue;
-  if(newValue != oldValue) emit('filter-trace-selectArea', newValue); // Determine whether Apply should be disabled
+  if (newValue[1] !== roundValue) selectArea.value[1] = roundValue;
+  if (newValue != oldValue) emit("filter-trace-selectArea", newValue); // Determine whether Apply should be disabled
 });
 
 watch(infinit404, (newValue) => {
-  if(newValue === 404) infinitMaxItems.value = true;
+  if (newValue === 404) infinitMaxItems.value = true;
 });
 
 watch(showTraceId, (newValue, oldValue) => {
-  const isScrollTop = document.querySelector('.infiniteTable');
-  if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
+  const isScrollTop = document.querySelector(".infiniteTable");
+  if (isScrollTop && typeof isScrollTop.scrollTop !== "undefined")
+    if (newValue !== oldValue) isScrollTop.scrollTop = 0;
 });
 
 /**
  * Set bar chart Options
  */
-function barOptions(){
+function barOptions() {
   return {
     maintainAspectRatio: false,
     aspectRatio: 0.8,
@@ -208,41 +284,43 @@ function barOptions(){
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
-      legend: { // Legend
+      legend: {
+        // Legend
         display: false,
       },
       tooltip: {
         callbacks: {
-          label: (tooltipItems) =>{
-            return `${tooltipItems.dataset.label}: ${tooltipItems.parsed.y}%`
-          }
-        }
-      }
+          label: (tooltipItems) => {
+            return `${tooltipItems.dataset.label}: ${tooltipItems.parsed.y}%`;
+          },
+        },
+      },
     },
     animations: false,
     scales: {
       x: {
-        display:false
+        display: false,
       },
       y: {
-        ticks: { // Set tick intervals
+        ticks: {
+          // Set tick intervals
           display: false, // Hide values, only show grid lines
           min: 0,
           max: traceList.value[0]?.ratio,
-          stepSize: (traceList.value[0]?.ratio)/4,
+          stepSize: traceList.value[0]?.ratio / 4,
         },
         grid: {
-          color: 'rgba(100,116,139)',
+          color: "rgba(100,116,139)",
           z: 1,
         },
         border: {
           display: false, // Hide the extra border line on the left
-        }
-      }
-    }
+        },
+      },
+    },
   };
 }
 
@@ -251,8 +329,8 @@ function barOptions(){
  * @param   {number} val - The raw ratio value.
  * @returns {string} The formatted percentage string.
  */
-function getPercentLabel(val){
-  if((val * 100).toFixed(1) >= 100) return 100;
+function getPercentLabel(val) {
+  if ((val * 100).toFixed(1) >= 100) return 100;
   else return parseFloat((val * 100).toFixed(1));
 }
 
@@ -261,8 +339,8 @@ function getPercentLabel(val){
  * @param   {number} value - The percentage value.
  * @returns {string} The CSS width style string.
  */
-function progressWidth(value){
-  return `width:${value}%;`
+function progressWidth(value) {
+  return `width:${value}%;`;
 }
 
 /**
@@ -272,7 +350,7 @@ function progressWidth(value){
  */
 async function switchCaseData(id, count) {
   // Do nothing if clicking the same id
-  if(id == showTraceId.value) return;
+  if (id == showTraceId.value) return;
   isLoading.value = true; // Always show loading screen
   infinit404.value = null;
   infinitMaxItems.value = false;
@@ -287,7 +365,7 @@ async function switchCaseData(id, count) {
 /**
  * Assembles the trace element nodes data for Cytoscape rendering.
  */
-function setNodesData(){
+function setNodesData() {
   // Clear nodes to prevent accumulation on each render
   processMap.value.nodes = [];
   // Populate nodes with data returned from the API call
@@ -296,20 +374,20 @@ function setNodesData(){
       data: {
         id: index,
         label: node,
-        backgroundColor: '#CCE5FF',
-        bordercolor: '#003366',
-        shape: 'round-rectangle',
+        backgroundColor: "#CCE5FF",
+        bordercolor: "#003366",
+        shape: "round-rectangle",
         height: 80,
-        width: 100
-      }
+        width: 100,
+      },
     });
-  })
+  });
 }
 
 /**
  * Assembles the trace edge line data for Cytoscape rendering.
  */
-function setEdgesData(){
+function setEdgesData() {
   processMap.value.edges = [];
   baseTraceTaskSeq.value.forEach((edge, index) => {
     processMap.value.edges.push({
@@ -317,8 +395,8 @@ function setEdgesData(){
         source: `${index}`,
         target: `${index + 1}`,
         lineWidth: 1,
-        style: 'solid'
-      }
+        style: "solid",
+      },
     });
   });
   // The number of edges is one less than the number of nodes
@@ -328,7 +406,7 @@ function setEdgesData(){
 /**
  * create trace cytoscape's map
  */
-function createCy(){
+function createCy() {
   const graphId = cyTraceRef.value;
 
   setNodesData();
@@ -341,12 +419,18 @@ function createCy(){
  * @param {Event} event - The scroll event.
  */
 function handleScroll(event) {
-  if(infinitMaxItems.value || baseCases.value.length < 20 || infiniteFinish.value === false) return;
+  if (
+    infinitMaxItems.value ||
+    baseCases.value.length < 20 ||
+    infiniteFinish.value === false
+  )
+    return;
 
   const container = event.target;
-  const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
+  const overScrollHeight =
+    container.scrollTop + container.clientHeight >= container.scrollHeight;
 
-  if(overScrollHeight) fetchData();
+  if (overScrollHeight) fetchData();
 }
 
 /**
@@ -361,8 +445,8 @@ async function fetchData() {
     infiniteData.value = [...infiniteData.value, ...baseCases.value];
     infiniteFinish.value = true;
     isLoading.value = false;
-  } catch(error) {
-    console.error('Failed to load data:', error);
+  } catch (error) {
+    console.error("Failed to load data:", error);
   }
 }
 
@@ -372,7 +456,7 @@ onMounted(() => {
   setEdgesData();
   createCy();
   chartOptions.value = barOptions();
-  selectArea.value = [0, traceTotal.value]
+  selectArea.value = [0, traceTotal.value];
   isLoading.value = false;
 });
 </script>
@@ -381,14 +465,14 @@ onMounted(() => {
 @reference "../../../../assets/tailwind.css";
 /* Table set */
 :deep(.p-datatable-thead) {
-  @apply sticky top-0 left-0 z-10 bg-neutral-10
+  @apply sticky top-0 left-0 z-10 bg-neutral-10;
 }
 :deep(.p-datatable .p-datatable-thead > tr > th) {
   @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500;
   white-space: nowrap;
 }
 :deep(.p-datatable .p-datatable-tbody > tr > td) {
-  @apply border-neutral-500 !border-t-0 text-center
+  @apply border-neutral-500 !border-t-0 text-center;
 }
 :deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
   min-width: 72px;
@@ -398,6 +482,6 @@ onMounted(() => {
 }
 /* Center datatable header */
 :deep(.p-column-header-content) {
-  @apply justify-center
+  @apply justify-center;
 }
 </style>
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index 341b5f5..494e710 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -1,54 +1,144 @@
 <template>
-  <Sidebar :visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false"  :autoZIndex="false" class="!w-11/12 !bg-neutral-100">
+  <Sidebar
+    :visible="sidebarFilter"
+    :closeIcon="'pi pi-chevron-left'"
+    :modal="false"
+    position="left"
+    :dismissable="false"
+    :autoZIndex="false"
+    class="!w-11/12 !bg-neutral-100"
+  >
     <template #header>
       <ul class="flex space-x-4">
-        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('filter')" :class="tab === 'filter'? 'text-neutral-900': 'text-neutral-500'" id="tabFilter">Filter</li>
-        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('funnel')" :class="tab === 'funnel'? 'text-neutral-900': 'text-neutral-500'" id="tabFunnel">Funnel</li>
+        <li
+          class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
+          @click="switchTab('filter')"
+          :class="tab === 'filter' ? 'text-neutral-900' : 'text-neutral-500'"
+          id="tabFilter"
+        >
+          Filter
+        </li>
+        <li
+          class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
+          @click="switchTab('funnel')"
+          :class="tab === 'funnel' ? 'text-neutral-900' : 'text-neutral-500'"
+          id="tabFunnel"
+        >
+          Funnel
+        </li>
       </ul>
     </template>
     <!-- header: filter -->
-    <div v-if="tab === 'filter'" class="pt-4 flex w-full h-full text-neutral-900">
+    <div
+      v-if="tab === 'filter'"
+      class="pt-4 flex w-full h-full text-neutral-900"
+    >
       <!-- title: filter silect -->
       <div class="space-y-2 mr-4 w-48 text-sm">
         <div>
           <p class="h2">Filter Type</p>
-          <div v-for="(item, index) in selectFilter['Filter Type']" :key="index">
-            <RadioButton v-model="selectValue[0]" :inputId="item + index" name="Filter Type" :value="item" class="mb-1 mr-2" @change="radioFilterType"/>
+          <div
+            v-for="(item, index) in selectFilter['Filter Type']"
+            :key="index"
+          >
+            <RadioButton
+              v-model="selectValue[0]"
+              :inputId="item + index"
+              name="Filter Type"
+              :value="item"
+              class="mb-1 mr-2"
+              @change="radioFilterType"
+            />
             <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div v-show="selectValue[0] === 'Sequence'">
           <p class="h2">Activity Sequence</p>
-          <div v-for="(item, index) in selectFilter['Activity Sequence']" :key="index">
-            <RadioButton v-model="selectValue[1]" :inputId="item + index" name="Activity Sequence" :value="item" class="mb-1 mr-2" @change="radioActSeq"/>
+          <div
+            v-for="(item, index) in selectFilter['Activity Sequence']"
+            :key="index"
+          >
+            <RadioButton
+              v-model="selectValue[1]"
+              :inputId="item + index"
+              name="Activity Sequence"
+              :value="item"
+              class="mb-1 mr-2"
+              @change="radioActSeq"
+            />
             <label :for="item + index">{{ item }}</label>
           </div>
         </div>
-        <div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Start & End'">
+        <div
+          v-show="
+            selectValue[0] === 'Sequence' && selectValue[1] === 'Start & End'
+          "
+        >
           <p class="h2">Start & End</p>
-          <div v-for="(item, index) in selectFilter['Start & End']" :key="index">
-            <RadioButton v-model="selectValue[2]" :inputId="item + index" name="Start & End" :value="item" class="mb-1 mr-2" @change="radioStartAndEnd"/>
+          <div
+            v-for="(item, index) in selectFilter['Start & End']"
+            :key="index"
+          >
+            <RadioButton
+              v-model="selectValue[2]"
+              :inputId="item + index"
+              name="Start & End"
+              :value="item"
+              class="mb-1 mr-2"
+              @change="radioStartAndEnd"
+            />
             <label :for="item + index">{{ item }}</label>
           </div>
         </div>
-        <div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Sequence'">
+        <div
+          v-show="
+            selectValue[0] === 'Sequence' && selectValue[1] === 'Sequence'
+          "
+        >
           <p class="h2">Mode</p>
           <div v-for="(item, index) in selectFilter['Mode']" :key="index">
-            <RadioButton v-model="selectValue[3]" :inputId="item + index" name="Mode" :value="item" class="mb-1 mr-2"/>
+            <RadioButton
+              v-model="selectValue[3]"
+              :inputId="item + index"
+              name="Mode"
+              :value="item"
+              class="mb-1 mr-2"
+            />
             <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div>
           <p class="h2">Refine</p>
           <div v-for="(item, index) in selectFilter['Refine']" :key="index">
-            <RadioButton v-model="selectValue[5]" :inputId="item + index" name="Refine" :value="item" class="mb-1 mr-2"/>
+            <RadioButton
+              v-model="selectValue[5]"
+              :inputId="item + index"
+              name="Refine"
+              :value="item"
+              class="mb-1 mr-2"
+            />
             <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div v-show="selectValue[0] === 'Timeframes'">
-          <p class="h2">Containment<span class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer" v-tooltip.bottom="tooltip.containment">info</span></p>
-          <div v-for="(item, index) in selectFilter['Containment']" :key="index">
-            <RadioButton v-model="selectValue[6]" :inputId="item + index" name="Containment" :value="item" class="mb-1 mr-2"/>
+          <p class="h2">
+            Containment<span
+              class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer"
+              v-tooltip.bottom="tooltip.containment"
+              >info</span
+            >
+          </p>
+          <div
+            v-for="(item, index) in selectFilter['Containment']"
+            :key="index"
+          >
+            <RadioButton
+              v-model="selectValue[6]"
+              :inputId="item + index"
+              name="Containment"
+              :value="item"
+              class="mb-1 mr-2"
+            />
             <label :for="item + index">{{ item }}</label>
           </div>
         </div>
@@ -58,36 +148,122 @@
         <!-- Filter titles -->
         <div class="w-full h-[calc(100%_-_56px)] mb-2">
           <!-- title: Activity Select  -->
-          <div class="w-full h-[calc(100%_-_48px)]" v-if="selectValue[0] === 'Sequence'">
+          <div
+            class="w-full h-[calc(100%_-_48px)]"
+            v-if="selectValue[0] === 'Sequence'"
+          >
             <p class="h2 ml-1 mb-2">Activity Select</p>
             <!-- Filter task Data-->
-            <ActOccCase v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Have activity(s)'" :tableTitle="'Activity List'" :tableData="filterAllTaskData" :tableSelect="selectFilterTask" :progressWidth ="progressWidth" @on-row-select="onRowAct"></ActOccCase>
+            <ActOccCase
+              v-if="
+                selectValue[0] === 'Sequence' &&
+                selectValue[1] === 'Have activity(s)'
+              "
+              :tableTitle="'Activity List'"
+              :tableData="filterAllTaskData"
+              :tableSelect="selectFilterTask"
+              :progressWidth="progressWidth"
+              @on-row-select="onRowAct"
+            ></ActOccCase>
             <!-- Filter Start Data -->
-            <ActOcc v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start & End' && selectValue[2] === 'Start'" :tableTitle="'Start activity'" :tableData="filterStartData" :tableSelect="selectFilterStart" :progressWidth ="progressWidth" @on-row-select="onRowStart"></ActOcc>
+            <ActOcc
+              v-if="
+                selectValue[0] === 'Sequence' &&
+                selectValue[1] === 'Start & End' &&
+                selectValue[2] === 'Start'
+              "
+              :tableTitle="'Start activity'"
+              :tableData="filterStartData"
+              :tableSelect="selectFilterStart"
+              :progressWidth="progressWidth"
+              @on-row-select="onRowStart"
+            ></ActOcc>
             <!-- Filter End Data -->
-            <ActOcc v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start & End' && selectValue[2] === 'End'" :tableTitle="'End activity'" :tableData="filterEndData" :tableSelect="selectFilterEnd" :progressWidth ="progressWidth" @on-row-select="onRowEnd"></ActOcc>
+            <ActOcc
+              v-if="
+                selectValue[0] === 'Sequence' &&
+                selectValue[1] === 'Start & End' &&
+                selectValue[2] === 'End'
+              "
+              :tableTitle="'End activity'"
+              :tableData="filterEndData"
+              :tableSelect="selectFilterEnd"
+              :progressWidth="progressWidth"
+              @on-row-select="onRowEnd"
+            ></ActOcc>
             <!-- Filter Start And End Data -->
-            <div v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Start & End' && selectValue[2] === 'Start & End'" class="flex justify-between items-center w-full h-full space-x-4 ">
-              <ActOcc :tableTitle="'Start activity'" :tableData="filterStartToEndData" :tableSelect="selectFilterStartToEnd" :progressWidth ="progressWidth" class="w-1/2" @on-row-select="startRow"></ActOcc>
-              <ActOcc :tableTitle="'End activity'" :tableData="filterEndToStartData" :tableSelect="selectFilterEndToStart" :progressWidth ="progressWidth" class="w-1/2" @on-row-select="endRow"></ActOcc>
+            <div
+              v-if="
+                selectValue[0] === 'Sequence' &&
+                selectValue[1] === 'Start & End' &&
+                selectValue[2] === 'Start & End'
+              "
+              class="flex justify-between items-center w-full h-full space-x-4"
+            >
+              <ActOcc
+                :tableTitle="'Start activity'"
+                :tableData="filterStartToEndData"
+                :tableSelect="selectFilterStartToEnd"
+                :progressWidth="progressWidth"
+                class="w-1/2"
+                @on-row-select="startRow"
+              ></ActOcc>
+              <ActOcc
+                :tableTitle="'End activity'"
+                :tableData="filterEndToStartData"
+                :tableSelect="selectFilterEndToStart"
+                :progressWidth="progressWidth"
+                class="w-1/2"
+                @on-row-select="endRow"
+              ></ActOcc>
             </div>
             <!-- Filter Sequence -->
-            <div v-if="selectValue[0] === 'Sequence' && selectValue[1] === 'Sequence'" class="flex justify-between items-center w-full h-full space-x-4">
-              <ActAndSeq :filterTaskData="filterTaskData" :progressWidth ="progressWidth" :listSeq="listSeq" @update:listSeq="onUpdateListSeq"></ActAndSeq>
+            <div
+              v-if="
+                selectValue[0] === 'Sequence' && selectValue[1] === 'Sequence'
+              "
+              class="flex justify-between items-center w-full h-full space-x-4"
+            >
+              <ActAndSeq
+                :filterTaskData="filterTaskData"
+                :progressWidth="progressWidth"
+                :listSeq="listSeq"
+                @update:listSeq="onUpdateListSeq"
+              ></ActAndSeq>
             </div>
           </div>
           <!-- title: Attributes -->
-          <Attributes v-if="selectValue[0] === 'Attributes'" @select-attribute="getSelectAttribute"></Attributes>
+          <Attributes
+            v-if="selectValue[0] === 'Attributes'"
+            @select-attribute="getSelectAttribute"
+          ></Attributes>
           <!-- title: Trace -->
-          <Trace v-if="selectValue[0] === 'Trace'" ref="filterTraceViewRef" @filter-trace-selectArea="selectTraceArea = $event"></Trace>
+          <Trace
+            v-if="selectValue[0] === 'Trace'"
+            ref="filterTraceViewRef"
+            @filter-trace-selectArea="selectTraceArea = $event"
+          ></Trace>
           <!-- title: Timeframes -->
-          <Timeframes v-if="selectValue[0] === 'Timeframes'" :selectValue="selectValue"></Timeframes>
+          <Timeframes
+            v-if="selectValue[0] === 'Timeframes'"
+            :selectValue="selectValue"
+          ></Timeframes>
         </div>
 
         <!-- Button -->
         <div class="float-right space-x-4 px-4 py-2">
-          <button type="button"  class="btn btn-sm btn-neutral" @click="reset">Clear</button>
-          <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabledButton" :class="isDisabled ? 'btn-disable' : 'btn-neutral'">Apply</button>
+          <button type="button" class="btn btn-sm btn-neutral" @click="reset">
+            Clear
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm"
+            @click="submit"
+            :disabled="isDisabledButton"
+            :class="isDisabled ? 'btn-disable' : 'btn-neutral'"
+          >
+            Apply
+          </button>
         </div>
       </div>
     </div>
@@ -108,52 +284,66 @@
  *   filters.
  */
 
-import { ref, reactive, computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useToast } from 'vue-toast-notification';
-import { useLoadingStore } from '@/stores/loading';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import ActOccCase from '@/components/Discover/Map/Filter/ActOccCase.vue';
-import ActOcc from '@/components/Discover/Map/Filter/ActOcc.vue';
-import ActAndSeq from '@/components/Discover/Map/Filter/ActAndSeq.vue';
-import Attributes from '@/components/Discover/Map/Filter/Attributes.vue';
-import Funnel from '@/components/Discover/Map/Filter/Funnel.vue';
-import Trace from '@/components/Discover/Map/Filter/Trace.vue';
-import Timeframes from '@/components/Discover/Map/Filter/Timeframes.vue';
-import emitter from '@/utils/emitter';
-import getMoment from 'moment';
+import { ref, reactive, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useToast } from "vue-toast-notification";
+import { useLoadingStore } from "@/stores/loading";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import ActOccCase from "@/components/Discover/Map/Filter/ActOccCase.vue";
+import ActOcc from "@/components/Discover/Map/Filter/ActOcc.vue";
+import ActAndSeq from "@/components/Discover/Map/Filter/ActAndSeq.vue";
+import Attributes from "@/components/Discover/Map/Filter/Attributes.vue";
+import Funnel from "@/components/Discover/Map/Filter/Funnel.vue";
+import Trace from "@/components/Discover/Map/Filter/Trace.vue";
+import Timeframes from "@/components/Discover/Map/Filter/Timeframes.vue";
+import emitter from "@/utils/emitter";
+import getMoment from "moment";
 
-const props = defineProps(['sidebarFilter', 'filterTasks', 'filterStartToEnd', 'filterEndToStart', 'filterTimeframe', 'filterTrace']);
-const emit = defineEmits(['submit-all']);
+const props = defineProps([
+  "sidebarFilter",
+  "filterTasks",
+  "filterStartToEnd",
+  "filterEndToStart",
+  "filterTimeframe",
+  "filterTrace",
+]);
+const emit = defineEmits(["submit-all"]);
 const $toast = useToast();
 
 const loadingStore = useLoadingStore();
 const allMapDataStore = useAllMapDataStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, selectTimeFrame } = storeToRefs(allMapDataStore);
+const {
+  hasResultRule,
+  temporaryData,
+  postRuleData,
+  ruleData,
+  isRuleData,
+  selectTimeFrame,
+} = storeToRefs(allMapDataStore);
 
 const selectFilter = {
-  'Filter Type': ['Sequence', 'Attributes', 'Trace', 'Timeframes'],
+  "Filter Type": ["Sequence", "Attributes", "Trace", "Timeframes"],
   // 'Filter Type': ['Sequence', 'Trace', 'Timeframes'],  // without Attributes
-  'Activity Sequence':['Have activity(s)', 'Start & End', 'Sequence'],
-  'Start & End': ['Start', 'End', 'Start & End'],
-  'Mode': ['Directly follows', 'Eventually follows'],
-  'ModeAtt': ['Case', 'Activity'],
-  'Refine': ['Include', 'Exclude'],
-  'Containment': ['Contained in', 'Started in', 'Ended in', 'Active in'],
+  "Activity Sequence": ["Have activity(s)", "Start & End", "Sequence"],
+  "Start & End": ["Start", "End", "Start & End"],
+  Mode: ["Directly follows", "Eventually follows"],
+  ModeAtt: ["Case", "Activity"],
+  Refine: ["Include", "Exclude"],
+  Containment: ["Contained in", "Started in", "Ended in", "Active in"],
 };
-const tab = ref('filter'); // filter | funnel
+const tab = ref("filter"); // filter | funnel
 const selectValue = reactive({
-  0: 'Sequence',
-  1: 'Have activity(s)',
-  2: 'Start',
-  3: 'Directly follows',
-  4: 'Case',
-  5: 'Include',
-  6: 'Contained in',
+  0: "Sequence",
+  1: "Have activity(s)",
+  2: "Start",
+  3: "Directly follows",
+  4: "Case",
+  5: "Include",
+  6: "Contained in",
 });
 const selectFilterTask = ref(null);
-const selectAttType = ref('');
+const selectAttType = ref("");
 const selectAttribute = ref(null);
 const selectFilterStart = ref(null);
 const selectFilterEnd = ref(null);
@@ -170,20 +360,21 @@ const isDisabled = ref(true); // Apply Button disabled setting
 const filterTraceViewRef = ref(null);
 const tooltip = {
   containment: {
-    value: '<img src="/filterContainment.png" alt="filterContainment" class="block" width="108" height="250">',
+    value:
+      '<img src="/filterContainment.png" alt="filterContainment" class="block" width="108" height="250">',
     escape: false,
     autoHide: false,
     pt: {
       root: {
-        class: 'bg-transparent'
+        class: "bg-transparent",
       },
       arrow: {
-        class: 'hidden'
+        class: "hidden",
       },
       text: {
-        class: 'p-0 bg-transparent'
-      }
-    }
+        class: "p-0 bg-transparent",
+      },
+    },
   },
 };
 
@@ -207,11 +398,15 @@ const filterEndData = computed(() => {
 });
 
 const filterStartToEndData = computed(() => {
-  return isEndSelected.value ? setStartAndEndData(props.filterEndToStart, rowData.value, 'sources') : setActData(props.filterStartToEnd);
+  return isEndSelected.value
+    ? setStartAndEndData(props.filterEndToStart, rowData.value, "sources")
+    : setActData(props.filterStartToEnd);
 });
 
 const filterEndToStartData = computed(() => {
-  return isStartSelected.value ? setStartAndEndData(props.filterStartToEnd, rowData.value, 'sinks') : setActData(props.filterEndToStart);
+  return isStartSelected.value
+    ? setStartAndEndData(props.filterStartToEnd, rowData.value, "sinks")
+    : setActData(props.filterEndToStart);
 });
 
 // Apply Button disabled setting
@@ -221,13 +416,13 @@ const isDisabledButton = computed(() => {
   const type = selectAttType.value;
   const firstSelection = sele[0];
 
-  if (firstSelection === 'Sequence') {
+  if (firstSelection === "Sequence") {
     disabled = handleSequenceSelection(sele);
-  } else if (firstSelection === 'Attributes') {
+  } else if (firstSelection === "Attributes") {
     disabled = handleAttributesSelection(type);
-  } else if (firstSelection === 'Trace') {
+  } else if (firstSelection === "Trace") {
     disabled = handleTraceSelection();
-  } else if (firstSelection === 'Timeframes') {
+  } else if (firstSelection === "Timeframes") {
     disabled = handleTimeframesSelection();
   }
 
@@ -271,8 +466,8 @@ function switchTab(newTab) {
  * @param   {number} val - The raw ratio value.
  * @returns {string} The formatted percentage string.
  */
-function getPercentLabel(val){
-  if((val * 100).toFixed(1) >= 100) return `100%`;
+function getPercentLabel(val) {
+  if ((val * 100).toFixed(1) >= 100) return `100%`;
   else return `${(val * 100).toFixed(1)}%`;
 }
 
@@ -281,28 +476,30 @@ function getPercentLabel(val){
  * @param   {number} value - The percentage value.
  * @returns {string} The CSS width style string.
  */
-function progressWidth(value){
-  return `width:${value}%;`
+function progressWidth(value) {
+  return `width:${value}%;`;
 }
 
 // Set up the Have activity(s) content
 /**
  * @param {array} data filterTaskData
  */
-function setHaveAct(data){
-  return data.map(task => {
-    return {
-      label: task.label,
-      occ_value: Number(task.occurrence_ratio * 100),
-      occurrences: Number(task.occurrences).toLocaleString('en-US'),
-      occurrences_base: task.occurrences,
-      occurrence_ratio: getPercentLabel(task.occurrence_ratio),
-      case_value: Number(task.case_ratio * 100),
-      cases: task.cases.toLocaleString('en-US'),
-      cases_base: task.cases,
-      case_ratio: getPercentLabel(task.case_ratio),
-    };
-  }).sort((x, y) => y.occurrences_base - x.occurrences_base);
+function setHaveAct(data) {
+  return data
+    .map((task) => {
+      return {
+        label: task.label,
+        occ_value: Number(task.occurrence_ratio * 100),
+        occurrences: Number(task.occurrences).toLocaleString("en-US"),
+        occurrences_base: task.occurrences,
+        occurrence_ratio: getPercentLabel(task.occurrence_ratio),
+        case_value: Number(task.case_ratio * 100),
+        cases: task.cases.toLocaleString("en-US"),
+        cases_base: task.cases,
+        case_ratio: getPercentLabel(task.case_ratio),
+      };
+    })
+    .sort((x, y) => y.occurrences_base - x.occurrences_base);
 }
 
 // Adjust the content of filterStartData / filterEndData / filterStartToEndData / filterEndToStartData
@@ -315,20 +512,20 @@ function setActData(array) {
     const data = {
       label: task.label,
       occ_value: Number(task.occurrence_ratio * 100),
-      occurrences: task.occurrences.toLocaleString('en-US'),
+      occurrences: task.occurrences.toLocaleString("en-US"),
       occurrences_base: task.occurrences,
       occurrence_ratio: getPercentLabel(task.occurrence_ratio),
     };
     list.push(data);
   });
-  list.sort((x, y) => y.occurrences_base - x.occurrences_base)
+  list.sort((x, y) => y.occurrences_base - x.occurrences_base);
   return list;
 }
 
 /**
  * @param {array} e select Attribute
  */
-function getSelectAttribute(e){
+function getSelectAttribute(e) {
   selectAttType.value = e.type;
   selectAttribute.value = e.data;
 }
@@ -336,21 +533,21 @@ function getSelectAttribute(e){
 /**
  * @param {array} select select Have activity(s) rows
  */
-function onRowAct(select){
+function onRowAct(select) {
   selectFilterTask.value = select;
 }
 
 /**
  * @param {object} e select Start rows
  */
-function onRowStart(e){
+function onRowStart(e) {
   selectFilterStart.value = e.data;
 }
 
 /**
  * @param {object} e select End rows
  */
-function onRowEnd(e){
+function onRowEnd(e) {
   selectFilterEnd.value = e.data;
 }
 
@@ -366,9 +563,9 @@ function onUpdateListSeq(newListSeq) {
 /**
  * @param {object} e object contains selected row's data
  */
-function startRow(e){
+function startRow(e) {
   selectFilterStartToEnd.value = e.data;
-  if(isStartSelected.value === null || isStartSelected.value === true){
+  if (isStartSelected.value === null || isStartSelected.value === true) {
     isStartSelected.value = true;
     isEndSelected.value = false;
     rowData.value = e.data;
@@ -380,7 +577,7 @@ function startRow(e){
  */
 function endRow(e) {
   selectFilterEndToStart.value = e.data;
-  if(isEndSelected.value === null || isEndSelected.value === true){
+  if (isEndSelected.value === null || isEndSelected.value === true) {
     isEndSelected.value = true;
     isStartSelected.value = false;
     rowData.value = e.data;
@@ -393,18 +590,19 @@ function endRow(e) {
  * @param {object} rowDataVal - The selected row's data.
  * @param {string} event sinks / sources
  */
-function setStartAndEndData(eventData, rowDataVal, event){
-  const filterData = event === 'sinks' ? props.filterEndToStart : props.filterStartToEnd;
+function setStartAndEndData(eventData, rowDataVal, event) {
+  const filterData =
+    event === "sinks" ? props.filterEndToStart : props.filterStartToEnd;
   const relatedItems = eventData
-    .find(task => task.label === rowDataVal.label)
-    ?.[event]?.filter(item => filterData.some(ele => ele.label === item))
-    ?.map(item => filterData.find(ele => ele.label === item));
+    .find((task) => task.label === rowDataVal.label)
+    ?.[event]?.filter((item) => filterData.some((ele) => ele.label === item))
+    ?.map((item) => filterData.find((ele) => ele.label === item));
 
   if (!relatedItems) return [];
-  return relatedItems.map(item => ({
+  return relatedItems.map((item) => ({
     label: item.label,
     occ_value: Number(item.occurrence_ratio * 100),
-    occurrences: Number(item.occurrences).toLocaleString('en-US'),
+    occurrences: Number(item.occurrences).toLocaleString("en-US"),
     occurrence_ratio: getPercentLabel(item.occurrence_ratio),
   }));
 }
@@ -419,47 +617,49 @@ function setStartAndEndData(eventData, rowDataVal, event){
  */
 function setRule(e) {
   let label, type;
-  const includeStr = e.is_exclude? "exclude" : "include";
+  const includeStr = e.is_exclude ? "exclude" : "include";
   const containmentMap = {
-    'occurred-in' : 'contained in',
-    'started-in' : 'started in',
-    'completed-in' : 'ended in',
-    'occurred-around' : 'active in'
+    "occurred-in": "contained in",
+    "started-in": "started in",
+    "completed-in": "ended in",
+    "occurred-around": "active in",
   };
 
-  switch(e.type) { //sonar-qube
+  switch (
+    e.type //sonar-qube
+  ) {
     case "contains-task":
     case "starts-with":
     case "ends-with":
     case "directly-follows":
     case "eventually-follows":
-        label = `${includeStr}, ${getTaskLabel(e)}`;
-        type = "Sequence";
-        break;
+      label = `${includeStr}, ${getTaskLabel(e)}`;
+      type = "Sequence";
+      break;
     case "start-end":
-        label = `${includeStr}, start with ${e.starts_with}, end with ${e.ends_with}`;
-        type = "Sequence";
-        break;
+      label = `${includeStr}, start with ${e.starts_with}, end with ${e.ends_with}`;
+      type = "Sequence";
+      break;
     case "trace-freq":
-        label = `${includeStr}, from #${e.lower} to #${e.upper}`;
-        type = "Trace";
-        break;
-    case 'string-attr':
-    case 'boolean-attr':
-    case 'int-attr':
-    case 'float-attr':
-    case 'date-attr':
-        label = `${includeStr}, ${getAttributeLabel(e)}`;
-        type = "Attributes";
-        break;
+      label = `${includeStr}, from #${e.lower} to #${e.upper}`;
+      type = "Trace";
+      break;
+    case "string-attr":
+    case "boolean-attr":
+    case "int-attr":
+    case "float-attr":
+    case "date-attr":
+      label = `${includeStr}, ${getAttributeLabel(e)}`;
+      type = "Attributes";
+      break;
     case "occurred-in":
     case "started-in":
     case "completed-in":
     case "occurred-around":
-        label = `${containmentMap[e.type]}, ${includeStr}, from ${getMoment(e.start).format("YYYY-MM-DD HH:mm")} to ${getMoment(e.end).format("YYYY-MM-DD HH:mm")} `;
-        type = "Timeframe"
-        break;
-  };
+      label = `${containmentMap[e.type]}, ${includeStr}, from ${getMoment(e.start).format("YYYY-MM-DD HH:mm")} to ${getMoment(e.end).format("YYYY-MM-DD HH:mm")} `;
+      type = "Timeframe";
+      break;
+  }
   return {
     type,
     label,
@@ -482,19 +682,22 @@ function reset(message) {
   isEndSelected.value = null;
   isActAllTask.value = true;
   // Attributes
-  selectAttType.value = '';
+  selectAttType.value = "";
   selectAttribute.value = null;
-  emitter.emit('map-filter-reset', true);
+  emitter.emit("map-filter-reset", true);
   // Timeframes
   selectTimeFrame.value = [];
   // Trace
   if (filterTraceViewRef.value) {
     filterTraceViewRef.value.showTraceId = null;
-    filterTraceViewRef.value.selectArea = [0, filterTraceViewRef.value.traceTotal];
-  };
+    filterTraceViewRef.value.selectArea = [
+      0,
+      filterTraceViewRef.value.traceTotal,
+    ];
+  }
   // Success message
-  if(message) {
-    $toast.success('Filter cleared.')
+  if (message) {
+    $toast.success("Filter cleared.");
   }
 }
 
@@ -505,12 +708,12 @@ async function submit() {
   isLoading.value = true;
 
   const sele = selectValue;
-  const isExclude = sele[5] === 'Exclude';
+  const isExclude = sele[5] === "Exclude";
   const containmentMap = {
-    'Contained in': 'occurred-in',
-    'Started in': 'started-in',
-    'Ended in': 'completed-in',
-    'Active in': 'occurred-around'
+    "Contained in": "occurred-in",
+    "Started in": "started-in",
+    "Ended in": "completed-in",
+    "Active in": "occurred-around",
   };
 
   const data = getFilterData(sele, isExclude, containmentMap);
@@ -527,12 +730,12 @@ async function submit() {
     reset(false);
     await delay(1000);
     isLoading.value = false;
-    $toast.success('Filter applied. Go to Funnel to verify.');
+    $toast.success("Filter applied. Go to Funnel to verify.");
   } else {
     reset(false);
     await delay(1000);
     isLoading.value = false;
-    $toast.warning('No result.');
+    $toast.warning("No result.");
   }
 }
 
@@ -541,7 +744,7 @@ async function submit() {
  */
 /** Triggers the submit-all event to create the map. */
 function sumbitAll() {
-  emit('submit-all');
+  emit("submit-all");
 }
 
 /**
@@ -553,11 +756,11 @@ function handleSequenceSelection(sele) {
   const secondSelection = sele[1];
 
   switch (secondSelection) {
-    case 'Have activity(s)':
+    case "Have activity(s)":
       return !(selectFilterTask.value && selectFilterTask.value.length !== 0);
-    case 'Start & End':
+    case "Start & End":
       return handleStartEndSelection(sele[2]);
-    case 'Sequence':
+    case "Sequence":
       return listSeq.value.length < 2;
     default:
       return true;
@@ -571,11 +774,11 @@ function handleSequenceSelection(sele) {
  */
 function handleStartEndSelection(option) {
   switch (option) {
-    case 'Start':
+    case "Start":
       return !selectFilterStart.value;
-    case 'End':
+    case "End":
       return !selectFilterEnd.value;
-    case 'Start & End':
+    case "Start & End":
       return !(selectFilterStartToEnd.value && selectFilterEndToStart.value);
     default:
       return true;
@@ -589,14 +792,18 @@ function handleStartEndSelection(option) {
  */
 function handleAttributesSelection(type) {
   switch (type) {
-    case 'string':
+    case "string":
       return !(selectAttribute.value && selectAttribute.value.length > 0);
-    case 'boolean':
+    case "boolean":
       return !(selectAttribute.value?.key && selectAttribute.value?.label);
-    case 'int':
-    case 'float':
-    case 'date':
-      return !(selectAttribute.value?.key && selectAttribute.value?.min !== null && selectAttribute.value?.max !== null);
+    case "int":
+    case "float":
+    case "date":
+      return !(
+        selectAttribute.value?.key &&
+        selectAttribute.value?.min !== null &&
+        selectAttribute.value?.max !== null
+      );
     default:
       return true;
   }
@@ -623,15 +830,15 @@ function handleTimeframesSelection() {
  */
 function getTaskLabel(e) {
   switch (e.type) {
-      case "contains-task":
-          return `${e.task}`;
-      case "starts-with":
-          return `start with ${e.task}`;
-      case "ends-with":
-          return `end with ${e.task}`;
-      case "directly-follows":
-      case "eventually-follows":
-          return `${e.type.replace('-', ' ')}, ${e.task_seq.join(' -> ')}`;
+    case "contains-task":
+      return `${e.task}`;
+    case "starts-with":
+      return `start with ${e.task}`;
+    case "ends-with":
+      return `end with ${e.task}`;
+    case "directly-follows":
+    case "eventually-follows":
+      return `${e.type.replace("-", " ")}, ${e.task_seq.join(" -> ")}`;
   }
 }
 
@@ -642,15 +849,15 @@ function getTaskLabel(e) {
  */
 function getAttributeLabel(e) {
   switch (e.type) {
-      case 'string-attr':
-          return `${e.key}, ${e.value}`;
-      case 'boolean-attr':
-          return `${e.key}, ${selectAttribute.value?.label}`;
-      case 'int-attr':
-      case 'float-attr':
-          return `${e.key}, from ${e.min} to ${e.max}`;
-      case 'date-attr':
-          return `${e.key}, from ${getMoment(e.min).format('YYYY-MM-DD HH:mm')} to ${getMoment(e.max).format('YYYY-MM-DD HH:mm')}`;
+    case "string-attr":
+      return `${e.key}, ${e.value}`;
+    case "boolean-attr":
+      return `${e.key}, ${selectAttribute.value?.label}`;
+    case "int-attr":
+    case "float-attr":
+      return `${e.key}, from ${e.min} to ${e.max}`;
+    case "date-attr":
+      return `${e.key}, from ${getMoment(e.min).format("YYYY-MM-DD HH:mm")} to ${getMoment(e.max).format("YYYY-MM-DD HH:mm")}`;
   }
 }
 
@@ -663,18 +870,18 @@ function getAttributeLabel(e) {
  */
 function getFilterData(sele, isExclude, containmentMap) {
   switch (sele[0]) {
-    case 'Sequence':
+    case "Sequence":
       return getSequenceData(sele, isExclude);
-    case 'Attributes':
+    case "Attributes":
       return getAttributesData(isExclude);
-    case 'Trace':
+    case "Trace":
       return getTraceData(isExclude);
-    case 'Timeframes':
+    case "Timeframes":
       return {
         type: containmentMap[sele[6]],
         start: selectTimeFrame.value[0],
         end: selectTimeFrame.value[1],
-        is_exclude: isExclude
+        is_exclude: isExclude,
       };
     default:
       return null;
@@ -689,19 +896,22 @@ function getFilterData(sele, isExclude, containmentMap) {
  */
 function getSequenceData(sele, isExclude) {
   switch (sele[1]) {
-    case 'Have activity(s)':
-      return selectFilterTask.value.map(task => ({
-        type: 'contains-task',
+    case "Have activity(s)":
+      return selectFilterTask.value.map((task) => ({
+        type: "contains-task",
         task: task.label,
-        is_exclude: isExclude
+        is_exclude: isExclude,
       }));
-    case 'Start & End':
+    case "Start & End":
       return getStartEndData(sele, isExclude);
-    case 'Sequence':
+    case "Sequence":
       return {
-        type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows',
-        task_seq: listSeq.value.map(task => task.label),
-        is_exclude: isExclude
+        type:
+          sele[3] === "Directly follows"
+            ? "directly-follows"
+            : "eventually-follows",
+        task_seq: listSeq.value.map((task) => task.label),
+        is_exclude: isExclude,
       };
     default:
       return null;
@@ -716,24 +926,24 @@ function getSequenceData(sele, isExclude) {
  */
 function getStartEndData(sele, isExclude) {
   switch (sele[2]) {
-    case 'Start':
+    case "Start":
       return {
-        type: 'starts-with',
+        type: "starts-with",
         task: selectFilterStart.value.label,
-        is_exclude: isExclude
+        is_exclude: isExclude,
       };
-    case 'End':
+    case "End":
       return {
-        type: 'ends-with',
+        type: "ends-with",
         task: selectFilterEnd.value.label,
-        is_exclude: isExclude
+        is_exclude: isExclude,
       };
-    case 'Start & End':
+    case "Start & End":
       return {
-        type: 'start-end',
+        type: "start-end",
         starts_with: selectFilterStartToEnd.value.label,
         ends_with: selectFilterEndToStart.value.label,
-        is_exclude: isExclude
+        is_exclude: isExclude,
       };
     default:
       return null;
@@ -747,32 +957,32 @@ function getStartEndData(sele, isExclude) {
  */
 function getAttributesData(isExclude) {
   const attrTypeMap = {
-    'string': 'string-attr',
-    'boolean': 'boolean-attr',
-    'int': 'int-attr',
-    'float': 'float-attr',
-    'date': 'date-attr'
+    string: "string-attr",
+    boolean: "boolean-attr",
+    int: "int-attr",
+    float: "float-attr",
+    date: "date-attr",
   };
 
   switch (selectAttType.value) {
-    case 'string':
-      return selectAttribute.value.map(task => ({
-        type: attrTypeMap['string'],
+    case "string":
+      return selectAttribute.value.map((task) => ({
+        type: attrTypeMap["string"],
         key: task.key,
         value: task.value,
-        is_exclude: isExclude
+        is_exclude: isExclude,
       }));
-    case 'boolean':
-    case 'int':
-    case 'float':
-    case 'date':
+    case "boolean":
+    case "int":
+    case "float":
+    case "date":
       return {
         type: attrTypeMap[selectAttType.value],
         key: selectAttribute.value.key,
         value: selectAttribute.value.value,
         min: selectAttribute.value.min,
         max: selectAttribute.value.max,
-        is_exclude: isExclude
+        is_exclude: isExclude,
       };
     default:
       return null;
@@ -788,10 +998,10 @@ function getTraceData(isExclude) {
   const lowerIndex = filterTraceViewRef.value.selectArea[0];
   const upperIndex = filterTraceViewRef.value.selectArea[1] - 1;
   return {
-    type: 'trace-freq',
+    type: "trace-freq",
     lower: allMapDataStore.traces[lowerIndex].id,
     upper: allMapDataStore.traces[upperIndex].id,
-    is_exclude: isExclude
+    is_exclude: isExclude,
   };
 }
 
@@ -803,11 +1013,11 @@ function updateRules(postData) {
   if (!temporaryData.value?.length) {
     temporaryData.value.push(...postData);
     isRuleData.value = Array.from(temporaryData.value);
-    ruleData.value = isRuleData.value.map(e => setRule(e));
+    ruleData.value = isRuleData.value.map((e) => setRule(e));
   } else {
     temporaryData.value.push(...postData);
     isRuleData.value.push(...postData);
-    ruleData.value.push(...postData.map(e => setRule(e)));
+    ruleData.value.push(...postData.map((e) => setRule(e)));
   }
 }
 
@@ -817,7 +1027,7 @@ function updateRules(postData) {
  * @returns {Promise} Resolves after the delay.
  */
 function delay(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 </script>
 
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 5a6a9f9..ae791b8 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -1,5 +1,13 @@
 <template>
-  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false" class="!w-11/12" @show="show()">
+  <Sidebar
+    :visible="sidebarTraces"
+    :closeIcon="'pi pi-chevron-left'"
+    :modal="false"
+    position="left"
+    :dismissable="false"
+    class="!w-11/12"
+    @show="show()"
+  >
     <template #header>
       <p class="h1">Traces</p>
     </template>
@@ -7,23 +15,37 @@
       <!-- Trace List -->
       <section class="w-80 h-full pr-4 border-r border-neutral-300">
         <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
-        <p class="text-primary h2 px-2 mb-2">
-          Click trace number to see more.
-        </p>
-        <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
+        <p class="text-primary h2 px-2 mb-2">Click trace number to see more.</p>
+        <div
+          class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]"
+        >
           <table class="border-separate border-spacing-x-2 text-sm">
-            <caption class="hidden">Trace List</caption>
+            <caption class="hidden">
+              Trace List
+            </caption>
             <thead class="sticky top-0 z-10 bg-neutral-10">
               <tr>
                 <th class="h2 px-2 border-b border-neutral-500">Trace</th>
-                <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
+                <th
+                  class="h2 px-2 border-b border-neutral-500 text-start"
+                  colspan="3"
+                >
+                  Occurrences
+                </th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id, trace.base_count)">
+              <tr
+                v-for="(trace, key) in traceList"
+                :key="key"
+                class="cursor-pointer hover:text-primary"
+                @click="switchCaseData(trace.id, trace.base_count)"
+              >
                 <td class="p-2">#{{ trace.id }}</td>
                 <td class="p-2 w-24">
-                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+                  <div
+                    class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"
+                  >
                     <div class="h-full bg-primary" :style="trace.value"></div>
                   </div>
                 </td>
@@ -39,16 +61,34 @@
         <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
         <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
           <div class="h-full w-full">
-            <div id="cyTrace" ref="cyTraceRef" class="h-full min-w-full relative"></div>
+            <div
+              id="cyTrace"
+              ref="cyTraceRef"
+              class="h-full min-w-full relative"
+            ></div>
           </div>
         </div>
-        <div class="overflow-y-auto overflow-x-auto scrollbar w-full h-[calc(100%_-_200px)] infiniteTable " @scroll="handleScroll">
-          <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
+        <div
+          class="overflow-y-auto overflow-x-auto scrollbar w-full h-[calc(100%_-_200px)] infiniteTable"
+          @scroll="handleScroll"
+        >
+          <DataTable
+            :value="caseData"
+            showGridlines
+            tableClass="text-sm"
+            breakpoint="0"
+          >
             <div v-for="(col, index) in columnData" :key="index">
               <Column :field="col.field" :header="col.header">
                 <template #body="{ data }">
-                  <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
-                     {{ data[col.field] }}
+                  <div
+                    :class="
+                      data[col.field]?.length > 18
+                        ? 'whitespace-normal'
+                        : 'whitespace-nowrap'
+                    "
+                  >
+                    {{ data[col.field] }}
                   </div>
                 </template>
               </Column>
@@ -70,23 +110,30 @@
  *   clickable trace lists for highlighting on the map.
  */
 
-import { ref, computed, watch } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
+import { ref, computed, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useLoadingStore } from "@/stores/loading";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
 
-const props = defineProps(['sidebarTraces', 'cases']);
-const emit = defineEmits(['switch-Trace-Id']);
+const props = defineProps(["sidebarTraces", "cases"]);
+const emit = defineEmits(["switch-Trace-Id"]);
 
 const loadingStore = useLoadingStore();
 const allMapDataStore = useAllMapDataStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases } = storeToRefs(allMapDataStore);
+const {
+  infinit404,
+  infiniteStart,
+  traceId,
+  traces,
+  traceTaskSeq,
+  infiniteFirstCases,
+} = storeToRefs(allMapDataStore);
 
 const processMap = ref({
-  nodes:[],
-  edges:[],
+  nodes: [],
+  edges: [],
 });
 const showTraceId = ref(null);
 const infinitMaxItems = ref(false);
@@ -99,8 +146,10 @@ const traceTotal = computed(() => {
 });
 
 const traceList = computed(() => {
-  const sum = traces.value.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
-  const result = traces.value.map(trace => {
+  const sum = traces.value
+    .map((trace) => trace.count)
+    .reduce((acc, cur) => acc + cur, 0);
+  const result = traces.value.map((trace) => {
     return {
       id: trace.id,
       value: progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
@@ -108,54 +157,63 @@ const traceList = computed(() => {
       base_count: trace.count,
       ratio: getPercentLabel(trace.count / sum),
     };
-  })
+  });
   return result;
 });
 
 const caseData = computed(() => {
   const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
-  data.forEach(item => {
+  data.forEach((item) => {
     item.attributes.forEach((attribute, index) => {
       item[`att_${index}`] = attribute.value; // Create a new key-value pair
     });
     delete item.attributes; // Remove the original attributes property
-  })
+  });
   return data;
 });
 
 const columnData = computed(() => {
   const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
   let result = [
-      { field: 'id', header: 'Case Id' },
-      { field: 'started_at', header: 'Start time' },
-      { field: 'completed_at', header: 'End time' },
-    ];
-  if(data.length !== 0){
+    { field: "id", header: "Case Id" },
+    { field: "started_at", header: "Start time" },
+    { field: "completed_at", header: "End time" },
+  ];
+  if (data.length !== 0) {
     result = [
-      { field: 'id', header: 'Case Id' },
-      { field: 'started_at', header: 'Start time' },
-      { field: 'completed_at', header: 'End time' },
-      ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
+      { field: "id", header: "Case Id" },
+      { field: "started_at", header: "Start time" },
+      { field: "completed_at", header: "End time" },
+      ...(data[0]?.attributes ?? []).map((att, index) => ({
+        field: `att_${index}`,
+        header: att.key,
+      })),
     ];
   }
-  return result
+  return result;
 });
 
 watch(infinit404, (newValue) => {
-  if(newValue === 404) infinitMaxItems.value = true;
+  if (newValue === 404) infinitMaxItems.value = true;
 });
 
-watch(traceId, (newValue) => {
-  showTraceId.value = newValue;
-}, { immediate: true });
+watch(
+  traceId,
+  (newValue) => {
+    showTraceId.value = newValue;
+  },
+  { immediate: true },
+);
 
 watch(showTraceId, (newValue, oldValue) => {
-  const isScrollTop = document.querySelector('.infiniteTable');
-  if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
+  const isScrollTop = document.querySelector(".infiniteTable");
+  if (isScrollTop && typeof isScrollTop.scrollTop !== "undefined")
+    if (newValue !== oldValue) isScrollTop.scrollTop = 0;
 });
 
 watch(infiniteFirstCases, (newValue) => {
-  if(infiniteFirstCases.value) infiniteData.value = JSON.parse(JSON.stringify(newValue));
+  if (infiniteFirstCases.value)
+    infiniteData.value = JSON.parse(JSON.stringify(newValue));
 });
 
 /**
@@ -163,8 +221,8 @@ watch(infiniteFirstCases, (newValue) => {
  * @param   {number} val - The raw ratio value.
  * @returns {string} The formatted percentage string.
  */
-function getPercentLabel(val){
-  if((val * 100).toFixed(1) >= 100) return `100%`;
+function getPercentLabel(val) {
+  if ((val * 100).toFixed(1) >= 100) return `100%`;
   else return `${(val * 100).toFixed(1)}%`;
 }
 
@@ -173,8 +231,8 @@ function getPercentLabel(val){
  * @param   {number} value - The percentage value.
  * @returns {string} The CSS width style string.
  */
-function progressWidth(value){
-  return `width:${value}%;`
+function progressWidth(value) {
+  return `width:${value}%;`;
 }
 
 /**
@@ -184,19 +242,19 @@ function progressWidth(value){
  */
 async function switchCaseData(id, count) {
   // Do nothing if clicking the same id
-  if(id == showTraceId.value) return;
+  if (id == showTraceId.value) return;
   isLoading.value = true; // Always show loading screen
   infinit404.value = null;
   infinitMaxItems.value = false;
   showTraceId.value = id;
   infiniteStart.value = 0;
-  emit('switch-Trace-Id', {id: showTraceId.value, count: count}); // Pass to Map index, which will close loading
+  emit("switch-Trace-Id", { id: showTraceId.value, count: count }); // Pass to Map index, which will close loading
 }
 
 /**
  * Assembles the trace element nodes data for Cytoscape rendering.
  */
-function setNodesData(){
+function setNodesData() {
   // Clear nodes to prevent accumulation on each render
   processMap.value.nodes = [];
   // Populate nodes with data returned from the API call
@@ -205,20 +263,20 @@ function setNodesData(){
       data: {
         id: index,
         label: node,
-        backgroundColor: '#CCE5FF',
-        bordercolor: '#003366',
-        shape: 'round-rectangle',
+        backgroundColor: "#CCE5FF",
+        bordercolor: "#003366",
+        shape: "round-rectangle",
         height: 80,
-        width: 100
-      }
+        width: 100,
+      },
     });
-  })
+  });
 }
 
 /**
  * Assembles the trace edge line data for Cytoscape rendering.
  */
-function setEdgesData(){
+function setEdgesData() {
   processMap.value.edges = [];
   traceTaskSeq.value.forEach((edge, index) => {
     processMap.value.edges.push({
@@ -226,8 +284,8 @@ function setEdgesData(){
         source: `${index}`,
         target: `${index + 1}`,
         lineWidth: 1,
-        style: 'solid'
-      }
+        style: "solid",
+      },
     });
   });
   // The number of edges is one less than the number of nodes
@@ -237,7 +295,7 @@ function setEdgesData(){
 /**
  * create trace cytoscape's map
  */
-function createCy(){
+function createCy() {
   const graphId = cyTraceRef.value;
 
   setNodesData();
@@ -264,12 +322,18 @@ async function show() {
  * @param {Event} event - The scroll event.
  */
 function handleScroll(event) {
-  if(infinitMaxItems.value || props.cases.length < 20 || infiniteFinish.value === false) return;
+  if (
+    infinitMaxItems.value ||
+    props.cases.length < 20 ||
+    infiniteFinish.value === false
+  )
+    return;
 
   const container = event.target;
-  const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
+  const overScrollHeight =
+    container.scrollTop + container.clientHeight >= container.scrollHeight;
 
-  if(overScrollHeight) fetchData();
+  if (overScrollHeight) fetchData();
 }
 
 /**
@@ -284,8 +348,8 @@ async function fetchData() {
     infiniteData.value = [...infiniteData.value, ...props.cases];
     infiniteFinish.value = true;
     isLoading.value = false;
-  } catch(error) {
-    console.error('Failed to load data:', error);
+  } catch (error) {
+    console.error("Failed to load data:", error);
   }
 }
 </script>
@@ -294,18 +358,18 @@ async function fetchData() {
 @reference "../../../assets/tailwind.css";
 /* Progress bar color */
 :deep(.p-progressbar .p-progressbar-value) {
-  @apply bg-primary
+  @apply bg-primary;
 }
 /* Table set */
 :deep(.p-datatable-thead) {
-  @apply sticky top-0 left-0 z-10 bg-neutral-10
+  @apply sticky top-0 left-0 z-10 bg-neutral-10;
 }
 :deep(.p-datatable .p-datatable-thead > tr > th) {
   @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500;
   white-space: nowrap;
 }
 :deep(.p-datatable .p-datatable-tbody > tr > td) {
-  @apply border-neutral-500 !border-t-0 text-center
+  @apply border-neutral-500 !border-t-0 text-center;
 }
 :deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
   min-width: 72px;
@@ -315,6 +379,6 @@ async function fetchData() {
 }
 /* Center datatable header */
 :deep(.p-column-header-content) {
-  @apply justify-center
+  @apply justify-center;
 }
 </style>
diff --git a/src/components/Discover/Map/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue
index 5ebf163..f9f2252 100644
--- a/src/components/Discover/Map/SidebarView.vue
+++ b/src/components/Discover/Map/SidebarView.vue
@@ -1,5 +1,11 @@
 <template>
-  <Sidebar :visible="sidebarView" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false" >
+  <Sidebar
+    :visible="sidebarView"
+    :closeIcon="'pi pi-chevron-left'"
+    :modal="false"
+    position="left"
+    :dismissable="false"
+  >
     <template #header>
       <p class="h1">Visualization Setting</p>
     </template>
@@ -10,28 +16,54 @@
         <ul class="space-y-3 mb-4">
           <!-- Select bpmn / processmap button -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="onProcessMapClick()">
+            <span
+              class="btn-toggle-item"
+              :class="mapType === 'processMap' ? 'btn-toggle-show  ' : ''"
+              @click="onProcessMapClick()"
+            >
               Process Map
             </span>
-            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="onBPMNClick()">
+            <span
+              class="btn-toggle-item"
+              :class="mapType === 'bpmn' ? 'btn-toggle-show' : ''"
+              @click="onBPMNClick()"
+            >
               BPMN Model
             </span>
           </li>
           <!-- Select drawing style: bezier / unbundled-bezier button -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
+            <span
+              class="btn-toggle-item"
+              :class="
+                curveStyle === 'unbundled-bezier' ? 'btn-toggle-show  ' : ''
+              "
+              @click="switchCurveStyles('unbundled-bezier')"
+            >
               Curved
             </span>
-            <span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
+            <span
+              class="btn-toggle-item"
+              :class="curveStyle === 'taxi' ? 'btn-toggle-show' : ''"
+              @click="switchCurveStyles('taxi')"
+            >
               Elbow
             </span>
           </li>
           <!-- Vertical TB | Horizontal LR -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
+            <span
+              class="btn-toggle-item"
+              :class="rank === 'LR' ? 'btn-toggle-show  ' : ''"
+              @click="switchRank('LR')"
+            >
               Horizontal
             </span>
-            <span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
+            <span
+              class="btn-toggle-item"
+              :class="rank === 'TB' ? 'btn-toggle-show' : ''"
+              @click="switchRank('TB')"
+            >
               Vertical
             </span>
           </li>
@@ -41,25 +73,67 @@
       <div>
         <p class="h2">Data Layer</p>
         <ul class="space-y-2">
-          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
+          <li
+            class="flex justify-between mb-3"
+            @change="switchDataLayerType($event, 'freq')"
+          >
             <div class="flex items-center w-1/2">
-              <RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2" @click.prevent="switchDataLayerType($event, 'freq')"/>
+              <RadioButton
+                v-model="dataLayerType"
+                inputId="freq"
+                name="dataLayer"
+                value="freq"
+                class="mr-2"
+                @click.prevent="switchDataLayerType($event, 'freq')"
+              />
               <label for="freq">Frequency</label>
             </div>
             <div class="w-1/2">
-              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
-                <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
+              <select
+                class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary"
+                :disabled="dataLayerType === 'duration'"
+              >
+                <option
+                  v-for="(freq, index) in selectFrequency"
+                  :key="index"
+                  :value="freq.value"
+                  :disabled="freq.disabled"
+                  :selected="freq.value === selectedFreq"
+                >
+                  {{ freq.label }}
+                </option>
               </select>
             </div>
           </li>
-          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
+          <li
+            class="flex justify-between mb-3"
+            @change="switchDataLayerType($event, 'duration')"
+          >
             <div class="flex items-center w-1/2">
-              <RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2" @click.prevent="switchDataLayerType($event, 'duration')"/>
+              <RadioButton
+                v-model="dataLayerType"
+                inputId="duration"
+                name="dataLayer"
+                value="duration"
+                class="mr-2"
+                @click.prevent="switchDataLayerType($event, 'duration')"
+              />
               <label for="duration">Duration</label>
             </div>
             <div class="w-1/2">
-              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
-                <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
+              <select
+                class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary"
+                :disabled="dataLayerType === 'freq'"
+              >
+                <option
+                  v-for="(duration, index) in selectDuration"
+                  :key="index"
+                  :value="duration.value"
+                  :disabled="duration.disabled"
+                  :selected="duration.value === selectedDuration"
+                >
+                  {{ duration.label }}
+                </option>
               </select>
             </div>
           </li>
@@ -80,9 +154,9 @@
  *   style, direction, and data layer selection.
  */
 
-import { ref, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useMapPathStore } from '@/stores/mapPathStore';
+import { ref, onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useMapPathStore } from "@/stores/mapPathStore";
 
 defineProps({
   sidebarView: {
@@ -92,39 +166,39 @@ defineProps({
 });
 
 const emit = defineEmits([
-  'switch-map-type',
-  'switch-curve-styles',
-  'switch-rank',
-  'switch-data-layer-type',
+  "switch-map-type",
+  "switch-curve-styles",
+  "switch-rank",
+  "switch-data-layer-type",
 ]);
 
 const mapPathStore = useMapPathStore();
 const { isBPMNOn } = storeToRefs(mapPathStore);
 
 const selectFrequency = ref([
-  { value:"total", label:"Total", disabled:false, },
-  { value:"rel_freq", label:"Relative", disabled:false, },
-  { value:"average", label:"Average", disabled:false, },
-  { value:"median", label:"Median", disabled:false, },
-  { value:"max", label:"Max", disabled:false, },
-  { value:"min", label:"Min", disabled:false, },
-  { value:"cases", label:"Number of cases", disabled:false, },
+  { value: "total", label: "Total", disabled: false },
+  { value: "rel_freq", label: "Relative", disabled: false },
+  { value: "average", label: "Average", disabled: false },
+  { value: "median", label: "Median", disabled: false },
+  { value: "max", label: "Max", disabled: false },
+  { value: "min", label: "Min", disabled: false },
+  { value: "cases", label: "Number of cases", disabled: false },
 ]);
 const selectDuration = ref([
-  { value:"total", label:"Total", disabled:false, },
-  { value:"rel_duration", label:"Relative", disabled:false, },
-  { value:"average", label:"Average", disabled:false, },
-  { value:"median", label:"Median", disabled:false, },
-  { value:"max", label:"Max", disabled:false, },
-  { value:"min", label:"Min", disabled:false, },
+  { value: "total", label: "Total", disabled: false },
+  { value: "rel_duration", label: "Relative", disabled: false },
+  { value: "average", label: "Average", disabled: false },
+  { value: "median", label: "Median", disabled: false },
+  { value: "max", label: "Max", disabled: false },
+  { value: "min", label: "Min", disabled: false },
 ]);
-const curveStyle = ref('unbundled-bezier'); // unbundled-bezier | taxi
-const mapType = ref('processMap'); // processMap | bpmn
+const curveStyle = ref("unbundled-bezier"); // unbundled-bezier | taxi
+const mapType = ref("processMap"); // processMap | bpmn
 const dataLayerType = ref(null); // freq | duration
 const dataLayerOption = ref(null);
-const selectedFreq = ref('');
-const selectedDuration = ref('');
-const rank = ref('LR'); // Vertical TB | Horizontal LR
+const selectedFreq = ref("");
+const selectedDuration = ref("");
+const rank = ref("LR"); // Vertical TB | Horizontal LR
 
 /**
  * Switches the map type and emits the change event.
@@ -132,7 +206,7 @@ const rank = ref('LR'); // Vertical TB | Horizontal LR
  */
 function switchMapType(type) {
   mapType.value = type;
-  emit('switch-map-type', mapType.value);
+  emit("switch-map-type", mapType.value);
 }
 
 /**
@@ -141,7 +215,7 @@ function switchMapType(type) {
  */
 function switchCurveStyles(style) {
   curveStyle.value = style;
-  emit('switch-curve-styles', curveStyle.value);
+  emit("switch-curve-styles", curveStyle.value);
 }
 
 /**
@@ -150,7 +224,7 @@ function switchCurveStyles(style) {
  */
 function switchRank(rankValue) {
   rank.value = rankValue;
-  emit('switch-rank', rank.value);
+  emit("switch-rank", rank.value);
 }
 
 /**
@@ -159,40 +233,41 @@ function switchRank(rankValue) {
  * @param {string} type - 'freq' or 'duration'.
  */
 function switchDataLayerType(e, type) {
-  let value = '';
+  let value = "";
 
-  if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
+  if (e.target.value !== "freq" && e.target.value !== "duration")
+    value = e.target.value;
   switch (type) {
-    case 'freq':
-      value = value || selectedFreq.value || 'total';
+    case "freq":
+      value = value || selectedFreq.value || "total";
       dataLayerType.value = type;
       dataLayerOption.value = value;
       selectedFreq.value = value;
       break;
-    case 'duration':
-      value = value || selectedDuration.value || 'total';
+    case "duration":
+      value = value || selectedDuration.value || "total";
       dataLayerType.value = type;
       dataLayerOption.value = value;
       selectedDuration.value = value;
       break;
   }
-  emit('switch-data-layer-type', dataLayerType.value, dataLayerOption.value);
+  emit("switch-data-layer-type", dataLayerType.value, dataLayerOption.value);
 }
 
 /** Switches to Process Map view. */
 function onProcessMapClick() {
   mapPathStore.setIsBPMNOn(false);
-  switchMapType('processMap');
+  switchMapType("processMap");
 }
 
 /** Switches to BPMN Model view. */
 function onBPMNClick() {
   mapPathStore.setIsBPMNOn(true);
-  switchMapType('bpmn');
+  switchMapType("bpmn");
 }
 
 onMounted(() => {
-  dataLayerType.value = 'freq';
-  dataLayerOption.value = 'total';
+  dataLayerType.value = "freq";
+  dataLayerOption.value = "total";
 });
 </script>
diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue
index 04eb48b..b03c2bb 100644
--- a/src/components/Discover/StatusBar.vue
+++ b/src/components/Discover/StatusBar.vue
@@ -1,81 +1,149 @@
 <template>
-<section class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)] z-20">
-  <!-- status content -->
-  <ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700" v-show="isPanel"  v-if="statData">
-    <li class="bg-neutral-10 rounded p-3 w-full">
-      <div class="flex justify-between items-center mb-5">
-        <p class="font-bold text-sm leading-8">Cases</p>
-      </div>
-      <div class="flex justify-between items-center">
-        <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
-          <ProgressBar :value="statData.cases.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+  <section
+    class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)] z-20"
+  >
+    <!-- status content -->
+    <ul
+      class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700"
+      v-show="isPanel"
+      v-if="statData"
+    >
+      <li class="bg-neutral-10 rounded p-3 w-full">
+        <div class="flex justify-between items-center mb-5">
+          <p class="font-bold text-sm leading-8">Cases</p>
         </div>
-        <span class="block text-2xl font-medium">{{ statData.cases.ratio }}%</span>
-      </div>
-    </li>
-    <li class="bg-neutral-10 rounded p-3 w-full">
-      <div class="flex justify-between items-center mb-5">
-        <p class="font-bold text-sm leading-8">Traces</p>
-      </div>
-      <div class="flex justify-between items-center">
-        <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
-          <ProgressBar :value="statData.traces.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+        <div class="flex justify-between items-center">
+          <div class="mr-2 w-full">
+            <span class="block text-sm mb-2"
+              >{{ statData.cases.count }} / {{ statData.cases.total }}</span
+            >
+            <ProgressBar
+              :value="statData.cases.ratio"
+              :showValue="false"
+              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
+            ></ProgressBar>
+          </div>
+          <span class="block text-2xl font-medium"
+            >{{ statData.cases.ratio }}%</span
+          >
         </div>
-        <span class="block text-2xl font-medium">{{ statData.traces.ratio }}%</span>
-      </div>
-    </li>
-    <li class="bg-neutral-10 rounded p-3 w-full">
-      <div class="flex justify-between items-center mb-5">
-        <p class="font-bold text-sm leading-8">Activity Instances</p>
-      </div>
-      <div class="flex justify-between items-center">
-        <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
-          <ProgressBar :value="statData.task_instances.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+      </li>
+      <li class="bg-neutral-10 rounded p-3 w-full">
+        <div class="flex justify-between items-center mb-5">
+          <p class="font-bold text-sm leading-8">Traces</p>
         </div>
-        <span class="block text-2xl font-medium">{{ statData.task_instances.ratio }}%</span>
-      </div>
-    </li>
-    <li class="bg-neutral-10 rounded p-3 w-full">
-      <div class="flex justify-between items-center mb-5">
-        <p class="font-bold text-sm leading-8">Activities</p>
-      </div>
-      <div class="flex justify-between items-center">
-        <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
-          <ProgressBar :value="statData.tasks.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+        <div class="flex justify-between items-center">
+          <div class="mr-2 w-full">
+            <span class="block text-sm mb-2"
+              >{{ statData.traces.count }} / {{ statData.traces.total }}</span
+            >
+            <ProgressBar
+              :value="statData.traces.ratio"
+              :showValue="false"
+              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
+            ></ProgressBar>
+          </div>
+          <span class="block text-2xl font-medium"
+            >{{ statData.traces.ratio }}%</span
+          >
         </div>
-        <span class="block text-2xl font-medium">{{ statData.tasks.ratio }}%</span>
-      </div>
-    </li>
-    <li class="bg-neutral-10 rounded p-3 w-full">
-      <p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
-      <div class="px-2 space-y-2 min-w-[140px] h-[40px]">
-        <span class="inline-block">{{ statData.started_at }}&nbsp</span>
-        <span class="inline-block">~&nbsp{{ statData.completed_at }}</span>
-      </div>
-    </li>
-    <li class="bg-neutral-10 rounded p-3 w-full">
-      <p class="font-bold text-sm leading-8">Case Duration</p>
-      <div class="flex justify-between items-center space-x-2 min-w-[272px]">
-        <div class="space-y-2">
-          <p><Tag value="MAX" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.max }}</p>
-          <p><Tag value="MIN" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.min }}</p>
+      </li>
+      <li class="bg-neutral-10 rounded p-3 w-full">
+        <div class="flex justify-between items-center mb-5">
+          <p class="font-bold text-sm leading-8">Activity Instances</p>
         </div>
-        <div class="space-y-2">
-          <p><Tag value="MED" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.median }}</p>
-          <p><Tag value="AVG" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.average }}</p>
+        <div class="flex justify-between items-center">
+          <div class="mr-2 w-full">
+            <span class="block text-sm mb-2"
+              >{{ statData.task_instances.count }} /
+              {{ statData.task_instances.total }}</span
+            >
+            <ProgressBar
+              :value="statData.task_instances.ratio"
+              :showValue="false"
+              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
+            ></ProgressBar>
+          </div>
+          <span class="block text-2xl font-medium"
+            >{{ statData.task_instances.ratio }}%</span
+          >
         </div>
-      </div>
-    </li>
-  </ul>
-  <!-- control button -->
-  <div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
-    <span class="material-symbols-outlined block px-8 !text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
-  </div>
-</section>
+      </li>
+      <li class="bg-neutral-10 rounded p-3 w-full">
+        <div class="flex justify-between items-center mb-5">
+          <p class="font-bold text-sm leading-8">Activities</p>
+        </div>
+        <div class="flex justify-between items-center">
+          <div class="mr-2 w-full">
+            <span class="block text-sm mb-2"
+              >{{ statData.tasks.count }} / {{ statData.tasks.total }}</span
+            >
+            <ProgressBar
+              :value="statData.tasks.ratio"
+              :showValue="false"
+              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
+            ></ProgressBar>
+          </div>
+          <span class="block text-2xl font-medium"
+            >{{ statData.tasks.ratio }}%</span
+          >
+        </div>
+      </li>
+      <li class="bg-neutral-10 rounded p-3 w-full">
+        <p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
+        <div class="px-2 space-y-2 min-w-[140px] h-[40px]">
+          <span class="inline-block">{{ statData.started_at }}&nbsp</span>
+          <span class="inline-block">~&nbsp{{ statData.completed_at }}</span>
+        </div>
+      </li>
+      <li class="bg-neutral-10 rounded p-3 w-full">
+        <p class="font-bold text-sm leading-8">Case Duration</p>
+        <div class="flex justify-between items-center space-x-2 min-w-[272px]">
+          <div class="space-y-2">
+            <p>
+              <Tag
+                value="MAX"
+                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
+              ></Tag
+              >{{ statData.case_duration.max }}
+            </p>
+            <p>
+              <Tag
+                value="MIN"
+                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
+              ></Tag
+              >{{ statData.case_duration.min }}
+            </p>
+          </div>
+          <div class="space-y-2">
+            <p>
+              <Tag
+                value="MED"
+                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
+              ></Tag
+              >{{ statData.case_duration.median }}
+            </p>
+            <p>
+              <Tag
+                value="AVG"
+                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
+              ></Tag
+              >{{ statData.case_duration.average }}
+            </p>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <!-- control button -->
+    <div
+      class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring"
+      @click="isPanel = !isPanel"
+    >
+      <span class="material-symbols-outlined block px-8 !text-xs">{{
+        isPanel ? "keyboard_double_arrow_up" : "keyboard_double_arrow_down"
+      }}</span>
+    </div>
+  </section>
 </template>
 
 <script setup>
@@ -89,12 +157,12 @@
  *   timeframe, case duration) for the Discover page.
  */
 
-import { ref, onMounted, } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { getTimeLabel } from '@/module/timeLabel.js';
-import getMoment from 'moment';
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { getTimeLabel } from "@/module/timeLabel.js";
+import getMoment from "moment";
 
 const route = useRoute();
 
@@ -109,8 +177,8 @@ const statData = ref(null);
  * @param {number} val - The ratio value to convert.
  * @returns {number} The percentage value.
  */
-function getPercentLabel(val){
-  if((val * 100).toFixed(1) >= 100) return 100;
+function getPercentLabel(val) {
+  if ((val * 100).toFixed(1) >= 100) return 100;
   else return parseFloat((val * 100).toFixed(1));
 }
 
@@ -118,46 +186,48 @@ function getPercentLabel(val){
 function getStatData() {
   statData.value = {
     cases: {
-      count: stats.value.cases.count.toLocaleString('en-US'),
-      total: stats.value.cases.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(stats.value.cases.ratio)
+      count: stats.value.cases.count.toLocaleString("en-US"),
+      total: stats.value.cases.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(stats.value.cases.ratio),
     },
     traces: {
-      count: stats.value.traces.count.toLocaleString('en-US'),
-      total: stats.value.traces.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(stats.value.traces.ratio)
+      count: stats.value.traces.count.toLocaleString("en-US"),
+      total: stats.value.traces.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(stats.value.traces.ratio),
     },
     task_instances: {
-      count: stats.value.task_instances.count.toLocaleString('en-US'),
-      total: stats.value.task_instances.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(stats.value.task_instances.ratio)
+      count: stats.value.task_instances.count.toLocaleString("en-US"),
+      total: stats.value.task_instances.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(stats.value.task_instances.ratio),
     },
     tasks: {
-      count: stats.value.tasks.count.toLocaleString('en-US'),
-      total: stats.value.tasks.total.toLocaleString('en-US'),
-      ratio: getPercentLabel(stats.value.tasks.ratio)
+      count: stats.value.tasks.count.toLocaleString("en-US"),
+      total: stats.value.tasks.total.toLocaleString("en-US"),
+      ratio: getPercentLabel(stats.value.tasks.ratio),
     },
-    started_at: getMoment(stats.value.started_at).format('YYYY-MM-DD HH:mm'),
-    completed_at: getMoment(stats.value.completed_at).format('YYYY-MM-DD HH:mm'),
+    started_at: getMoment(stats.value.started_at).format("YYYY-MM-DD HH:mm"),
+    completed_at: getMoment(stats.value.completed_at).format(
+      "YYYY-MM-DD HH:mm",
+    ),
     case_duration: {
       min: getTimeLabel(stats.value.case_duration.min),
       max: getTimeLabel(stats.value.case_duration.max),
       average: getTimeLabel(stats.value.case_duration.average),
       median: getTimeLabel(stats.value.case_duration.median),
-    }
-  }
+    },
+  };
 }
 
 onMounted(async () => {
   const params = route.params;
   const file = route.meta.file;
-  const isCheckPage = route.name.includes('Check');
+  const isCheckPage = route.name.includes("Check");
 
   switch (params.type) {
-    case 'log':
+    case "log":
       logId.value = isCheckPage ? file.parent.id : params.fileId;
       break;
-    case 'filter':
+    case "filter":
       createFilterId.value = isCheckPage ? file.parent.id : params.fileId;
       break;
   }
@@ -169,6 +239,6 @@ onMounted(async () => {
 <style scoped>
 @reference "../../assets/tailwind.css";
 :deep(.p-progressbar .p-progressbar-value) {
-  @apply bg-neutral-900
+  @apply bg-neutral-900;
 }
 </style>
diff --git a/src/components/File/UploadModal.vue b/src/components/File/UploadModal.vue
index 799c2e0..83629d0 100644
--- a/src/components/File/UploadModal.vue
+++ b/src/components/File/UploadModal.vue
@@ -1,15 +1,30 @@
 <template>
-  <Dialog :visible="uploadModal" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass" @update:visible="emit('closeModal', $event)">
+  <Dialog
+    :visible="uploadModal"
+    modal
+    :style="{ width: '90vw', height: '90vh' }"
+    :contentClass="contentClass"
+    @update:visible="emit('closeModal', $event)"
+  >
     <template #header>
-      <div class="py-5">
-      </div>
+      <div class="py-5"></div>
     </template>
     <label for="uploadFiles">
-    <div class=" h-full flex flex-col justify-center items-center p-4 space-y-4 relative">
-      <input id="uploadFiles" class=" absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" type="file" accept="text/csv" @change="upload($event)">
+      <div
+        class="h-full flex flex-col justify-center items-center p-4 space-y-4 relative"
+      >
+        <input
+          id="uploadFiles"
+          class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
+          type="file"
+          accept="text/csv"
+          @change="upload($event)"
+        />
         <IconUploarding class="loader-arrow-upward"></IconUploarding>
         <p class="text-neutral-900">Click or drag a file here.</p>
-        <p class="text-neutral-500">(Only <span class="text-primary">.csv</span> is supported)</p>
+        <p class="text-neutral-500">
+          (Only <span class="text-primary">.csv</span> is supported)
+        </p>
       </div>
     </label>
   </Dialog>
@@ -26,59 +41,59 @@
  *   with drag-and-drop support for CSV files (max 90 MB).
  */
 
-import { onBeforeUnmount, } from 'vue';
-import { storeToRefs } from 'pinia';
-import IconUploarding from '../icons/IconUploarding.vue';
-import { uploadFailedFirst } from '@/module/alertModal.js';
-import { useFilesStore } from '@/stores/files';
+import { onBeforeUnmount } from "vue";
+import { storeToRefs } from "pinia";
+import IconUploarding from "../icons/IconUploarding.vue";
+import { uploadFailedFirst } from "@/module/alertModal.js";
+import { useFilesStore } from "@/stores/files";
 
-defineProps(['uploadModal']);
-const emit = defineEmits(['closeModal']);
+defineProps(["uploadModal"]);
+const emit = defineEmits(["closeModal"]);
 
 const filesStore = useFilesStore();
 const { uploadFileName } = storeToRefs(filesStore);
 
-const contentClass = 'h-full';
+const contentClass = "h-full";
 
 /**
  * Handles CSV file upload: validates size, sends to API, extracts filename.
  * @param {Event} event - The file input change event.
  */
 async function upload(event) {
-  const fileInput = document.getElementById('uploadFiles');
+  const fileInput = document.getElementById("uploadFiles");
   const target = event.target;
   const formData = new FormData();
   let uploadFile;
 
   // Check if a file exists
-  if(target && target.files) {
+  if (target && target.files) {
     uploadFile = target.files[0];
   }
   // File size must not exceed 90 MB (90*1024*1024 = 94,371,840 bytes)
-  if(uploadFile.size >= 94371840) {
-    fileInput.value = '';
-    return uploadFailedFirst('size');
+  if (uploadFile.size >= 94371840) {
+    fileInput.value = "";
+    return uploadFailedFirst("size");
   }
   // Append the file to formData; the field name must be "csv"
-  formData.append('csv', uploadFile);
+  formData.append("csv", uploadFile);
   // Call the first-stage upload API
-  if(uploadFile) {
+  if (uploadFile) {
     await filesStore.upload(formData);
   }
-  if (uploadFile.name.endsWith('.csv')) {
+  if (uploadFile.name.endsWith(".csv")) {
     uploadFileName.value = uploadFile.name.slice(0, -4);
   } else {
     // Handle error or invalid file format
-    uploadFileName.value = ''; // Or other appropriate error handling
+    uploadFileName.value = ""; // Or other appropriate error handling
   }
   // Clear the selected file
-  if(fileInput) {
-    fileInput.value = '';
+  if (fileInput) {
+    fileInput.value = "";
   }
 }
 
 onBeforeUnmount(() => {
-  emit('closeModal', false);
+  emit("closeModal", false);
 });
 </script>
 <style scoped>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 3dd22c1..fbd947c 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,19 +1,35 @@
 <template>
-  <div id='header.vue' class="mx-auto px-4 h-14 z-50">
+  <div id="header.vue" class="mx-auto px-4 h-14 z-50">
     <div class="flex justify-between items-center h-full">
       <figure>
-          <DspLogo />
+        <DspLogo />
       </figure>
-      <div class="flex justify-between items-center relative"
-        v-show="showMember">
-          <img id="acct_mgmt_button" v-if="!isHeadHovered" src="@/assets/icon-head-black.svg" @mouseenter='isHeadHovered = true'
-            width="32" height="32" @click="toggleIsAcctMenuOpen"
-            class="cursor-pointer z-50"  alt="user-head"
-          />
-          <img id="acct_mgmt_button" v-else  src="@/assets/icon-head-blue.svg" @mouseleave='isHeadHovered = false'
-            width="32" height="32" @click="toggleIsAcctMenuOpen"
-            class="cursor-pointer z-50" alt="user-head"
-          />
+      <div
+        class="flex justify-between items-center relative"
+        v-show="showMember"
+      >
+        <img
+          id="acct_mgmt_button"
+          v-if="!isHeadHovered"
+          src="@/assets/icon-head-black.svg"
+          @mouseenter="isHeadHovered = true"
+          width="32"
+          height="32"
+          @click="toggleIsAcctMenuOpen"
+          class="cursor-pointer z-50"
+          alt="user-head"
+        />
+        <img
+          id="acct_mgmt_button"
+          v-else
+          src="@/assets/icon-head-blue.svg"
+          @mouseleave="isHeadHovered = false"
+          width="32"
+          height="32"
+          @click="toggleIsAcctMenuOpen"
+          class="cursor-pointer z-50"
+          alt="user-head"
+        />
       </div>
     </div>
   </div>
@@ -31,16 +47,16 @@
  *   user account menu toggle button.
  */
 
-import { ref, onMounted, } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs, } from 'pinia';
-import emitter from '@/utils/emitter';
-import { useLoginStore } from '@/stores/login';
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
-import DspLogo from '@/components/icons/DspLogo.vue';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { useConformanceStore } from '@/stores/conformance';
-import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import emitter from "@/utils/emitter";
+import { useLoginStore } from "@/stores/login";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
+import DspLogo from "@/components/icons/DspLogo.vue";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
+import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
 
 const route = useRoute();
 
@@ -49,8 +65,13 @@ const { logOut } = store;
 const allMapDataStore = useAllMapDataStore();
 const conformanceStore = useConformanceStore();
 const acctMgmtStore = useAcctMgmtStore();
-const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
-const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
+const { tempFilterId, temporaryData, postRuleData, ruleData } =
+  storeToRefs(allMapDataStore);
+const {
+  conformanceLogTempCheckId,
+  conformanceFilterTempCheckId,
+  conformanceFileName,
+} = storeToRefs(conformanceStore);
 
 const isHeadHovered = ref(false);
 const showMember = ref(false);
@@ -64,21 +85,31 @@ const toggleIsAcctMenuOpen = () => {
  * and Conformance pages.
  */
 function logOutButton() {
-  if ((route.name === 'Map' || route.name === 'CheckMap') && tempFilterId.value) {
+  if (
+    (route.name === "Map" || route.name === "CheckMap") &&
+    tempFilterId.value
+  ) {
     // Notify Map to close the Sidebar.
-    emitter.emit('leaveFilter', false);
-    leaveFilter(false, allMapDataStore.addFilterId, false, logOut)
-  } else if((route.name === 'Conformance' || route.name === 'CheckConformance')
-    && (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)) {
-    leaveConformance(false, conformanceStore.addConformanceCreateCheckId, false, logOut)
+    emitter.emit("leaveFilter", false);
+    leaveFilter(false, allMapDataStore.addFilterId, false, logOut);
+  } else if (
+    (route.name === "Conformance" || route.name === "CheckConformance") &&
+    (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)
+  ) {
+    leaveConformance(
+      false,
+      conformanceStore.addConformanceCreateCheckId,
+      false,
+      logOut,
+    );
   } else {
     logOut();
   }
 }
 
 onMounted(() => {
-  if (route.name === 'Login' || route.name === 'NotFound404') {
-    showMember.value = false
+  if (route.name === "Login" || route.name === "NotFound404") {
+    showMember.value = false;
   } else {
     showMember.value = true;
   }
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index 4232a0e..aac611f 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -3,7 +3,9 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-  <div class="w-full h-full fixed inset-0 m-auto flex justify-center items-center bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[9999]">
+  <div
+    class="w-full h-full fixed inset-0 m-auto flex justify-center items-center bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[9999]"
+  >
     <span class="loader block"></span>
   </div>
 </template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 5cb4670..20d7916 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,32 +1,62 @@
 <template>
-  <nav id='nav_bar' class="bg-neutral-700">
-    <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
-      <div class="flex justify-between items-center flex-wrap relative" v-show="showNavbarBreadcrumb">
+  <nav id="nav_bar" class="bg-neutral-700">
+    <div
+      class="mx-auto px-4"
+      :class="[showNavbarBreadcrumb ? 'min-h-12' : 'h-12']"
+    >
+      <div
+        class="flex justify-between items-center flex-wrap relative"
+        v-show="showNavbarBreadcrumb"
+      >
         <div id="nav_bar_logged_in" class="flex flex-1 items-center">
           <!-- Back to Files page -->
           <router-link to="/files" class="mr-4" v-if="showIcon" id="backPage">
-            <span class="material-symbols-outlined text-neutral-10 !leading-loose">
+            <span
+              class="material-symbols-outlined text-neutral-10 !leading-loose"
+            >
               arrow_back
             </span>
           </router-link>
           <div>
-            <h2 v-if="navViewName !== 'UPLOAD'" class="mr-14 py-3 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
-            <h2 v-else class="mr-14 py-3 text-2xl font-black text-neutral-10">FILES</h2>
+            <h2
+              v-if="navViewName !== 'UPLOAD'"
+              class="mr-14 py-3 text-2xl font-black text-neutral-10"
+            >
+              {{ navViewName }}
+            </h2>
+            <h2 v-else class="mr-14 py-3 text-2xl font-black text-neutral-10">
+              FILES
+            </h2>
           </div>
-          <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-            <li @click="onNavItemBtnClick($event, item)"
+          <ul
+            class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer"
+          >
+            <li
+              @click="onNavItemBtnClick($event, item)"
               v-for="(item, index) in navViewData[navViewName]"
-              :key="index" class="nav-item"
-              :class="{'active': activePage === item}">
+              :key="index"
+              class="nav-item"
+              :class="{ active: activePage === item }"
+            >
               {{ item }}
             </li>
           </ul>
         </div>
         <!-- Files Page: Search and Upload -->
-        <div class="flex justify-end items-center" v-if="navViewName === 'FILES'">
-          <div id="import_btn" class="btn btn-sm btn-neutral cursor-pointer" @click="uploadModal = true">
+        <div
+          class="flex justify-end items-center"
+          v-if="navViewName === 'FILES'"
+        >
+          <div
+            id="import_btn"
+            class="btn btn-sm btn-neutral cursor-pointer"
+            @click="uploadModal = true"
+          >
             Import
-            <UploadModal :visible="uploadModal" @closeModal="uploadModal = $event"></UploadModal>
+            <UploadModal
+              :visible="uploadModal"
+              @closeModal="uploadModal = $event"
+            ></UploadModal>
           </div>
         </div>
         <!-- Upload, Performance, Compare have no button actions -->
@@ -34,12 +64,16 @@
         <!-- Other Page: Save and Download -->
         <!-- Save: if data exists, prompt rename; if no data, prompt save; if unchanged, do nothing -->
         <div v-else class="space-x-4">
-          <button class="btn btn-sm" :class="[ disabledSave ? 'btn-disable' : 'btn-neutral']"
-          :disabled="disabledSave" @click="saveModal">
+          <button
+            class="btn btn-sm"
+            :class="[disabledSave ? 'btn-disable' : 'btn-neutral']"
+            :disabled="disabledSave"
+            @click="saveModal"
+          >
             Save
           </button>
         </div>
-        <AcctMenu v-if="showNavbarBreadcrumb"/>
+        <AcctMenu v-if="showNavbarBreadcrumb" />
       </div>
     </div>
   </nav>
@@ -57,20 +91,24 @@
  *   Map/Conformance pages.
  */
 
-import { ref, computed, watch, onMounted, } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { storeToRefs, } from 'pinia';
-import emitter from '@/utils/emitter';
-import { useFilesStore } from '@/stores/files';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { useConformanceStore } from '@/stores/conformance';
-import { usePageAdminStore } from '@/stores/pageAdmin';
-import { useMapCompareStore } from '@/stores/mapCompareStore';
-import IconSearch from '@/components/icons/IconSearch.vue';
-import IconSetting from '@/components/icons/IconSetting.vue';
-import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertModal.js';
-import UploadModal from './File/UploadModal.vue';
-import AcctMenu from './AccountMenu/AcctMenu.vue';
+import { ref, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import emitter from "@/utils/emitter";
+import { useFilesStore } from "@/stores/files";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
+import { usePageAdminStore } from "@/stores/pageAdmin";
+import { useMapCompareStore } from "@/stores/mapCompareStore";
+import IconSearch from "@/components/icons/IconSearch.vue";
+import IconSetting from "@/components/icons/IconSetting.vue";
+import {
+  saveFilter,
+  savedSuccessfully,
+  saveConformance,
+} from "@/module/alertModal.js";
+import UploadModal from "./File/UploadModal.vue";
+import AcctMenu from "./AccountMenu/AcctMenu.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -81,54 +119,87 @@ const conformanceStore = useConformanceStore();
 const mapCompareStore = useMapCompareStore();
 const pageAdminStore = usePageAdminStore();
 
-const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdateFilter } = storeToRefs(allMapDataStore);
-const { conformanceRuleData, conformanceLogId, conformanceFilterId,
-  conformanceLogTempCheckId, conformanceFilterTempCheckId,
-  conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
-  isUpdateConformance, conformanceFileName
+const {
+  logId,
+  tempFilterId,
+  createFilterId,
+  filterName,
+  postRuleData,
+  isUpdateFilter,
+} = storeToRefs(allMapDataStore);
+const {
+  conformanceRuleData,
+  conformanceLogId,
+  conformanceFilterId,
+  conformanceLogTempCheckId,
+  conformanceFilterTempCheckId,
+  conformanceLogCreateCheckId,
+  conformanceFilterCreateCheckId,
+  isUpdateConformance,
+  conformanceFileName,
 } = storeToRefs(conformanceStore);
-const { activePage, pendingActivePage, activePageComputedByRoute, shouldKeepPreviousPage } = storeToRefs(pageAdminStore);
-const { setPendingActivePage, setPreviousPage, setActivePage, setActivePageComputedByRoute, setIsPagePendingBoolean } = pageAdminStore;
+const {
+  activePage,
+  pendingActivePage,
+  activePageComputedByRoute,
+  shouldKeepPreviousPage,
+} = storeToRefs(pageAdminStore);
+const {
+  setPendingActivePage,
+  setPreviousPage,
+  setActivePage,
+  setActivePageComputedByRoute,
+  setIsPagePendingBoolean,
+} = pageAdminStore;
 
 const showNavbarBreadcrumb = ref(false);
 const navViewData = {
   // e.g. FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN', 'SIMULATION'],
-  FILES: ['ALL', 'DISCOVER', 'COMPARE'],
+  FILES: ["ALL", "DISCOVER", "COMPARE"],
   // e.g. DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
-  DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
+  DISCOVER: ["MAP", "CONFORMANCE", "PERFORMANCE"],
   // e.g. COMPARE: ['PROCESS MAP', 'DASHBOARD']
-  COMPARE: ['MAP', 'PERFORMANCE'],
-  'ACCOUNT MANAGEMENT': [],
-  'MY ACCOUNT': [],
+  COMPARE: ["MAP", "PERFORMANCE"],
+  "ACCOUNT MANAGEMENT": [],
+  "MY ACCOUNT": [],
 };
-const navViewName = ref('FILES');
+const navViewName = ref("FILES");
 const uploadModal = ref(false);
 
 const disabledSave = computed(() => {
   switch (route.name) {
-    case 'Map':
-    case 'CheckMap':
+    case "Map":
+    case "CheckMap":
       // Cannot save without a filter ID or a temporary tempFilterId
       return !tempFilterId.value;
-    case 'Conformance':
-    case 'CheckConformance':
-      return !(conformanceFilterTempCheckId.value || conformanceLogTempCheckId.value);
+    case "Conformance":
+    case "CheckConformance":
+      return !(
+        conformanceFilterTempCheckId.value || conformanceLogTempCheckId.value
+      );
   }
 });
 
 const showIcon = computed(() => {
-  return !['FILES', 'UPLOAD'].includes(navViewName.value);
+  return !["FILES", "UPLOAD"].includes(navViewName.value);
 });
 
 const noShowSaveButton = computed(() => {
-  return navViewName.value === 'UPLOAD' || navViewName.value === 'COMPARE' ||
-    navViewName.value === 'ACCOUNT MANAGEMENT' ||
-    activePage.value === 'PERFORMANCE';
+  return (
+    navViewName.value === "UPLOAD" ||
+    navViewName.value === "COMPARE" ||
+    navViewName.value === "ACCOUNT MANAGEMENT" ||
+    activePage.value === "PERFORMANCE"
+  );
 });
 
-watch(() => route, () => {
-  getNavViewName();
-}, { deep: true });
+watch(
+  () => route,
+  () => {
+    getNavViewName();
+  },
+  { deep: true },
+);
 
 watch(filterName, (newVal) => {
   filterName.value = newVal;
@@ -147,53 +218,76 @@ function onNavItemBtnClick(event) {
   setPendingActivePage(navItemCandidate);
 
   switch (navViewName.value) {
-    case 'FILES':
+    case "FILES":
       store.filesTag = navItemCandidate;
       break;
-    case 'DISCOVER':
+    case "DISCOVER":
       type = route.params.type;
       fileId = route.params.fileId;
-      isCheckPage = route.name.includes('Check');
+      isCheckPage = route.name.includes("Check");
 
       switch (navItemCandidate) {
-        case 'MAP':
-          if(isCheckPage) {
-            router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
-          }
-          else {
-            router.push({name: 'Map', params: { type: type, fileId: fileId }});
+        case "MAP":
+          if (isCheckPage) {
+            router.push({
+              name: "CheckMap",
+              params: { type: type, fileId: fileId },
+            });
+          } else {
+            router.push({
+              name: "Map",
+              params: { type: type, fileId: fileId },
+            });
           }
           break;
-        case 'CONFORMANCE':
-          if(isCheckPage) { // Beware of Swal popup, it might disturb which is the current active page
-            router.push({name: 'CheckConformance', params: { type: type, fileId: fileId }});
+        case "CONFORMANCE":
+          if (isCheckPage) {
+            // Beware of Swal popup, it might disturb which is the current active page
+            router.push({
+              name: "CheckConformance",
+              params: { type: type, fileId: fileId },
+            });
+          } else {
+            // Beware of Swal popup, it might disturb which is the current active page
+            router.push({
+              name: "Conformance",
+              params: { type: type, fileId: fileId },
+            });
           }
-          else { // Beware of Swal popup, it might disturb which is the current active page
-            router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
-          }
-          break
-        case 'PERFORMANCE':
-          if(isCheckPage) {
-            router.push({name: 'CheckPerformance', params: { type: type, fileId: fileId }});
-          }
-          else {
-            router.push({name: 'Performance', params: { type: type, fileId: fileId }});
+          break;
+        case "PERFORMANCE":
+          if (isCheckPage) {
+            router.push({
+              name: "CheckPerformance",
+              params: { type: type, fileId: fileId },
+            });
+          } else {
+            router.push({
+              name: "Performance",
+              params: { type: type, fileId: fileId },
+            });
           }
           break;
       }
       break;
-    case 'COMPARE':
+    case "COMPARE":
       switch (navItemCandidate) {
-        case 'MAP':
-          router.push({name: 'MapCompare', params: mapCompareStore.routeParam});
+        case "MAP":
+          router.push({
+            name: "MapCompare",
+            params: mapCompareStore.routeParam,
+          });
           break;
-        case 'PERFORMANCE':
-          router.push({name: 'CompareDashboard', params: mapCompareStore.routeParam});
+        case "PERFORMANCE":
+          router.push({
+            name: "CompareDashboard",
+            params: mapCompareStore.routeParam,
+          });
           break;
         default:
           break;
       }
-  };
+  }
 }
 
 /**
@@ -201,42 +295,41 @@ function onNavItemBtnClick(event) {
  * @returns {string} The navigation item name to highlight.
  */
 function getNavViewName() {
-
   const name = route.name;
   let valueToSet;
 
-  if(route.name === 'NotFound404' || !route.matched[1]) {
+  if (route.name === "NotFound404" || !route.matched[1]) {
     return;
   }
 
   // route.matched[1] is the second matched route record for the current route
   navViewName.value = route.matched[1].name.toUpperCase();
-  store.filesTag = 'ALL';
+  store.filesTag = "ALL";
   switch (navViewName.value) {
-    case 'FILES':
+    case "FILES":
       valueToSet = activePage.value;
       break;
-    case 'DISCOVER':
+    case "DISCOVER":
       switch (name) {
-        case 'Map':
-        case 'CheckMap':
-          valueToSet = 'MAP';
+        case "Map":
+        case "CheckMap":
+          valueToSet = "MAP";
           break;
-        case 'Conformance':
-        case 'CheckConformance':
-          valueToSet = 'CONFORMANCE';
+        case "Conformance":
+        case "CheckConformance":
+          valueToSet = "CONFORMANCE";
           break;
-        case 'Performance':
-        case 'CheckPerformance':
-          valueToSet = 'PERFORMANCE';
+        case "Performance":
+        case "CheckPerformance":
+          valueToSet = "PERFORMANCE";
           break;
       }
       break;
-    case 'COMPARE':
-      switch(name) {
-        case 'dummy':
-        case 'CompareDashboard':
-          valueToSet = 'DASHBOARD';
+    case "COMPARE":
+      switch (name) {
+        case "dummy":
+        case "CompareDashboard":
+          valueToSet = "DASHBOARD";
           break;
         default:
           break;
@@ -248,11 +341,11 @@ function getNavViewName() {
   // so here we need to save to a pending state
   // The frontend cannot determine which modal button the user will press
   // (cancel or confirm/save), so we save it to a pending state.
-  if(!shouldKeepPreviousPage.value) { // If the user did not press cancel
+  if (!shouldKeepPreviousPage.value) {
+    // If the user did not press cancel
     setPendingActivePage(valueToSet);
   }
 
-
   return valueToSet;
 }
 
@@ -260,27 +353,27 @@ function getNavViewName() {
 async function saveModal() {
   // Help determine MAP/CONFORMANCE save with "submit" or "cancel".
   // Notify Map to close the Sidebar.
-  emitter.emit('saveModal', false);
+  emitter.emit("saveModal", false);
 
   switch (route.name) {
-      case 'Map':
-          await handleMapSave();
-          break;
-      case 'CheckMap':
-          await handleCheckMapSave();
-          break;
-      case 'Conformance':
-      case 'CheckConformance':
-          await handleConformanceSave();
-          break;
-      default:
-          break;
-    }
+    case "Map":
+      await handleMapSave();
+      break;
+    case "CheckMap":
+      await handleCheckMapSave();
+      break;
+    case "Conformance":
+    case "CheckConformance":
+      await handleConformanceSave();
+      break;
+    default:
+      break;
+  }
 }
 
 /** Sets nav item button background color when the active page is empty. */
 function handleNavItemBtn() {
-  if(activePageComputedByRoute.value === "") {
+  if (activePageComputedByRoute.value === "") {
     setActivePageComputedByRoute(route.matched[route.matched.length - 1].name);
   }
 }
@@ -290,13 +383,13 @@ async function handleMapSave() {
   if (createFilterId.value) {
     await allMapDataStore.updateFilter();
     if (isUpdateFilter.value) {
-        await savedSuccessfully(filterName.value);
-      }
+      await savedSuccessfully(filterName.value);
+    }
   } else if (logId.value) {
     const isSaved = await saveFilter(allMapDataStore.addFilterId);
     if (isSaved) {
-        setActivePage('MAP');
-        await router.push(`/discover/filter/${createFilterId.value}/map`);
+      setActivePage("MAP");
+      await router.push(`/discover/filter/${createFilterId.value}/map`);
     }
   }
 }
@@ -305,43 +398,52 @@ async function handleMapSave() {
 async function handleCheckMapSave() {
   const isSaved = await saveFilter(allMapDataStore.addFilterId);
   if (isSaved) {
-      setActivePage('MAP');
-      await router.push(`/discover/filter/${createFilterId.value}/map`);
+    setActivePage("MAP");
+    await router.push(`/discover/filter/${createFilterId.value}/map`);
   }
 }
 
 /** Saves or updates conformance check data. */
 async function handleConformanceSave() {
-  if (conformanceFilterCreateCheckId.value || conformanceLogCreateCheckId.value) {
-      await conformanceStore.updateConformance();
-      if (isUpdateConformance.value) {
-          await savedSuccessfully(conformanceFileName.value);
-      }
+  if (
+    conformanceFilterCreateCheckId.value ||
+    conformanceLogCreateCheckId.value
+  ) {
+    await conformanceStore.updateConformance();
+    if (isUpdateConformance.value) {
+      await savedSuccessfully(conformanceFileName.value);
+    }
   } else {
-      const isSaved = await saveConformance(conformanceStore.addConformanceCreateCheckId);
-      if (isSaved) {
-          if (conformanceLogId.value) {
-              setActivePage('CONFORMANCE');
-              await router.push(`/discover/conformance/log/${conformanceLogCreateCheckId.value}/conformance`);
-          } else if (conformanceFilterId.value) {
-              setActivePage('CONFORMANCE');
-              await router.push(`/discover/conformance/filter/${conformanceFilterCreateCheckId.value}/conformance`);
-          }
+    const isSaved = await saveConformance(
+      conformanceStore.addConformanceCreateCheckId,
+    );
+    if (isSaved) {
+      if (conformanceLogId.value) {
+        setActivePage("CONFORMANCE");
+        await router.push(
+          `/discover/conformance/log/${conformanceLogCreateCheckId.value}/conformance`,
+        );
+      } else if (conformanceFilterId.value) {
+        setActivePage("CONFORMANCE");
+        await router.push(
+          `/discover/conformance/filter/${conformanceFilterCreateCheckId.value}/conformance`,
+        );
       }
+    }
   }
 }
 
 onMounted(() => {
   handleNavItemBtn();
-  if(route.params.type === 'filter') {
+  if (route.params.type === "filter") {
     createFilterId.value = route.params.fileId;
   }
-  showNavbarBreadcrumb.value = route.matched[0].name !== ('AuthContainer');
+  showNavbarBreadcrumb.value = route.matched[0].name !== "AuthContainer";
   getNavViewName();
 });
 </script>
 <style scoped>
-#searchFiles::-webkit-search-cancel-button{
+#searchFiles::-webkit-search-cancel-button {
   appearance: none;
 }
 </style>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 8a7ff63..8410234 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -2,12 +2,19 @@
   <form role="search">
     <label for="searchFiles" class="mr-4 relative" htmlFor="searchFiles">
       Search
-      <input type="search" id="searchFiles" placeholder="Search Activity" class="px-5 py-2 w-52 rounded-full text-sm align-middle
-        duration-300 border bg-neutral-100 border-neutral-300 hover:border-neutral-500 focus:outline-none focus:ring
-        focus:border-neutral-500"/>
-      <span class="absolute top-2 bottom-0.5 right-0.5 flex justify-center items-center gap-2">
+      <input
+        type="search"
+        id="searchFiles"
+        placeholder="Search Activity"
+        class="px-5 py-2 w-52 rounded-full text-sm align-middle duration-300 border bg-neutral-100 border-neutral-300 hover:border-neutral-500 focus:outline-none focus:ring focus:border-neutral-500"
+      />
+      <span
+        class="absolute top-2 bottom-0.5 right-0.5 flex justify-center items-center gap-2"
+      >
         <IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
-        <span class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"></span>
+        <span
+          class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"
+        ></span>
         <button class="pr-2">
           <IconSearch class="w-6 h-6"></IconSearch>
         </button>
@@ -28,6 +35,6 @@
  *   search input, settings icon, and search icon button.
  */
 
-import IconSearch from '@/components/icons/IconSearch.vue';
-import IconSetting from '@/components/icons/IconSetting.vue';
+import IconSearch from "@/components/icons/IconSearch.vue";
+import IconSetting from "@/components/icons/IconSetting.vue";
 </script>
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index 74244b2..eb88954 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -1,42 +1,52 @@
 <template>
-<div class="relative">
-  <div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect" :id="size">
-    <div v-if="totalSeconds === 0" class="text-center">
-      <p>0</p>
+  <div class="relative">
+    <div
+      class="w-32 px-1 border border-neutral-500 cursor-pointer"
+      @click="openTimeSelect = !openTimeSelect"
+      :id="size"
+    >
+      <div v-if="totalSeconds === 0" class="text-center">
+        <p>0</p>
+      </div>
+      <!-- This section shows the fixed time display, not the popup -->
+      <div
+        id="cyp-timerange-show"
+        v-else
+        class="flex justify-center items-center gap-1"
+      >
+        <p v-show="days != 0">{{ days }}d</p>
+        <p v-show="hours != 0">{{ hours }}h</p>
+        <p v-show="minutes != 0">{{ minutes }}m</p>
+        <p v-show="seconds != 0">{{ seconds }}s</p>
+      </div>
     </div>
-    <!-- This section shows the fixed time display, not the popup -->
-    <div id="cyp-timerange-show" v-else class="flex justify-center items-center gap-1">
-      <p v-show="days != 0">{{ days }}d</p>
-      <p v-show="hours != 0">{{ hours }}h</p>
-      <p v-show="minutes != 0">{{ minutes }}m</p>
-      <p v-show="seconds != 0">{{ seconds }}s</p>
+    <!-- The following section is the popup that appears when the user clicks to open -->
+    <div
+      class="duration-container absolute left-0 top-full translate-y-2 dhms-input-popup-container"
+      v-show="openTimeSelect"
+      v-closable="{ id: size, handler: onClose }"
+    >
+      <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
+        <input
+          id="input_duration_dhms"
+          type="text"
+          class="duration duration-val input-dhms-field"
+          :data-index="index"
+          :data-tunit="unit"
+          :data-max="tUnits[unit].max"
+          :data-min="tUnits[unit].min"
+          :maxlength="tUnits[unit].dsp === 'd' ? 3 : 2"
+          @focus="onFocus"
+          @change="onChange"
+          @keyup="onKeyUp"
+          v-model="inputTimeFields[index]"
+        />
+        <label class="duration" for="input_duration_dhms">{{
+          tUnits[unit].dsp
+        }}</label>
+      </div>
     </div>
   </div>
-  <!-- The following section is the popup that appears when the user clicks to open -->
-  <div class="duration-container absolute left-0 top-full translate-y-2
-    dhms-input-popup-container"
-    v-show="openTimeSelect"
-    v-closable="{id: size, handler: onClose}">
-    <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
-      <input
-        id="input_duration_dhms"
-        type="text"
-        class="duration duration-val input-dhms-field"
-        :data-index="index"
-        :data-tunit="unit"
-        :data-max="tUnits[unit].max"
-        :data-min="tUnits[unit].min"
-        :maxlength="tUnits[unit].dsp === 'd' ? 3 : 2"
-
-        @focus="onFocus"
-        @change="onChange"
-        @keyup="onKeyUp"
-        v-model="inputTimeFields[index]"
-      />
-      <label class="duration" for="input_duration_dhms">{{ tUnits[unit].dsp }}</label>
-    </div>
-  </div>
-</div>
 </template>
 
 <script setup>
@@ -52,8 +62,8 @@
  *   fields and bounded min/max validation.
  */
 
-import { ref, computed, watch, onMounted } from 'vue';
-import emitter from '@/utils/emitter';
+import { ref, computed, watch, onMounted } from "vue";
+import emitter from "@/utils/emitter";
 
 const props = defineProps({
   max: {
@@ -97,12 +107,12 @@ const props = defineProps({
     validator(value) {
       return value >= 0;
     },
-  }
+  },
 });
 
-const emit = defineEmits(['total-seconds']);
+const emit = defineEmits(["total-seconds"]);
 
-const display = ref('dhms');
+const display = ref("dhms");
 const seconds = ref(0);
 const minutes = ref(0);
 const hours = ref(0);
@@ -119,19 +129,34 @@ const openTimeSelect = ref(false);
 const tUnits = computed({
   get() {
     return {
-      s: { dsp: 's', inc: 1, val: seconds.value, max: 59, rate: 1, min: 0 },
-      m: { dsp: 'm', inc: 1, val: minutes.value, max: 59, rate: 60, min: 0 },
-      h: { dsp: 'h', inc: 1, val: hours.value, max: 23, rate: 3600, min: 0 },
-      d: { dsp: 'd', inc: 1, val: days.value, max: maxDays.value, rate: 86400, min: minDays.value }
+      s: { dsp: "s", inc: 1, val: seconds.value, max: 59, rate: 1, min: 0 },
+      m: { dsp: "m", inc: 1, val: minutes.value, max: 59, rate: 60, min: 0 },
+      h: { dsp: "h", inc: 1, val: hours.value, max: 23, rate: 3600, min: 0 },
+      d: {
+        dsp: "d",
+        inc: 1,
+        val: days.value,
+        max: maxDays.value,
+        rate: 86400,
+        min: minDays.value,
+      },
     };
   },
   set(newValues) {
     for (const unit in newValues) {
       switch (unit) {
-        case 's': seconds.value = newValues[unit].val; break;
-        case 'm': minutes.value = newValues[unit].val; break;
-        case 'h': hours.value = newValues[unit].val; break;
-        case 'd': days.value = newValues[unit].val; break;
+        case "s":
+          seconds.value = newValues[unit].val;
+          break;
+        case "m":
+          minutes.value = newValues[unit].val;
+          break;
+        case "h":
+          hours.value = newValues[unit].val;
+          break;
+        case "d":
+          days.value = newValues[unit].val;
+          break;
       }
       const input = document.querySelector(`[data-tunit="${unit}"]`);
       if (input) {
@@ -143,8 +168,10 @@ const tUnits = computed({
 
 const inputTimeFields = computed(() => {
   const paddedTimeFields = [];
-  inputTypes.value.forEach(inputTypeUnit => {
-    paddedTimeFields.push(tUnits.value[inputTypeUnit].val.toString().padStart(2, '0'));
+  inputTypes.value.forEach((inputTypeUnit) => {
+    paddedTimeFields.push(
+      tUnits.value[inputTypeUnit].val.toString().padStart(2, "0"),
+    );
   });
   return paddedTimeFields;
 });
@@ -170,8 +197,8 @@ function onFocus(event) {
 function onChange(event) {
   const baseInputValue = event.target.value;
   let decoratedInputValue;
-  if(isNaN(event.target.value)){
-    event.target.value = '00';
+  if (isNaN(event.target.value)) {
+    event.target.value = "00";
   } else {
     event.target.value = event.target.value.toString();
   }
@@ -180,27 +207,27 @@ function onChange(event) {
   const inputValue = parseInt(event.target.value, 10);
   const max = parseInt(event.target.dataset.max, 10);
   const min = parseInt(event.target.dataset.min, 10);
-  if(inputValue > max) {
-    decoratedInputValue = max.toString().padStart(2, '0');
-  }else if(inputValue < min) {
-    decoratedInputValue= min.toString();
+  if (inputValue > max) {
+    decoratedInputValue = max.toString().padStart(2, "0");
+  } else if (inputValue < min) {
+    decoratedInputValue = min.toString();
   }
   const dsp = event.target.dataset.tunit;
   tUnits.value[dsp].val = decoratedInputValue;
   switch (dsp) {
-    case 'd':
+    case "d":
       days.value = baseInputValue;
       break;
-    case 'h':
+    case "h":
       hours.value = decoratedInputValue;
       break;
-    case 'm':
+    case "m":
       minutes.value = decoratedInputValue;
       break;
-    case 's':
+    case "s":
       seconds.value = decoratedInputValue;
       break;
-  };
+  }
 
   calculateTotalSeconds();
 }
@@ -210,10 +237,10 @@ function onChange(event) {
  * @param {KeyboardEvent} event - The keyup event.
  */
 function onKeyUp(event) {
-  event.target.value = event.target.value.replace(/\D/g, '');
+  event.target.value = event.target.value.replace(/\D/g, "");
   if (event.keyCode === 38 || event.keyCode === 40) {
     actionUpDown(event.target, event.keyCode === 38, true);
-  };
+  }
 }
 
 /**
@@ -247,7 +274,7 @@ function getNewValue(input) {
 function handleArrowUp(newVal, tUnit, input) {
   newVal += tUnits.value[tUnit].inc;
   if (newVal > tUnits.value[tUnit].max) {
-    if (tUnits.value[tUnit].dsp === 'd') {
+    if (tUnits.value[tUnit].dsp === "d") {
       totalSeconds.value = maxTotal.value;
     } else {
       newVal = newVal % (tUnits.value[tUnit].max + 1);
@@ -260,14 +287,16 @@ function handleArrowUp(newVal, tUnit, input) {
 function handleArrowDown(newVal, tUnit) {
   newVal -= tUnits.value[tUnit].inc;
   if (newVal < 0) {
-    newVal = (tUnits.value[tUnit].max + 1) - tUnits.value[tUnit].inc;
+    newVal = tUnits.value[tUnit].max + 1 - tUnits.value[tUnit].inc;
   }
   return newVal;
 }
 
 function incrementPreviousUnit(input) {
   if (input.dataset.index > 0) {
-    const prevUnit = document.querySelector(`input[data-index="${parseInt(input.dataset.index) - 1}"]`);
+    const prevUnit = document.querySelector(
+      `input[data-index="${parseInt(input.dataset.index) - 1}"]`,
+    );
     actionUpDown(prevUnit, true);
   }
 }
@@ -275,16 +304,16 @@ function incrementPreviousUnit(input) {
 function updateInputValue(input, newVal, tUnit) {
   input.value = newVal.toString();
   switch (tUnit) {
-    case 'd':
+    case "d":
       days.value = input.value;
       break;
-    case 'h':
+    case "h":
       hours.value = input.value;
       break;
-    case 'm':
+    case "m":
       minutes.value = input.value;
       break;
-    case 's':
+    case "s":
       seconds.value = input.value;
       break;
   }
@@ -297,19 +326,18 @@ function updateInputValue(input, newVal, tUnit) {
  */
 function secondToDate(totalSec, size) {
   totalSec = parseInt(totalSec);
-  if(!isNaN(totalSec)) {
+  if (!isNaN(totalSec)) {
     seconds.value = totalSec % 60;
     minutes.value = (Math.floor(totalSec - seconds.value) / 60) % 60;
-    hours.value = (Math.floor(totalSec / 3600)) % 24;
+    hours.value = Math.floor(totalSec / 3600) % 24;
     days.value = Math.floor(totalSec / (3600 * 24));
 
-    if(size === 'max') {
+    if (size === "max") {
       maxDays.value = Math.floor(totalSec / (3600 * 24));
-    }
-    else if(size === 'min') {
+    } else if (size === "min") {
       minDays.value = Math.floor(totalSec / (3600 * 24));
     }
-  };
+  }
 }
 
 /** Calculates total seconds from all duration units and emits the result. */
@@ -323,39 +351,39 @@ function calculateTotalSeconds() {
     }
   }
 
-  if(total >= maxTotal.value){
+  if (total >= maxTotal.value) {
     total = maxTotal.value;
-    secondToDate(maxTotal.value, 'max');
+    secondToDate(maxTotal.value, "max");
   } else if (total <= minTotal.value) {
     total = minTotal.value;
-    secondToDate(minTotal.value, 'min');
-  } else if((props.size === 'min' && total <= maxTotal.value)) {
+    secondToDate(minTotal.value, "min");
+  } else if (props.size === "min" && total <= maxTotal.value) {
     maxDays.value = Math.floor(maxTotal.value / (3600 * 24));
   }
   totalSeconds.value = total;
-  emit('total-seconds', total);
+  emit("total-seconds", total);
 }
 
 /** Initializes the duration display based on min/max boundaries and preset value. */
 async function createData() {
   const size = props.size;
 
-  if (maxTotal.value !== await null && minTotal.value !== await null) {
+  if (maxTotal.value !== (await null) && minTotal.value !== (await null)) {
     switch (size) {
-      case 'max':
-        secondToDate(minTotal.value, 'min');
-        secondToDate(maxTotal.value, 'max');
+      case "max":
+        secondToDate(minTotal.value, "min");
+        secondToDate(maxTotal.value, "max");
         totalSeconds.value = maxTotal.value;
-        if(props.value !== null) {
+        if (props.value !== null) {
           totalSeconds.value = props.value;
           secondToDate(props.value);
         }
         break;
-      case 'min':
-        secondToDate(maxTotal.value, 'max');
-        secondToDate(minTotal.value, 'min');
+      case "min":
+        secondToDate(maxTotal.value, "max");
+        secondToDate(minTotal.value, "min");
         totalSeconds.value = minTotal.value;
-        if(props.value !== null) {
+        if (props.value !== null) {
           totalSeconds.value = props.value;
           secondToDate(props.value);
         }
@@ -365,33 +393,33 @@ async function createData() {
 }
 
 // created
-emitter.on('reset', () => {
+emitter.on("reset", () => {
   createData();
 });
 
 // mounted
 onMounted(() => {
-  inputTypes.value = display.value.split('');
+  inputTypes.value = display.value.split("");
 });
 
 const vClosable = {
-  mounted(el, {value}) {
-    const handleOutsideClick = function(e) {
+  mounted(el, { value }) {
+    const handleOutsideClick = function (e) {
       let target = e.target;
       while (target && target.id !== value.id) {
         target = target.parentElement;
-      };
-      const isClickOutside = target?.id !== value.id && !el.contains(e.target)
+      }
+      const isClickOutside = target?.id !== value.id && !el.contains(e.target);
       if (isClickOutside) {
         value.handler();
       }
       e.stopPropagation();
-    }
-    document.addEventListener('click', handleOutsideClick);
+    };
+    document.addEventListener("click", handleOutsideClick);
     el._handleOutsideClick = handleOutsideClick;
   },
   unmounted(el) {
-    document.removeEventListener('click', el._handleOutsideClick);
+    document.removeEventListener("click", el._handleOutsideClick);
   },
 };
 </script>
@@ -399,55 +427,55 @@ const vClosable = {
 .duration-container {
   margin: 4px;
   border-radius: 4px;
-  background: var(--10, #FFF);
+  background: var(--10, #fff);
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
   height: 36px;
   width: 221px;
 }
 .duration-box {
-    float:left;
-    overflow: auto;
-    height: var(--main-input-height);
-    padding: 4px;
+  float: left;
+  overflow: auto;
+  height: var(--main-input-height);
+  padding: 4px;
 }
 .duration-box > .duration {
-    border: 1px solid var(--main-bg-light);
-    border-right: 0;
-    border-left: 0;
-    background-color:transparent;
-    color: var(--main-bg-light);
+  border: 1px solid var(--main-bg-light);
+  border-right: 0;
+  border-left: 0;
+  background-color: transparent;
+  color: var(--main-bg-light);
 }
 .duration-box > .duration:nth-child(1) {
-    border-left: 1px solid var(--main-bg-light);
-    border-top-left-radius: var(--main-input-br);
-    border-bottom-left-radius: var(--main-input-br);
+  border-left: 1px solid var(--main-bg-light);
+  border-top-left-radius: var(--main-input-br);
+  border-bottom-left-radius: var(--main-input-br);
 }
 .duration-box > .duration:nth-last-child(1) {
-    border-right: 1px solid var(--main-bg-light);
-    border-top-right-radius: var(--main-input-br);
-    border-bottom-right-radius: var(--main-input-br);
+  border-right: 1px solid var(--main-bg-light);
+  border-top-right-radius: var(--main-input-br);
+  border-bottom-right-radius: var(--main-input-br);
 }
 .duration {
-    float:left;
-    display: block;
-    overflow: auto;
-    height: var(--main-input-height);
-    outline: none;
-    font-size: 14px;
-    margin: 0px 2px;
+  float: left;
+  display: block;
+  overflow: auto;
+  height: var(--main-input-height);
+  outline: none;
+  font-size: 14px;
+  margin: 0px 2px;
 }
 .duration-box > label.duration {
-    line-height: 28px;
-    width: 12px;
-    overflow: hidden;
+  line-height: 28px;
+  width: 12px;
+  overflow: hidden;
 }
 .duration-box > input[type="text"].duration {
-    text-align: right;
-    width: 26px;
-    padding: 3px 2px 0px 0px;
+  text-align: right;
+  width: 26px;
+  padding: 3px 2px 0px 0px;
 }
 .duration-box > input[type="button"].duration {
-    width: 60px;
-    cursor: pointer;
+  width: 60px;
+  cursor: pointer;
 }
 </style>
diff --git a/src/components/icons/IconChecked.vue b/src/components/icons/IconChecked.vue
index bf1e622..0bb6c1c 100644
--- a/src/components/icons/IconChecked.vue
+++ b/src/components/icons/IconChecked.vue
@@ -1,11 +1,27 @@
 <template>
-    <div
-        class="relative two-imgs-container  w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!-- A relative div containing two absolutely positioned img elements -->
-        <img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute" alt="checkbox"/>
-        <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute" alt="checkbox"/>
-        <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]" alt="checkbox"/>
-    </div>
-
+  <div
+    class="relative two-imgs-container w-[18px] h-[24px] cursor-pointer mt-1 mr-2"
+  >
+    <!-- A relative div containing two absolutely positioned img elements -->
+    <img
+      v-if="!isChecked"
+      :src="ImgCheckboxGrayFrame"
+      class="absolute"
+      alt="checkbox"
+    />
+    <img
+      v-if="isChecked"
+      :src="ImgCheckboxBlueFrame"
+      class="absolute"
+      alt="checkbox"
+    />
+    <img
+      v-if="isChecked"
+      :src="ImgCheckboxCheckedMark"
+      class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"
+      alt="checkbox"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -24,9 +40,9 @@ import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
 import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
 
 defineProps({
-    isChecked: {
-        type: Boolean,
-        required: true,
-    },
+  isChecked: {
+    type: Boolean,
+    required: true,
+  },
 });
 </script>
diff --git a/src/components/icons/IconDataFormat.vue b/src/components/icons/IconDataFormat.vue
index 8615dfd..d898408 100644
--- a/src/components/icons/IconDataFormat.vue
+++ b/src/components/icons/IconDataFormat.vue
@@ -3,10 +3,24 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="32" height="32" viewBox="0 0 32 32" fill="black" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.8571 31H3.14286C2.57471 30.9994 2.03 30.7735 1.62825 30.3717C1.22651 29.97 1.00057 29.4253 1 28.8571V3.14286C1.00057 2.57471 1.22651 2.03 1.62825 1.62825C2.03 1.22651 2.57471 1.00057 3.14286 1H28.8571C29.4253 1.00057 29.97 1.22651 30.3717 1.62825C30.7735 2.03 30.9994 2.57471 31 3.14286V28.8571C30.9994 29.4253 30.7735 29.97 30.3717 30.3717C29.97 30.7735 29.4253 30.9994 28.8571 31ZM3.14286 3.14286V28.8571H28.8571V3.14286H3.14286Z"/>
-<path d="M11.1092 19.1541V20.2689H7.01401V19.1541H11.1092ZM7.40616 12.112V20.2689H6V12.112H7.40616Z"/>
-<path d="M18.3305 15.9664V16.4146C18.3305 17.0308 18.2502 17.5836 18.0896 18.0728C17.929 18.5621 17.6993 18.9785 17.4006 19.3221C17.1055 19.6657 16.7507 19.929 16.3361 20.112C15.9216 20.2913 15.4622 20.381 14.958 20.381C14.4575 20.381 14 20.2913 13.5854 20.112C13.1746 19.929 12.8179 19.6657 12.5154 19.3221C12.2129 18.9785 11.9776 18.5621 11.8095 18.0728C11.6452 17.5836 11.563 17.0308 11.563 16.4146V15.9664C11.563 15.3501 11.6452 14.7993 11.8095 14.3137C11.9739 13.8245 12.2054 13.408 12.5042 13.0644C12.8067 12.7171 13.1634 12.4538 13.5742 12.2745C13.9888 12.0915 14.4463 12 14.9468 12C15.451 12 15.9104 12.0915 16.3249 12.2745C16.7395 12.4538 17.0962 12.7171 17.395 13.0644C17.6937 13.408 17.9234 13.8245 18.084 14.3137C18.2484 14.7993 18.3305 15.3501 18.3305 15.9664ZM16.9244 16.4146V15.9552C16.9244 15.4995 16.8796 15.098 16.7899 14.7507C16.704 14.3996 16.5752 14.1064 16.4034 13.8711C16.2353 13.6321 16.028 13.4528 15.7815 13.3333C15.535 13.2101 15.2568 13.1485 14.9468 13.1485C14.6368 13.1485 14.3604 13.2101 14.1176 13.3333C13.8749 13.4528 13.6676 13.6321 13.4958 13.8711C13.3277 14.1064 13.1989 14.3996 13.1092 14.7507C13.0196 15.098 12.9748 15.4995 12.9748 15.9552V16.4146C12.9748 16.8702 13.0196 17.2736 13.1092 17.6247C13.1989 17.9757 13.3296 18.2726 13.5014 18.5154C13.6769 18.7544 13.8861 18.9356 14.1289 19.0588C14.3716 19.1783 14.648 19.2381 14.958 19.2381C15.2717 19.2381 15.55 19.1783 15.7927 19.0588C16.0355 18.9356 16.2409 18.7544 16.409 18.5154C16.577 18.2726 16.704 17.9757 16.7899 17.6247C16.8796 17.2736 16.9244 16.8702 16.9244 16.4146Z"/>
-<path d="M26 16.1008V19.2157C25.8842 19.3688 25.7031 19.5369 25.4566 19.7199C25.2138 19.8992 24.8908 20.0542 24.4874 20.1849C24.084 20.3156 23.5817 20.381 22.9804 20.381C22.4687 20.381 22 20.2951 21.5742 20.1233C21.1485 19.9477 20.7806 19.6919 20.4706 19.3557C20.1643 19.0196 19.9272 18.6106 19.7591 18.1289C19.591 17.6433 19.507 17.0906 19.507 16.4706V15.9048C19.507 15.2885 19.5836 14.7395 19.7367 14.2577C19.8936 13.7722 20.1176 13.3613 20.409 13.0252C20.7003 12.6891 21.0514 12.4351 21.4622 12.2633C21.8768 12.0878 22.3455 12 22.8683 12C23.5369 12 24.0896 12.112 24.5266 12.3361C24.9673 12.5565 25.3072 12.8627 25.5462 13.2549C25.7852 13.6471 25.9365 14.0952 26 14.5994H24.6218C24.577 14.3156 24.4893 14.0616 24.3585 13.8375C24.2316 13.6134 24.0486 13.4379 23.8095 13.3109C23.5742 13.1802 23.268 13.1148 22.8908 13.1148C22.5658 13.1148 22.2801 13.1765 22.0336 13.2997C21.7871 13.423 21.5817 13.6041 21.4174 13.8431C21.2568 14.0822 21.1354 14.3735 21.0532 14.7171C20.9711 15.0607 20.93 15.4528 20.93 15.8936V16.4706C20.93 16.9188 20.9767 17.3165 21.07 17.6639C21.1671 18.0112 21.3053 18.3044 21.4846 18.5434C21.6676 18.7824 21.8898 18.9636 22.1513 19.0868C22.4127 19.2063 22.7078 19.2661 23.0364 19.2661C23.3576 19.2661 23.6209 19.24 23.8263 19.1877C24.0317 19.1317 24.1942 19.0663 24.3137 18.9916C24.437 18.9132 24.5322 18.8385 24.5994 18.7675V17.1485H22.902V16.1008H26Z"/>
-</svg>
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="black"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M28.8571 31H3.14286C2.57471 30.9994 2.03 30.7735 1.62825 30.3717C1.22651 29.97 1.00057 29.4253 1 28.8571V3.14286C1.00057 2.57471 1.22651 2.03 1.62825 1.62825C2.03 1.22651 2.57471 1.00057 3.14286 1H28.8571C29.4253 1.00057 29.97 1.22651 30.3717 1.62825C30.7735 2.03 30.9994 2.57471 31 3.14286V28.8571C30.9994 29.4253 30.7735 29.97 30.3717 30.3717C29.97 30.7735 29.4253 30.9994 28.8571 31ZM3.14286 3.14286V28.8571H28.8571V3.14286H3.14286Z"
+    />
+    <path
+      d="M11.1092 19.1541V20.2689H7.01401V19.1541H11.1092ZM7.40616 12.112V20.2689H6V12.112H7.40616Z"
+    />
+    <path
+      d="M18.3305 15.9664V16.4146C18.3305 17.0308 18.2502 17.5836 18.0896 18.0728C17.929 18.5621 17.6993 18.9785 17.4006 19.3221C17.1055 19.6657 16.7507 19.929 16.3361 20.112C15.9216 20.2913 15.4622 20.381 14.958 20.381C14.4575 20.381 14 20.2913 13.5854 20.112C13.1746 19.929 12.8179 19.6657 12.5154 19.3221C12.2129 18.9785 11.9776 18.5621 11.8095 18.0728C11.6452 17.5836 11.563 17.0308 11.563 16.4146V15.9664C11.563 15.3501 11.6452 14.7993 11.8095 14.3137C11.9739 13.8245 12.2054 13.408 12.5042 13.0644C12.8067 12.7171 13.1634 12.4538 13.5742 12.2745C13.9888 12.0915 14.4463 12 14.9468 12C15.451 12 15.9104 12.0915 16.3249 12.2745C16.7395 12.4538 17.0962 12.7171 17.395 13.0644C17.6937 13.408 17.9234 13.8245 18.084 14.3137C18.2484 14.7993 18.3305 15.3501 18.3305 15.9664ZM16.9244 16.4146V15.9552C16.9244 15.4995 16.8796 15.098 16.7899 14.7507C16.704 14.3996 16.5752 14.1064 16.4034 13.8711C16.2353 13.6321 16.028 13.4528 15.7815 13.3333C15.535 13.2101 15.2568 13.1485 14.9468 13.1485C14.6368 13.1485 14.3604 13.2101 14.1176 13.3333C13.8749 13.4528 13.6676 13.6321 13.4958 13.8711C13.3277 14.1064 13.1989 14.3996 13.1092 14.7507C13.0196 15.098 12.9748 15.4995 12.9748 15.9552V16.4146C12.9748 16.8702 13.0196 17.2736 13.1092 17.6247C13.1989 17.9757 13.3296 18.2726 13.5014 18.5154C13.6769 18.7544 13.8861 18.9356 14.1289 19.0588C14.3716 19.1783 14.648 19.2381 14.958 19.2381C15.2717 19.2381 15.55 19.1783 15.7927 19.0588C16.0355 18.9356 16.2409 18.7544 16.409 18.5154C16.577 18.2726 16.704 17.9757 16.7899 17.6247C16.8796 17.2736 16.9244 16.8702 16.9244 16.4146Z"
+    />
+    <path
+      d="M26 16.1008V19.2157C25.8842 19.3688 25.7031 19.5369 25.4566 19.7199C25.2138 19.8992 24.8908 20.0542 24.4874 20.1849C24.084 20.3156 23.5817 20.381 22.9804 20.381C22.4687 20.381 22 20.2951 21.5742 20.1233C21.1485 19.9477 20.7806 19.6919 20.4706 19.3557C20.1643 19.0196 19.9272 18.6106 19.7591 18.1289C19.591 17.6433 19.507 17.0906 19.507 16.4706V15.9048C19.507 15.2885 19.5836 14.7395 19.7367 14.2577C19.8936 13.7722 20.1176 13.3613 20.409 13.0252C20.7003 12.6891 21.0514 12.4351 21.4622 12.2633C21.8768 12.0878 22.3455 12 22.8683 12C23.5369 12 24.0896 12.112 24.5266 12.3361C24.9673 12.5565 25.3072 12.8627 25.5462 13.2549C25.7852 13.6471 25.9365 14.0952 26 14.5994H24.6218C24.577 14.3156 24.4893 14.0616 24.3585 13.8375C24.2316 13.6134 24.0486 13.4379 23.8095 13.3109C23.5742 13.1802 23.268 13.1148 22.8908 13.1148C22.5658 13.1148 22.2801 13.1765 22.0336 13.2997C21.7871 13.423 21.5817 13.6041 21.4174 13.8431C21.2568 14.0822 21.1354 14.3735 21.0532 14.7171C20.9711 15.0607 20.93 15.4528 20.93 15.8936V16.4706C20.93 16.9188 20.9767 17.3165 21.07 17.6639C21.1671 18.0112 21.3053 18.3044 21.4846 18.5434C21.6676 18.7824 21.8898 18.9636 22.1513 19.0868C22.4127 19.2063 22.7078 19.2661 23.0364 19.2661C23.3576 19.2661 23.6209 19.24 23.8263 19.1877C24.0317 19.1317 24.1942 19.0663 24.3137 18.9916C24.437 18.9132 24.5322 18.8385 24.5994 18.7675V17.1485H22.902V16.1008H26Z"
+    />
+  </svg>
 </template>
diff --git a/src/components/icons/IconEyeClose.vue b/src/components/icons/IconEyeClose.vue
index 9250df0..f431964 100644
--- a/src/components/icons/IconEyeClose.vue
+++ b/src/components/icons/IconEyeClose.vue
@@ -3,7 +3,16 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.0529 3.24373C4.9174 3.10198 4.73177 3.01893 4.53578 3.01238C4.33979 3.00583 4.14903 3.07631 4.00437 3.20871C3.85971 3.34111 3.77266 3.5249 3.76187 3.7207C3.75108 3.9165 3.81741 4.10874 3.94665 4.25624L5.74665 6.23436C2.34352 8.32498 0.881025 11.55 0.8154 11.7C0.773866 11.7962 0.752441 11.8999 0.752441 12.0047C0.752441 12.1095 0.773866 12.2132 0.8154 12.3094C0.843525 12.375 1.6404 14.1375 3.4029 15.9094C5.75602 18.2531 8.7279 19.5 11.9998 19.5C13.6807 19.5067 15.3444 19.1618 16.8842 18.4875L18.9467 20.7562C19.0169 20.833 19.1023 20.8943 19.1976 20.9363C19.2928 20.9783 19.3957 21 19.4998 21C19.6869 20.9982 19.8669 20.9282 20.006 20.8031C20.0797 20.7373 20.1396 20.6574 20.1819 20.5681C20.2243 20.4789 20.2484 20.382 20.2528 20.2833C20.2571 20.1846 20.2417 20.086 20.2074 19.9933C20.173 19.9007 20.1205 19.8158 20.0529 19.7437L5.0529 3.24373ZM9.48727 10.3594L13.3966 14.6531C12.9666 14.8818 12.4868 15.0009 11.9998 15C11.4591 15.0001 10.9284 14.8542 10.4639 14.5775C9.99933 14.3009 9.61819 13.9038 9.36076 13.4283C9.10334 12.9528 8.97919 12.4166 9.00146 11.8764C9.02373 11.3362 9.19159 10.812 9.48727 10.3594V10.3594ZM11.9998 18C9.11228 18 6.5904 16.95 4.50915 14.8781C3.64691 14.0329 2.91685 13.0626 2.34352 12C2.78415 11.175 4.19978 8.85936 6.7779 7.36873L8.4654 9.22499C7.81494 10.0615 7.48054 11.1007 7.52112 12.1596C7.5617 13.2185 7.97465 14.2291 8.68723 15.0134C9.39981 15.7976 10.3663 16.3053 11.4164 16.4469C12.4666 16.5885 13.533 16.355 14.4279 15.7875L15.806 17.3062C14.5911 17.771 13.3005 18.0063 11.9998 18V18ZM23.1842 12.3094C23.1467 12.3937 22.1998 14.4937 20.0529 16.4156C19.9152 16.5359 19.7388 16.6025 19.556 16.6031C19.4509 16.6044 19.3467 16.5823 19.2511 16.5385C19.1555 16.4948 19.0707 16.4304 19.0029 16.35C18.937 16.2767 18.8862 16.1912 18.8534 16.0983C18.8205 16.0055 18.8063 15.907 18.8116 15.8086C18.8168 15.7103 18.8413 15.6139 18.8838 15.525C18.9263 15.4361 18.9859 15.3565 19.0592 15.2906C20.107 14.3507 20.9854 13.2376 21.656 12C21.0811 10.9356 20.3513 9.96244 19.4904 9.11248C17.4091 7.04998 14.8873 5.99999 11.9998 5.99999C11.3903 5.99753 10.7818 6.04772 10.181 6.14998C9.98493 6.17994 9.78489 6.13197 9.62371 6.01634C9.46252 5.90071 9.35299 5.72659 9.31852 5.53124C9.30244 5.43397 9.30569 5.33448 9.32809 5.23847C9.35049 5.14246 9.3916 5.0518 9.44907 4.9717C9.50654 4.89159 9.57924 4.8236 9.66301 4.77161C9.74678 4.71963 9.83998 4.68467 9.93727 4.66873C10.6189 4.55517 11.3088 4.49873 11.9998 4.49998C15.2717 4.49998 18.2435 5.74686 20.5966 8.09061C22.3591 9.86249 23.156 11.625 23.1842 11.7C23.2257 11.7962 23.2471 11.8999 23.2471 12.0047C23.2471 12.1095 23.2257 12.2132 23.1842 12.3094V12.3094ZM12.5623 9.05624C12.465 9.03777 12.3723 9.00032 12.2896 8.94604C12.2068 8.89176 12.1355 8.82171 12.0798 8.73987C11.9672 8.57461 11.925 8.37141 11.9623 8.17498C11.9996 7.97856 12.1134 7.80499 12.2786 7.69247C12.4439 7.57995 12.6471 7.53769 12.8435 7.57499C13.7999 7.76202 14.6703 8.25257 15.3257 8.97375C15.981 9.69494 16.3862 10.6083 16.481 11.5781C16.4993 11.7757 16.4385 11.9725 16.312 12.1254C16.1855 12.2782 16.0035 12.3747 15.806 12.3937H15.731C15.5455 12.3945 15.3664 12.3255 15.2292 12.2005C15.0921 12.0755 15.0068 11.9036 14.9904 11.7187C14.9257 11.0729 14.6546 10.4651 14.2172 9.98546C13.7798 9.50585 13.1995 9.18 12.5623 9.05624V9.05624Z" fill="#C4C4C4"/>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.0529 3.24373C4.9174 3.10198 4.73177 3.01893 4.53578 3.01238C4.33979 3.00583 4.14903 3.07631 4.00437 3.20871C3.85971 3.34111 3.77266 3.5249 3.76187 3.7207C3.75108 3.9165 3.81741 4.10874 3.94665 4.25624L5.74665 6.23436C2.34352 8.32498 0.881025 11.55 0.8154 11.7C0.773866 11.7962 0.752441 11.8999 0.752441 12.0047C0.752441 12.1095 0.773866 12.2132 0.8154 12.3094C0.843525 12.375 1.6404 14.1375 3.4029 15.9094C5.75602 18.2531 8.7279 19.5 11.9998 19.5C13.6807 19.5067 15.3444 19.1618 16.8842 18.4875L18.9467 20.7562C19.0169 20.833 19.1023 20.8943 19.1976 20.9363C19.2928 20.9783 19.3957 21 19.4998 21C19.6869 20.9982 19.8669 20.9282 20.006 20.8031C20.0797 20.7373 20.1396 20.6574 20.1819 20.5681C20.2243 20.4789 20.2484 20.382 20.2528 20.2833C20.2571 20.1846 20.2417 20.086 20.2074 19.9933C20.173 19.9007 20.1205 19.8158 20.0529 19.7437L5.0529 3.24373ZM9.48727 10.3594L13.3966 14.6531C12.9666 14.8818 12.4868 15.0009 11.9998 15C11.4591 15.0001 10.9284 14.8542 10.4639 14.5775C9.99933 14.3009 9.61819 13.9038 9.36076 13.4283C9.10334 12.9528 8.97919 12.4166 9.00146 11.8764C9.02373 11.3362 9.19159 10.812 9.48727 10.3594V10.3594ZM11.9998 18C9.11228 18 6.5904 16.95 4.50915 14.8781C3.64691 14.0329 2.91685 13.0626 2.34352 12C2.78415 11.175 4.19978 8.85936 6.7779 7.36873L8.4654 9.22499C7.81494 10.0615 7.48054 11.1007 7.52112 12.1596C7.5617 13.2185 7.97465 14.2291 8.68723 15.0134C9.39981 15.7976 10.3663 16.3053 11.4164 16.4469C12.4666 16.5885 13.533 16.355 14.4279 15.7875L15.806 17.3062C14.5911 17.771 13.3005 18.0063 11.9998 18V18ZM23.1842 12.3094C23.1467 12.3937 22.1998 14.4937 20.0529 16.4156C19.9152 16.5359 19.7388 16.6025 19.556 16.6031C19.4509 16.6044 19.3467 16.5823 19.2511 16.5385C19.1555 16.4948 19.0707 16.4304 19.0029 16.35C18.937 16.2767 18.8862 16.1912 18.8534 16.0983C18.8205 16.0055 18.8063 15.907 18.8116 15.8086C18.8168 15.7103 18.8413 15.6139 18.8838 15.525C18.9263 15.4361 18.9859 15.3565 19.0592 15.2906C20.107 14.3507 20.9854 13.2376 21.656 12C21.0811 10.9356 20.3513 9.96244 19.4904 9.11248C17.4091 7.04998 14.8873 5.99999 11.9998 5.99999C11.3903 5.99753 10.7818 6.04772 10.181 6.14998C9.98493 6.17994 9.78489 6.13197 9.62371 6.01634C9.46252 5.90071 9.35299 5.72659 9.31852 5.53124C9.30244 5.43397 9.30569 5.33448 9.32809 5.23847C9.35049 5.14246 9.3916 5.0518 9.44907 4.9717C9.50654 4.89159 9.57924 4.8236 9.66301 4.77161C9.74678 4.71963 9.83998 4.68467 9.93727 4.66873C10.6189 4.55517 11.3088 4.49873 11.9998 4.49998C15.2717 4.49998 18.2435 5.74686 20.5966 8.09061C22.3591 9.86249 23.156 11.625 23.1842 11.7C23.2257 11.7962 23.2471 11.8999 23.2471 12.0047C23.2471 12.1095 23.2257 12.2132 23.1842 12.3094V12.3094ZM12.5623 9.05624C12.465 9.03777 12.3723 9.00032 12.2896 8.94604C12.2068 8.89176 12.1355 8.82171 12.0798 8.73987C11.9672 8.57461 11.925 8.37141 11.9623 8.17498C11.9996 7.97856 12.1134 7.80499 12.2786 7.69247C12.4439 7.57995 12.6471 7.53769 12.8435 7.57499C13.7999 7.76202 14.6703 8.25257 15.3257 8.97375C15.981 9.69494 16.3862 10.6083 16.481 11.5781C16.4993 11.7757 16.4385 11.9725 16.312 12.1254C16.1855 12.2782 16.0035 12.3747 15.806 12.3937H15.731C15.5455 12.3945 15.3664 12.3255 15.2292 12.2005C15.0921 12.0755 15.0068 11.9036 14.9904 11.7187C14.9257 11.0729 14.6546 10.4651 14.2172 9.98546C13.7798 9.50585 13.1995 9.18 12.5623 9.05624V9.05624Z"
+      fill="#C4C4C4"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/IconEyeOpen.vue b/src/components/icons/IconEyeOpen.vue
index 4a71235..08360a4 100644
--- a/src/components/icons/IconEyeOpen.vue
+++ b/src/components/icons/IconEyeOpen.vue
@@ -3,7 +3,16 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M23.1842 11.7C23.1561 11.625 22.3592 9.8625 20.5967 8.09063C18.2436 5.74688 15.2717 4.5 11.9998 4.5C8.72793 4.5 5.75606 5.74688 3.40293 8.09063C1.64043 9.8625 0.843558 11.625 0.815433 11.7C0.773576 11.7945 0.751953 11.8967 0.751953 12C0.751953 12.1033 0.773576 12.2055 0.815433 12.3C0.843558 12.375 1.64043 14.1375 3.40293 15.9094C5.75606 18.2531 8.72793 19.5 11.9998 19.5C15.2717 19.5 18.2436 18.2531 20.5967 15.9094C22.3592 14.1375 23.1561 12.375 23.1842 12.3C23.226 12.2055 23.2477 12.1033 23.2477 12C23.2477 11.8967 23.226 11.7945 23.1842 11.7ZM11.9998 18C9.11231 18 6.59043 16.95 4.50918 14.8781C3.64906 14.031 2.91925 13.0611 2.34356 12C2.91847 10.9356 3.64831 9.96245 4.50918 9.1125C6.59043 7.05 9.11231 6 11.9998 6C14.8873 6 17.4092 7.05 19.4904 9.1125C20.3513 9.96245 21.0811 10.9356 21.6561 12C20.9811 13.2656 18.0373 18 11.9998 18ZM11.9998 7.5C11.1098 7.5 10.2398 7.76392 9.49974 8.25839C8.75972 8.75285 8.18295 9.45566 7.84235 10.2779C7.50176 11.1002 7.41264 12.005 7.58628 12.8779C7.75991 13.7508 8.18849 14.5526 8.81783 15.182C9.44716 15.8113 10.249 16.2399 11.1219 16.4135C11.9948 16.5872 12.8996 16.4981 13.7219 16.1575C14.5442 15.8169 15.247 15.2401 15.7414 14.5001C16.2359 13.76 16.4998 12.89 16.4998 12C16.4998 10.8065 16.0257 9.66193 15.1818 8.81802C14.3379 7.97411 13.1933 7.5 11.9998 7.5ZM11.9998 15C11.4065 15 10.8264 14.8241 10.3331 14.4944C9.83975 14.1648 9.45523 13.6962 9.22817 13.1481C9.00111 12.5999 8.9417 11.9967 9.05745 11.4147C9.17321 10.8328 9.45893 10.2982 9.87849 9.87868C10.298 9.45912 10.8326 9.1734 11.4145 9.05764C11.9965 8.94189 12.5997 9.0013 13.1479 9.22836C13.696 9.45542 14.1646 9.83994 14.4942 10.3333C14.8239 10.8266 14.9998 11.4067 14.9998 12C14.9973 12.7949 14.6805 13.5565 14.1184 14.1186C13.5563 14.6807 12.7947 14.9975 11.9998 15Z" fill="#0099FF"/>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23.1842 11.7C23.1561 11.625 22.3592 9.8625 20.5967 8.09063C18.2436 5.74688 15.2717 4.5 11.9998 4.5C8.72793 4.5 5.75606 5.74688 3.40293 8.09063C1.64043 9.8625 0.843558 11.625 0.815433 11.7C0.773576 11.7945 0.751953 11.8967 0.751953 12C0.751953 12.1033 0.773576 12.2055 0.815433 12.3C0.843558 12.375 1.64043 14.1375 3.40293 15.9094C5.75606 18.2531 8.72793 19.5 11.9998 19.5C15.2717 19.5 18.2436 18.2531 20.5967 15.9094C22.3592 14.1375 23.1561 12.375 23.1842 12.3C23.226 12.2055 23.2477 12.1033 23.2477 12C23.2477 11.8967 23.226 11.7945 23.1842 11.7ZM11.9998 18C9.11231 18 6.59043 16.95 4.50918 14.8781C3.64906 14.031 2.91925 13.0611 2.34356 12C2.91847 10.9356 3.64831 9.96245 4.50918 9.1125C6.59043 7.05 9.11231 6 11.9998 6C14.8873 6 17.4092 7.05 19.4904 9.1125C20.3513 9.96245 21.0811 10.9356 21.6561 12C20.9811 13.2656 18.0373 18 11.9998 18ZM11.9998 7.5C11.1098 7.5 10.2398 7.76392 9.49974 8.25839C8.75972 8.75285 8.18295 9.45566 7.84235 10.2779C7.50176 11.1002 7.41264 12.005 7.58628 12.8779C7.75991 13.7508 8.18849 14.5526 8.81783 15.182C9.44716 15.8113 10.249 16.2399 11.1219 16.4135C11.9948 16.5872 12.8996 16.4981 13.7219 16.1575C14.5442 15.8169 15.247 15.2401 15.7414 14.5001C16.2359 13.76 16.4998 12.89 16.4998 12C16.4998 10.8065 16.0257 9.66193 15.1818 8.81802C14.3379 7.97411 13.1933 7.5 11.9998 7.5ZM11.9998 15C11.4065 15 10.8264 14.8241 10.3331 14.4944C9.83975 14.1648 9.45523 13.6962 9.22817 13.1481C9.00111 12.5999 8.9417 11.9967 9.05745 11.4147C9.17321 10.8328 9.45893 10.2982 9.87849 9.87868C10.298 9.45912 10.8326 9.1734 11.4145 9.05764C11.9965 8.94189 12.5997 9.0013 13.1479 9.22836C13.696 9.45542 14.1646 9.83994 14.4942 10.3333C14.8239 10.8266 14.9998 11.4067 14.9998 12C14.9973 12.7949 14.6805 13.5565 14.1184 14.1186C13.5563 14.6807 12.7947 14.9975 11.9998 15Z"
+      fill="#0099FF"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/IconFlowChart.vue b/src/components/icons/IconFlowChart.vue
index ea7f6ec..3d4022f 100644
--- a/src/components/icons/IconFlowChart.vue
+++ b/src/components/icons/IconFlowChart.vue
@@ -3,14 +3,24 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2381_1348)">
-<path d="M5.67116 32C4.61918 31.9997 3.58801 31.7069 2.69286 31.1544C1.79771 30.6018 1.07385 29.8111 0.60217 28.8708C0.130493 27.9305 -0.0704207 26.8776 0.0218796 25.8297C0.11418 24.7818 0.496058 23.7802 1.12484 22.9368C1.75362 22.0934 2.60454 21.4415 3.5825 21.0539C4.56046 20.6663 5.62695 20.5582 6.66277 20.7419C7.69859 20.9255 8.66295 21.3935 9.44809 22.0937C10.2332 22.7938 10.8082 23.6985 11.1088 24.7066H20.2579V21.4652H23.4994V12.1329L19.864 8.49919H10.5334V11.7407H0.80892V2.01621H10.5334V5.2577H19.864L25.1201 0L31.9969 6.87844L26.7408 12.1313V21.4652H29.9823V31.1896H20.2579V27.9481H11.1088C10.7594 29.1189 10.0415 30.1457 9.06182 30.8757C8.08212 31.6057 6.89294 32.0001 5.67116 32ZM5.67116 23.8963C5.35179 23.8964 5.03557 23.9594 4.74056 24.0817C4.44555 24.204 4.17751 24.3832 3.95176 24.6091C3.72601 24.835 3.54697 25.1032 3.42485 25.3983C3.30273 25.6934 3.23993 26.0096 3.24004 26.329C3.24014 26.6484 3.30315 26.9646 3.42547 27.2596C3.54778 27.5546 3.72701 27.8227 3.95291 28.0484C4.17881 28.2742 4.44696 28.4532 4.74206 28.5753C5.03715 28.6974 5.35341 28.7602 5.67278 28.7601C6.31776 28.7599 6.93625 28.5035 7.39217 28.0473C7.8481 27.591 8.10411 26.9724 8.1039 26.3274C8.10368 25.6824 7.84725 25.0639 7.39103 24.608C6.9348 24.1521 6.31614 23.8961 5.67116 23.8963ZM26.7408 24.7066H23.4994V27.9481H26.7408V24.7066ZM25.1201 4.58671L22.8284 6.87844L25.1201 9.17018L27.4118 6.87844L25.1201 4.58671ZM7.2919 5.2577H4.05041V8.49919H7.2919V5.2577Z" fill="#191C21" stroke="white"/>
-</g>
-<defs>
-<clipPath id="clip0_2381_1348">
-<rect width="32" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2381_1348)">
+      <path
+        d="M5.67116 32C4.61918 31.9997 3.58801 31.7069 2.69286 31.1544C1.79771 30.6018 1.07385 29.8111 0.60217 28.8708C0.130493 27.9305 -0.0704207 26.8776 0.0218796 25.8297C0.11418 24.7818 0.496058 23.7802 1.12484 22.9368C1.75362 22.0934 2.60454 21.4415 3.5825 21.0539C4.56046 20.6663 5.62695 20.5582 6.66277 20.7419C7.69859 20.9255 8.66295 21.3935 9.44809 22.0937C10.2332 22.7938 10.8082 23.6985 11.1088 24.7066H20.2579V21.4652H23.4994V12.1329L19.864 8.49919H10.5334V11.7407H0.80892V2.01621H10.5334V5.2577H19.864L25.1201 0L31.9969 6.87844L26.7408 12.1313V21.4652H29.9823V31.1896H20.2579V27.9481H11.1088C10.7594 29.1189 10.0415 30.1457 9.06182 30.8757C8.08212 31.6057 6.89294 32.0001 5.67116 32ZM5.67116 23.8963C5.35179 23.8964 5.03557 23.9594 4.74056 24.0817C4.44555 24.204 4.17751 24.3832 3.95176 24.6091C3.72601 24.835 3.54697 25.1032 3.42485 25.3983C3.30273 25.6934 3.23993 26.0096 3.24004 26.329C3.24014 26.6484 3.30315 26.9646 3.42547 27.2596C3.54778 27.5546 3.72701 27.8227 3.95291 28.0484C4.17881 28.2742 4.44696 28.4532 4.74206 28.5753C5.03715 28.6974 5.35341 28.7602 5.67278 28.7601C6.31776 28.7599 6.93625 28.5035 7.39217 28.0473C7.8481 27.591 8.10411 26.9724 8.1039 26.3274C8.10368 25.6824 7.84725 25.0639 7.39103 24.608C6.9348 24.1521 6.31614 23.8961 5.67116 23.8963ZM26.7408 24.7066H23.4994V27.9481H26.7408V24.7066ZM25.1201 4.58671L22.8284 6.87844L25.1201 9.17018L27.4118 6.87844L25.1201 4.58671ZM7.2919 5.2577H4.05041V8.49919H7.2919V5.2577Z"
+        fill="#191C21"
+        stroke="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2381_1348">
+        <rect width="32" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
 </template>
diff --git a/src/components/icons/IconGrid.vue b/src/components/icons/IconGrid.vue
index 401a356..f8a4d36 100644
--- a/src/components/icons/IconGrid.vue
+++ b/src/components/icons/IconGrid.vue
@@ -3,7 +3,15 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="24" height="24" viewBox="0 0 24 24" fill="#86909C" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.5 3.58929C1.5 3.03517 1.72012 2.50375 2.11194 2.11194C2.50375 1.72012 3.03517 1.5 3.58929 1.5H7.76786C8.32197 1.5 8.85339 1.72012 9.24521 2.11194C9.63702 2.50375 9.85714 3.03517 9.85714 3.58929V7.76786C9.85714 8.32197 9.63702 8.85339 9.24521 9.24521C8.85339 9.63702 8.32197 9.85714 7.76786 9.85714H3.58929C3.03517 9.85714 2.50375 9.63702 2.11194 9.24521C1.72012 8.85339 1.5 8.32197 1.5 7.76786V3.58929ZM3.58929 2.89286C3.40458 2.89286 3.22744 2.96623 3.09684 3.09684C2.96623 3.22744 2.89286 3.40458 2.89286 3.58929V7.76786C2.89286 7.95256 2.96623 8.1297 3.09684 8.26031C3.22744 8.39091 3.40458 8.46429 3.58929 8.46429H7.76786C7.95256 8.46429 8.1297 8.39091 8.26031 8.26031C8.39091 8.1297 8.46429 7.95256 8.46429 7.76786V3.58929C8.46429 3.40458 8.39091 3.22744 8.26031 3.09684C8.1297 2.96623 7.95256 2.89286 7.76786 2.89286H3.58929ZM12.6429 3.58929C12.6429 3.03517 12.863 2.50375 13.2548 2.11194C13.6466 1.72012 14.178 1.5 14.7321 1.5H18.9107C19.4648 1.5 19.9962 1.72012 20.3881 2.11194C20.7799 2.50375 21 3.03517 21 3.58929V7.76786C21 8.32197 20.7799 8.85339 20.3881 9.24521C19.9962 9.63702 19.4648 9.85714 18.9107 9.85714H14.7321C14.178 9.85714 13.6466 9.63702 13.2548 9.24521C12.863 8.85339 12.6429 8.32197 12.6429 7.76786V3.58929ZM14.7321 2.89286C14.5474 2.89286 14.3703 2.96623 14.2397 3.09684C14.1091 3.22744 14.0357 3.40458 14.0357 3.58929V7.76786C14.0357 7.95256 14.1091 8.1297 14.2397 8.26031C14.3703 8.39091 14.5474 8.46429 14.7321 8.46429H18.9107C19.0954 8.46429 19.2726 8.39091 19.4032 8.26031C19.5338 8.1297 19.6071 7.95256 19.6071 7.76786V3.58929C19.6071 3.40458 19.5338 3.22744 19.4032 3.09684C19.2726 2.96623 19.0954 2.89286 18.9107 2.89286H14.7321ZM1.5 14.7321C1.5 14.178 1.72012 13.6466 2.11194 13.2548C2.50375 12.863 3.03517 12.6429 3.58929 12.6429H7.76786C8.32197 12.6429 8.85339 12.863 9.24521 13.2548C9.63702 13.6466 9.85714 14.178 9.85714 14.7321V18.9107C9.85714 19.4648 9.63702 19.9962 9.24521 20.3881C8.85339 20.7799 8.32197 21 7.76786 21H3.58929C3.03517 21 2.50375 20.7799 2.11194 20.3881C1.72012 19.9962 1.5 19.4648 1.5 18.9107V14.7321ZM3.58929 14.0357C3.40458 14.0357 3.22744 14.1091 3.09684 14.2397C2.96623 14.3703 2.89286 14.5474 2.89286 14.7321V18.9107C2.89286 19.0954 2.96623 19.2726 3.09684 19.4032C3.22744 19.5338 3.40458 19.6071 3.58929 19.6071H7.76786C7.95256 19.6071 8.1297 19.5338 8.26031 19.4032C8.39091 19.2726 8.46429 19.0954 8.46429 18.9107V14.7321C8.46429 14.5474 8.39091 14.3703 8.26031 14.2397C8.1297 14.1091 7.95256 14.0357 7.76786 14.0357H3.58929ZM12.6429 14.7321C12.6429 14.178 12.863 13.6466 13.2548 13.2548C13.6466 12.863 14.178 12.6429 14.7321 12.6429H18.9107C19.4648 12.6429 19.9962 12.863 20.3881 13.2548C20.7799 13.6466 21 14.178 21 14.7321V18.9107C21 19.4648 20.7799 19.9962 20.3881 20.3881C19.9962 20.7799 19.4648 21 18.9107 21H14.7321C14.178 21 13.6466 20.7799 13.2548 20.3881C12.863 19.9962 12.6429 19.4648 12.6429 18.9107V14.7321ZM14.7321 14.0357C14.5474 14.0357 14.3703 14.1091 14.2397 14.2397C14.1091 14.3703 14.0357 14.5474 14.0357 14.7321V18.9107C14.0357 19.0954 14.1091 19.2726 14.2397 19.4032C14.3703 19.5338 14.5474 19.6071 14.7321 19.6071H18.9107C19.0954 19.6071 19.2726 19.5338 19.4032 19.4032C19.5338 19.2726 19.6071 19.0954 19.6071 18.9107V14.7321C19.6071 14.5474 19.5338 14.3703 19.4032 14.2397C19.2726 14.1091 19.0954 14.0357 18.9107 14.0357H14.7321Z" />
-</svg>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="#86909C"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.5 3.58929C1.5 3.03517 1.72012 2.50375 2.11194 2.11194C2.50375 1.72012 3.03517 1.5 3.58929 1.5H7.76786C8.32197 1.5 8.85339 1.72012 9.24521 2.11194C9.63702 2.50375 9.85714 3.03517 9.85714 3.58929V7.76786C9.85714 8.32197 9.63702 8.85339 9.24521 9.24521C8.85339 9.63702 8.32197 9.85714 7.76786 9.85714H3.58929C3.03517 9.85714 2.50375 9.63702 2.11194 9.24521C1.72012 8.85339 1.5 8.32197 1.5 7.76786V3.58929ZM3.58929 2.89286C3.40458 2.89286 3.22744 2.96623 3.09684 3.09684C2.96623 3.22744 2.89286 3.40458 2.89286 3.58929V7.76786C2.89286 7.95256 2.96623 8.1297 3.09684 8.26031C3.22744 8.39091 3.40458 8.46429 3.58929 8.46429H7.76786C7.95256 8.46429 8.1297 8.39091 8.26031 8.26031C8.39091 8.1297 8.46429 7.95256 8.46429 7.76786V3.58929C8.46429 3.40458 8.39091 3.22744 8.26031 3.09684C8.1297 2.96623 7.95256 2.89286 7.76786 2.89286H3.58929ZM12.6429 3.58929C12.6429 3.03517 12.863 2.50375 13.2548 2.11194C13.6466 1.72012 14.178 1.5 14.7321 1.5H18.9107C19.4648 1.5 19.9962 1.72012 20.3881 2.11194C20.7799 2.50375 21 3.03517 21 3.58929V7.76786C21 8.32197 20.7799 8.85339 20.3881 9.24521C19.9962 9.63702 19.4648 9.85714 18.9107 9.85714H14.7321C14.178 9.85714 13.6466 9.63702 13.2548 9.24521C12.863 8.85339 12.6429 8.32197 12.6429 7.76786V3.58929ZM14.7321 2.89286C14.5474 2.89286 14.3703 2.96623 14.2397 3.09684C14.1091 3.22744 14.0357 3.40458 14.0357 3.58929V7.76786C14.0357 7.95256 14.1091 8.1297 14.2397 8.26031C14.3703 8.39091 14.5474 8.46429 14.7321 8.46429H18.9107C19.0954 8.46429 19.2726 8.39091 19.4032 8.26031C19.5338 8.1297 19.6071 7.95256 19.6071 7.76786V3.58929C19.6071 3.40458 19.5338 3.22744 19.4032 3.09684C19.2726 2.96623 19.0954 2.89286 18.9107 2.89286H14.7321ZM1.5 14.7321C1.5 14.178 1.72012 13.6466 2.11194 13.2548C2.50375 12.863 3.03517 12.6429 3.58929 12.6429H7.76786C8.32197 12.6429 8.85339 12.863 9.24521 13.2548C9.63702 13.6466 9.85714 14.178 9.85714 14.7321V18.9107C9.85714 19.4648 9.63702 19.9962 9.24521 20.3881C8.85339 20.7799 8.32197 21 7.76786 21H3.58929C3.03517 21 2.50375 20.7799 2.11194 20.3881C1.72012 19.9962 1.5 19.4648 1.5 18.9107V14.7321ZM3.58929 14.0357C3.40458 14.0357 3.22744 14.1091 3.09684 14.2397C2.96623 14.3703 2.89286 14.5474 2.89286 14.7321V18.9107C2.89286 19.0954 2.96623 19.2726 3.09684 19.4032C3.22744 19.5338 3.40458 19.6071 3.58929 19.6071H7.76786C7.95256 19.6071 8.1297 19.5338 8.26031 19.4032C8.39091 19.2726 8.46429 19.0954 8.46429 18.9107V14.7321C8.46429 14.5474 8.39091 14.3703 8.26031 14.2397C8.1297 14.1091 7.95256 14.0357 7.76786 14.0357H3.58929ZM12.6429 14.7321C12.6429 14.178 12.863 13.6466 13.2548 13.2548C13.6466 12.863 14.178 12.6429 14.7321 12.6429H18.9107C19.4648 12.6429 19.9962 12.863 20.3881 13.2548C20.7799 13.6466 21 14.178 21 14.7321V18.9107C21 19.4648 20.7799 19.9962 20.3881 20.3881C19.9962 20.7799 19.4648 21 18.9107 21H14.7321C14.178 21 13.6466 20.7799 13.2548 20.3881C12.863 19.9962 12.6429 19.4648 12.6429 18.9107V14.7321ZM14.7321 14.0357C14.5474 14.0357 14.3703 14.1091 14.2397 14.2397C14.1091 14.3703 14.0357 14.5474 14.0357 14.7321V18.9107C14.0357 19.0954 14.1091 19.2726 14.2397 19.4032C14.3703 19.5338 14.5474 19.6071 14.7321 19.6071H18.9107C19.0954 19.6071 19.2726 19.5338 19.4032 19.4032C19.5338 19.2726 19.6071 19.0954 19.6071 18.9107V14.7321C19.6071 14.5474 19.5338 14.3703 19.4032 14.2397C19.2726 14.1091 19.0954 14.0357 18.9107 14.0357H14.7321Z"
+    />
+  </svg>
 </template>
diff --git a/src/components/icons/IconList.vue b/src/components/icons/IconList.vue
index 7888e50..bc8dbd3 100644
--- a/src/components/icons/IconList.vue
+++ b/src/components/icons/IconList.vue
@@ -3,7 +3,17 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="24" height="24" viewBox="0 0 24 24" fill="#86909C" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 18C3.75 17.8011 3.82902 17.6103 3.96967 17.4697C4.11032 17.329 4.30109 17.25 4.5 17.25H19.5C19.6989 17.25 19.8897 17.329 20.0303 17.4697C20.171 17.6103 20.25 17.8011 20.25 18C20.25 18.1989 20.171 18.3897 20.0303 18.5303C19.8897 18.671 19.6989 18.75 19.5 18.75H4.5C4.30109 18.75 4.11032 18.671 3.96967 18.5303C3.82902 18.3897 3.75 18.1989 3.75 18ZM3.75 12C3.75 11.8011 3.82902 11.6103 3.96967 11.4697C4.11032 11.329 4.30109 11.25 4.5 11.25H19.5C19.6989 11.25 19.8897 11.329 20.0303 11.4697C20.171 11.6103 20.25 11.8011 20.25 12C20.25 12.1989 20.171 12.3897 20.0303 12.5303C19.8897 12.671 19.6989 12.75 19.5 12.75H4.5C4.30109 12.75 4.11032 12.671 3.96967 12.5303C3.82902 12.3897 3.75 12.1989 3.75 12ZM3.75 6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6C20.25 6.19891 20.171 6.38968 20.0303 6.53033C19.8897 6.67098 19.6989 6.75 19.5 6.75H4.5C4.30109 6.75 4.11032 6.67098 3.96967 6.53033C3.82902 6.38968 3.75 6.19891 3.75 6Z" />
-</svg>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="#86909C"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.75 18C3.75 17.8011 3.82902 17.6103 3.96967 17.4697C4.11032 17.329 4.30109 17.25 4.5 17.25H19.5C19.6989 17.25 19.8897 17.329 20.0303 17.4697C20.171 17.6103 20.25 17.8011 20.25 18C20.25 18.1989 20.171 18.3897 20.0303 18.5303C19.8897 18.671 19.6989 18.75 19.5 18.75H4.5C4.30109 18.75 4.11032 18.671 3.96967 18.5303C3.82902 18.3897 3.75 18.1989 3.75 18ZM3.75 12C3.75 11.8011 3.82902 11.6103 3.96967 11.4697C4.11032 11.329 4.30109 11.25 4.5 11.25H19.5C19.6989 11.25 19.8897 11.329 20.0303 11.4697C20.171 11.6103 20.25 11.8011 20.25 12C20.25 12.1989 20.171 12.3897 20.0303 12.5303C19.8897 12.671 19.6989 12.75 19.5 12.75H4.5C4.30109 12.75 4.11032 12.671 3.96967 12.5303C3.82902 12.3897 3.75 12.1989 3.75 12ZM3.75 6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6C20.25 6.19891 20.171 6.38968 20.0303 6.53033C19.8897 6.67098 19.6989 6.75 19.5 6.75H4.5C4.30109 6.75 4.11032 6.67098 3.96967 6.53033C3.82902 6.38968 3.75 6.19891 3.75 6Z"
+    />
+  </svg>
 </template>
diff --git a/src/components/icons/IconLockKey.vue b/src/components/icons/IconLockKey.vue
index 478b3cc..f153e8b 100644
--- a/src/components/icons/IconLockKey.vue
+++ b/src/components/icons/IconLockKey.vue
@@ -3,7 +3,16 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 11.75C11.3713 11.7524 10.7643 11.9805 10.2895 12.3926C9.81465 12.8048 9.50353 13.3736 9.41271 13.9958C9.32189 14.6179 9.45738 15.252 9.79456 15.7827C10.1317 16.3134 10.6482 16.7054 11.25 16.8875V18.5C11.25 18.6989 11.329 18.8897 11.4697 19.0303C11.6103 19.171 11.8011 19.25 12 19.25C12.1989 19.25 12.3897 19.171 12.5303 19.0303C12.671 18.8897 12.75 18.6989 12.75 18.5V16.8875C13.3518 16.7054 13.8683 16.3134 14.2054 15.7827C14.5426 15.252 14.6781 14.6179 14.5873 13.9958C14.4965 13.3736 14.1854 12.8048 13.7105 12.3926C13.2357 11.9805 12.6287 11.7524 12 11.75ZM12 15.5C11.7775 15.5 11.56 15.434 11.375 15.3104C11.19 15.1868 11.0458 15.0111 10.9606 14.8055C10.8755 14.6 10.8532 14.3738 10.8966 14.1555C10.94 13.9373 11.0472 13.7368 11.2045 13.5795C11.3618 13.4222 11.5623 13.315 11.7805 13.2716C11.9988 13.2282 12.225 13.2505 12.4305 13.3356C12.6361 13.4208 12.8118 13.565 12.9354 13.75C13.059 13.935 13.125 14.1525 13.125 14.375C13.125 14.6734 13.0065 14.9595 12.7955 15.1705C12.5845 15.3815 12.2984 15.5 12 15.5ZM19.5 8.75H16.125V6.125C16.125 5.03098 15.6904 3.98177 14.9168 3.20818C14.1432 2.4346 13.094 2 12 2C10.906 2 9.85677 2.4346 9.08318 3.20818C8.3096 3.98177 7.875 5.03098 7.875 6.125V8.75H4.5C4.10218 8.75 3.72064 8.90804 3.43934 9.18934C3.15804 9.47064 3 9.85218 3 10.25V20.75C3 21.1478 3.15804 21.5294 3.43934 21.8107C3.72064 22.092 4.10218 22.25 4.5 22.25H19.5C19.8978 22.25 20.2794 22.092 20.5607 21.8107C20.842 21.5294 21 21.1478 21 20.75V10.25C21 9.85218 20.842 9.47064 20.5607 9.18934C20.2794 8.90804 19.8978 8.75 19.5 8.75ZM9.375 6.125C9.375 5.42881 9.65156 4.76113 10.1438 4.26884C10.6361 3.77656 11.3038 3.5 12 3.5C12.6962 3.5 13.3639 3.77656 13.8562 4.26884C14.3484 4.76113 14.625 5.42881 14.625 6.125V8.75H9.375V6.125ZM19.5 20.75H4.5V10.25H19.5V20.75Z" fill="#1A1A1A"/>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 11.75C11.3713 11.7524 10.7643 11.9805 10.2895 12.3926C9.81465 12.8048 9.50353 13.3736 9.41271 13.9958C9.32189 14.6179 9.45738 15.252 9.79456 15.7827C10.1317 16.3134 10.6482 16.7054 11.25 16.8875V18.5C11.25 18.6989 11.329 18.8897 11.4697 19.0303C11.6103 19.171 11.8011 19.25 12 19.25C12.1989 19.25 12.3897 19.171 12.5303 19.0303C12.671 18.8897 12.75 18.6989 12.75 18.5V16.8875C13.3518 16.7054 13.8683 16.3134 14.2054 15.7827C14.5426 15.252 14.6781 14.6179 14.5873 13.9958C14.4965 13.3736 14.1854 12.8048 13.7105 12.3926C13.2357 11.9805 12.6287 11.7524 12 11.75ZM12 15.5C11.7775 15.5 11.56 15.434 11.375 15.3104C11.19 15.1868 11.0458 15.0111 10.9606 14.8055C10.8755 14.6 10.8532 14.3738 10.8966 14.1555C10.94 13.9373 11.0472 13.7368 11.2045 13.5795C11.3618 13.4222 11.5623 13.315 11.7805 13.2716C11.9988 13.2282 12.225 13.2505 12.4305 13.3356C12.6361 13.4208 12.8118 13.565 12.9354 13.75C13.059 13.935 13.125 14.1525 13.125 14.375C13.125 14.6734 13.0065 14.9595 12.7955 15.1705C12.5845 15.3815 12.2984 15.5 12 15.5ZM19.5 8.75H16.125V6.125C16.125 5.03098 15.6904 3.98177 14.9168 3.20818C14.1432 2.4346 13.094 2 12 2C10.906 2 9.85677 2.4346 9.08318 3.20818C8.3096 3.98177 7.875 5.03098 7.875 6.125V8.75H4.5C4.10218 8.75 3.72064 8.90804 3.43934 9.18934C3.15804 9.47064 3 9.85218 3 10.25V20.75C3 21.1478 3.15804 21.5294 3.43934 21.8107C3.72064 22.092 4.10218 22.25 4.5 22.25H19.5C19.8978 22.25 20.2794 22.092 20.5607 21.8107C20.842 21.5294 21 21.1478 21 20.75V10.25C21 9.85218 20.842 9.47064 20.5607 9.18934C20.2794 8.90804 19.8978 8.75 19.5 8.75ZM9.375 6.125C9.375 5.42881 9.65156 4.76113 10.1438 4.26884C10.6361 3.77656 11.3038 3.5 12 3.5C12.6962 3.5 13.3639 3.77656 13.8562 4.26884C14.3484 4.76113 14.625 5.42881 14.625 6.125V8.75H9.375V6.125ZM19.5 20.75H4.5V10.25H19.5V20.75Z"
+      fill="#1A1A1A"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/IconMember.vue b/src/components/icons/IconMember.vue
index 2f0c159..c543b22 100644
--- a/src/components/icons/IconMember.vue
+++ b/src/components/icons/IconMember.vue
@@ -3,8 +3,17 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-  <svg width="40" height="40" viewBox="0 0 40 40" fill="black" xmlns="http://www.w3.org/2000/svg" id="iconMember">
-  <circle cx="20" cy="20" r="20" fill="white"/>
-  <path d="M40 20.0018C40.0001 16.6744 39.1701 13.3995 37.5852 10.4739C36.0004 7.5482 33.7107 5.06419 30.9236 3.24683C28.1365 1.42948 24.9401 0.336201 21.6239 0.0660405C18.3076 -0.20412 14.9764 0.357371 11.9319 1.69965C8.88748 3.04193 6.22597 5.12259 4.1885 7.75315C2.15104 10.3837 0.802001 13.481 0.263595 16.7646C-0.274811 20.0481 0.0144265 23.4141 1.10511 26.5577C2.19579 29.7012 4.05344 32.523 6.50981 34.7673L6.7451 34.9634C10.3981 38.208 15.1142 40 20 40C24.8858 40 29.6019 38.208 33.2549 34.9634L33.4902 34.7673C35.5431 32.8948 37.1826 30.6143 38.3035 28.0717C39.4245 25.5291 40.0023 22.7805 40 20.0018ZM2.35294 20.0018C2.349 17.1207 3.05046 14.2824 4.39604 11.7349C5.74163 9.18731 7.69042 7.00795 10.0722 5.38712C12.454 3.76629 15.1964 2.75327 18.0599 2.43653C20.9234 2.11979 23.8209 2.50896 26.4993 3.57007C29.1778 4.63117 31.5557 6.33193 33.4255 8.52381C35.2952 10.7157 36.6 13.332 37.2257 16.1444C37.8515 18.9567 37.7792 21.8795 37.0153 24.6574C36.2513 27.4354 34.8189 29.9841 32.8431 32.0809C30.9901 29.2141 28.2281 27.0527 25 25.9433C26.6114 24.8699 27.8347 23.3065 28.489 21.4841C29.1433 19.6617 29.1938 17.6772 28.6331 15.8239C28.0725 13.9706 26.9303 12.3469 25.3756 11.1929C23.8209 10.0389 21.9362 9.41584 20 9.41584C18.0638 9.41584 16.1791 10.0389 14.6244 11.1929C13.0697 12.3469 11.9275 13.9706 11.3669 15.8239C10.8062 17.6772 10.8567 19.6617 11.511 21.4841C12.1653 23.3065 13.3886 24.8699 15 25.9433C11.7719 27.0527 9.00992 29.2141 7.15686 32.0809C4.06852 28.8179 2.34915 24.4947 2.35294 20.0018ZM13.3333 18.433C13.3333 17.1144 13.7243 15.8254 14.4569 14.729C15.1894 13.6326 16.2306 12.7781 17.4488 12.2735C18.667 11.7689 20.0074 11.6369 21.3006 11.8941C22.5938 12.1514 23.7817 12.7863 24.714 13.7187C25.6464 14.6511 26.2813 15.8391 26.5386 17.1324C26.7958 18.4256 26.6638 19.7662 26.1592 20.9844C25.6546 22.2027 24.8001 23.2439 23.7038 23.9765C22.6075 24.7091 21.3185 25.1001 20 25.1001C18.2335 25.0949 16.5408 24.3908 15.2917 23.1416C14.0425 21.8925 13.3385 20.1997 13.3333 18.433ZM8.90196 33.728C10.0553 31.8159 11.6831 30.2342 13.6275 29.1362C15.5719 28.0383 17.767 27.4613 20 27.4613C22.233 27.4613 24.428 28.0383 26.3725 29.1362C28.3169 30.2342 29.9447 31.8159 31.098 33.728C27.9556 36.2653 24.0388 37.6492 20 37.6492C15.9612 37.6492 12.0444 36.2653 8.90196 33.728Z"/>
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="black"
+    xmlns="http://www.w3.org/2000/svg"
+    id="iconMember"
+  >
+    <circle cx="20" cy="20" r="20" fill="white" />
+    <path
+      d="M40 20.0018C40.0001 16.6744 39.1701 13.3995 37.5852 10.4739C36.0004 7.5482 33.7107 5.06419 30.9236 3.24683C28.1365 1.42948 24.9401 0.336201 21.6239 0.0660405C18.3076 -0.20412 14.9764 0.357371 11.9319 1.69965C8.88748 3.04193 6.22597 5.12259 4.1885 7.75315C2.15104 10.3837 0.802001 13.481 0.263595 16.7646C-0.274811 20.0481 0.0144265 23.4141 1.10511 26.5577C2.19579 29.7012 4.05344 32.523 6.50981 34.7673L6.7451 34.9634C10.3981 38.208 15.1142 40 20 40C24.8858 40 29.6019 38.208 33.2549 34.9634L33.4902 34.7673C35.5431 32.8948 37.1826 30.6143 38.3035 28.0717C39.4245 25.5291 40.0023 22.7805 40 20.0018ZM2.35294 20.0018C2.349 17.1207 3.05046 14.2824 4.39604 11.7349C5.74163 9.18731 7.69042 7.00795 10.0722 5.38712C12.454 3.76629 15.1964 2.75327 18.0599 2.43653C20.9234 2.11979 23.8209 2.50896 26.4993 3.57007C29.1778 4.63117 31.5557 6.33193 33.4255 8.52381C35.2952 10.7157 36.6 13.332 37.2257 16.1444C37.8515 18.9567 37.7792 21.8795 37.0153 24.6574C36.2513 27.4354 34.8189 29.9841 32.8431 32.0809C30.9901 29.2141 28.2281 27.0527 25 25.9433C26.6114 24.8699 27.8347 23.3065 28.489 21.4841C29.1433 19.6617 29.1938 17.6772 28.6331 15.8239C28.0725 13.9706 26.9303 12.3469 25.3756 11.1929C23.8209 10.0389 21.9362 9.41584 20 9.41584C18.0638 9.41584 16.1791 10.0389 14.6244 11.1929C13.0697 12.3469 11.9275 13.9706 11.3669 15.8239C10.8062 17.6772 10.8567 19.6617 11.511 21.4841C12.1653 23.3065 13.3886 24.8699 15 25.9433C11.7719 27.0527 9.00992 29.2141 7.15686 32.0809C4.06852 28.8179 2.34915 24.4947 2.35294 20.0018ZM13.3333 18.433C13.3333 17.1144 13.7243 15.8254 14.4569 14.729C15.1894 13.6326 16.2306 12.7781 17.4488 12.2735C18.667 11.7689 20.0074 11.6369 21.3006 11.8941C22.5938 12.1514 23.7817 12.7863 24.714 13.7187C25.6464 14.6511 26.2813 15.8391 26.5386 17.1324C26.7958 18.4256 26.6638 19.7662 26.1592 20.9844C25.6546 22.2027 24.8001 23.2439 23.7038 23.9765C22.6075 24.7091 21.3185 25.1001 20 25.1001C18.2335 25.0949 16.5408 24.3908 15.2917 23.1416C14.0425 21.8925 13.3385 20.1997 13.3333 18.433ZM8.90196 33.728C10.0553 31.8159 11.6831 30.2342 13.6275 29.1362C15.5719 28.0383 17.767 27.4613 20 27.4613C22.233 27.4613 24.428 28.0383 26.3725 29.1362C28.3169 30.2342 29.9447 31.8159 31.098 33.728C27.9556 36.2653 24.0388 37.6492 20 37.6492C15.9612 37.6492 12.0444 36.2653 8.90196 33.728Z"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/IconNA.vue b/src/components/icons/IconNA.vue
index d5616b4..6328a50 100644
--- a/src/components/icons/IconNA.vue
+++ b/src/components/icons/IconNA.vue
@@ -3,24 +3,72 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="16" height="16" viewBox="3 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_4086_5522)">
-<path d="M10.0359 5.48491V10.4086H9.0885L7.18616 7.30519L6.70871 6.43235H6.70125L6.73109 7.23058V10.4086H6V5.48491H6.93998L8.83486 8.58087L9.31977 9.46863H9.32723L9.29739 8.66293V5.48491H10.0359Z" fill="white"/>
-<path d="M13.7426 5L11.5195 10.9308H10.7735L12.9966 5H13.7426Z" fill="white"/>
-<path d="M18 10.4086H17.157L16.687 9.118H14.6206L14.1506 10.4086H13.3299L15.1875 5.48491H16.1424L18 10.4086ZM14.8444 8.46897H16.4632L15.6575 6.17124L14.8444 8.46897Z" fill="white"/>
-<rect x="4" y="0.2" width="16" height="16" rx="8" stroke="white" shape-rendering="geometricPrecision"/>
-</g>
-<defs>
-<filter id="filter0_d_4086_5522" x="0" y="0" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4086_5522"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4086_5522" result="shape"/>
-</filter>
-</defs>
-</svg>
+  <svg
+    width="16"
+    height="16"
+    viewBox="3 0 20 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g filter="url(#filter0_d_4086_5522)">
+      <path
+        d="M10.0359 5.48491V10.4086H9.0885L7.18616 7.30519L6.70871 6.43235H6.70125L6.73109 7.23058V10.4086H6V5.48491H6.93998L8.83486 8.58087L9.31977 9.46863H9.32723L9.29739 8.66293V5.48491H10.0359Z"
+        fill="white"
+      />
+      <path
+        d="M13.7426 5L11.5195 10.9308H10.7735L12.9966 5H13.7426Z"
+        fill="white"
+      />
+      <path
+        d="M18 10.4086H17.157L16.687 9.118H14.6206L14.1506 10.4086H13.3299L15.1875 5.48491H16.1424L18 10.4086ZM14.8444 8.46897H16.4632L15.6575 6.17124L14.8444 8.46897Z"
+        fill="white"
+      />
+      <rect
+        x="4"
+        y="0.2"
+        width="16"
+        height="16"
+        rx="8"
+        stroke="white"
+        shape-rendering="geometricPrecision"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_4086_5522"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="4" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_4086_5522"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_4086_5522"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
 </template>
diff --git a/src/components/icons/IconRule.vue b/src/components/icons/IconRule.vue
index 6e78ace..9bccf51 100644
--- a/src/components/icons/IconRule.vue
+++ b/src/components/icons/IconRule.vue
@@ -3,8 +3,17 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 16H22V18H10V16ZM10 10H22V12H10V10Z" fill="#191C21"/>
-<path d="M16 30L9.82401 26.707C8.06334 25.7703 6.59097 24.3719 5.56493 22.6617C4.53888 20.9516 3.99789 18.9943 4.00001 17V4C4.00054 3.46973 4.21142 2.96133 4.58638 2.58637C4.96134 2.21141 5.46974 2.00053 6.00001 2H26C26.5303 2.00053 27.0387 2.21141 27.4136 2.58637C27.7886 2.96133 27.9995 3.46973 28 4V17C28.0021 18.9943 27.4611 20.9516 26.4351 22.6617C25.409 24.3719 23.9367 25.7703 22.176 26.707L16 30ZM6.00001 4V17C5.99835 18.6318 6.44111 20.2333 7.28077 21.6325C8.12043 23.0317 9.32528 24.1758 10.766 24.942L16 27.733L21.234 24.943C22.6749 24.1767 23.8798 23.0324 24.7195 21.633C25.5592 20.2336 26.0018 18.632 26 17V4H6.00001Z" fill="#191C21"/>
-</svg>
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M10 16H22V18H10V16ZM10 10H22V12H10V10Z" fill="#191C21" />
+    <path
+      d="M16 30L9.82401 26.707C8.06334 25.7703 6.59097 24.3719 5.56493 22.6617C4.53888 20.9516 3.99789 18.9943 4.00001 17V4C4.00054 3.46973 4.21142 2.96133 4.58638 2.58637C4.96134 2.21141 5.46974 2.00053 6.00001 2H26C26.5303 2.00053 27.0387 2.21141 27.4136 2.58637C27.7886 2.96133 27.9995 3.46973 28 4V17C28.0021 18.9943 27.4611 20.9516 26.4351 22.6617C25.409 24.3719 23.9367 25.7703 22.176 26.707L16 30ZM6.00001 4V17C5.99835 18.6318 6.44111 20.2333 7.28077 21.6325C8.12043 23.0317 9.32528 24.1758 10.766 24.942L16 27.733L21.234 24.943C22.6749 24.1767 23.8798 23.0324 24.7195 21.633C25.5592 20.2336 26.0018 18.632 26 17V4H6.00001Z"
+      fill="#191C21"
+    />
+  </svg>
 </template>
diff --git a/src/components/icons/IconSearch.vue b/src/components/icons/IconSearch.vue
index 9fb4a17..2aa9fc5 100644
--- a/src/components/icons/IconSearch.vue
+++ b/src/components/icons/IconSearch.vue
@@ -3,8 +3,26 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5 19C15.1944 19 19 15.1944 19 10.5C19 5.80558 15.1944 2 10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19Z" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M21 21L17 17" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.5 19C15.1944 19 19 15.1944 19 10.5C19 5.80558 15.1944 2 10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19Z"
+      stroke="#4E5969"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21 21L17 17"
+      stroke="#4E5969"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
 </template>
diff --git a/src/components/icons/IconSetting.vue b/src/components/icons/IconSetting.vue
index 0226992..1b6de4b 100644
--- a/src/components/icons/IconSetting.vue
+++ b/src/components/icons/IconSetting.vue
@@ -3,7 +3,16 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.5 6H19.425C19.05 4.275 17.55 3 15.75 3C13.95 3 12.45 4.275 12.075 6H1.5V7.5H12.075C12.45 9.225 13.95 10.5 15.75 10.5C17.55 10.5 19.05 9.225 19.425 7.5H22.5V6ZM15.75 9C14.475 9 13.5 8.025 13.5 6.75C13.5 5.475 14.475 4.5 15.75 4.5C17.025 4.5 18 5.475 18 6.75C18 8.025 17.025 9 15.75 9ZM1.5 18H4.575C4.95 19.725 6.45 21 8.25 21C10.05 21 11.55 19.725 11.925 18H22.5V16.5H11.925C11.55 14.775 10.05 13.5 8.25 13.5C6.45 13.5 4.95 14.775 4.575 16.5H1.5V18ZM8.25 15C9.525 15 10.5 15.975 10.5 17.25C10.5 18.525 9.525 19.5 8.25 19.5C6.975 19.5 6 18.525 6 17.25C6 15.975 6.975 15 8.25 15Z" fill="#64748B"/>
-</svg>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22.5 6H19.425C19.05 4.275 17.55 3 15.75 3C13.95 3 12.45 4.275 12.075 6H1.5V7.5H12.075C12.45 9.225 13.95 10.5 15.75 10.5C17.55 10.5 19.05 9.225 19.425 7.5H22.5V6ZM15.75 9C14.475 9 13.5 8.025 13.5 6.75C13.5 5.475 14.475 4.5 15.75 4.5C17.025 4.5 18 5.475 18 6.75C18 8.025 17.025 9 15.75 9ZM1.5 18H4.575C4.95 19.725 6.45 21 8.25 21C10.05 21 11.55 19.725 11.925 18H22.5V16.5H11.925C11.55 14.775 10.05 13.5 8.25 13.5C6.45 13.5 4.95 14.775 4.575 16.5H1.5V18ZM8.25 15C9.525 15 10.5 15.975 10.5 17.25C10.5 18.525 9.525 19.5 8.25 19.5C6.975 19.5 6 18.525 6 17.25C6 15.975 6.975 15 8.25 15Z"
+      fill="#64748B"
+    />
+  </svg>
 </template>
diff --git a/src/components/icons/IconUploarding.vue b/src/components/icons/IconUploarding.vue
index 7e25c32..c9f5fa0 100644
--- a/src/components/icons/IconUploarding.vue
+++ b/src/components/icons/IconUploarding.vue
@@ -3,14 +3,23 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+  >
     <g clip-path="url(#clip0_2395_2657)">
-      <circle cx="32" cy="32" r="30" fill="#0099FF"/>
-      <path d="M33.7678 22.2322C32.7915 21.2559 31.2085 21.2559 30.2322 22.2322L14.3223 38.1421C13.346 39.1185 13.346 40.7014 14.3223 41.6777C15.2986 42.654 16.8816 42.654 17.8579 41.6777L32 27.5355L46.1421 41.6777C47.1185 42.654 48.7014 42.654 49.6777 41.6777C50.654 40.7014 50.654 39.1184 49.6777 38.1421L33.7678 22.2322ZM29.5 64C29.5 65.3807 30.6193 66.5 32 66.5C33.3807 66.5 34.5 65.3807 34.5 64H29.5ZM29.5 24L29.5 64H34.5L34.5 24L29.5 24Z" fill="white"/>
+      <circle cx="32" cy="32" r="30" fill="#0099FF" />
+      <path
+        d="M33.7678 22.2322C32.7915 21.2559 31.2085 21.2559 30.2322 22.2322L14.3223 38.1421C13.346 39.1185 13.346 40.7014 14.3223 41.6777C15.2986 42.654 16.8816 42.654 17.8579 41.6777L32 27.5355L46.1421 41.6777C47.1185 42.654 48.7014 42.654 49.6777 41.6777C50.654 40.7014 50.654 39.1184 49.6777 38.1421L33.7678 22.2322ZM29.5 64C29.5 65.3807 30.6193 66.5 32 66.5C33.3807 66.5 34.5 65.3807 34.5 64H29.5ZM29.5 24L29.5 64H34.5L34.5 24L29.5 24Z"
+        fill="white"
+      />
     </g>
     <defs>
       <clipPath id="clip0_2395_2657">
-        <rect width="64" height="64" fill="white"/>
+        <rect width="64" height="64" fill="white" />
       </clipPath>
     </defs>
   </svg>
diff --git a/src/components/icons/IconVector.vue b/src/components/icons/IconVector.vue
index 2ab9b6f..14e498e 100644
--- a/src/components/icons/IconVector.vue
+++ b/src/components/icons/IconVector.vue
@@ -3,7 +3,15 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="16" height="16" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.9999 16C7.71657 16 7.47924 15.904 7.2879 15.712C7.0959 15.5207 6.9999 15.2833 6.9999 15V3.82499L2.1249 8.69999C1.9249 8.89999 1.68724 8.99999 1.4119 8.99999C1.13724 8.99999 0.899902 8.89999 0.699902 8.69999C0.499902 8.49999 0.399902 8.26665 0.399902 7.99999C0.399902 7.73332 0.499902 7.49999 0.699902 7.29999L7.2999 0.699987C7.3999 0.599987 7.50824 0.528988 7.6249 0.486988C7.74157 0.445654 7.86657 0.424988 7.9999 0.424988C8.13324 0.424988 8.26257 0.445654 8.3879 0.486988C8.51257 0.528988 8.61657 0.599987 8.6999 0.699987L15.2999 7.29999C15.4999 7.49999 15.5999 7.73332 15.5999 7.99999C15.5999 8.26665 15.4999 8.49999 15.2999 8.69999C15.0999 8.89999 14.8622 8.99999 14.5869 8.99999C14.3122 8.99999 14.0749 8.89999 13.8749 8.69999L8.9999 3.82499V15C8.9999 15.2833 8.90424 15.5207 8.7129 15.712C8.5209 15.904 8.28324 16 7.9999 16Z"/>
-</svg>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="black"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.9999 16C7.71657 16 7.47924 15.904 7.2879 15.712C7.0959 15.5207 6.9999 15.2833 6.9999 15V3.82499L2.1249 8.69999C1.9249 8.89999 1.68724 8.99999 1.4119 8.99999C1.13724 8.99999 0.899902 8.89999 0.699902 8.69999C0.499902 8.49999 0.399902 8.26665 0.399902 7.99999C0.399902 7.73332 0.499902 7.49999 0.699902 7.29999L7.2999 0.699987C7.3999 0.599987 7.50824 0.528988 7.6249 0.486988C7.74157 0.445654 7.86657 0.424988 7.9999 0.424988C8.13324 0.424988 8.26257 0.445654 8.3879 0.486988C8.51257 0.528988 8.61657 0.599987 8.6999 0.699987L15.2999 7.29999C15.4999 7.49999 15.5999 7.73332 15.5999 7.99999C15.5999 8.26665 15.4999 8.49999 15.2999 8.69999C15.0999 8.89999 14.8622 8.99999 14.5869 8.99999C14.3122 8.99999 14.0749 8.89999 13.8749 8.69999L8.9999 3.82499V15C8.9999 15.2833 8.90424 15.5207 8.7129 15.712C8.5209 15.904 8.28324 16 7.9999 16Z"
+    />
+  </svg>
 </template>
diff --git a/src/components/icons/IconWarnTriangle.vue b/src/components/icons/IconWarnTriangle.vue
index 12346dc..b81e42a 100644
--- a/src/components/icons/IconWarnTriangle.vue
+++ b/src/components/icons/IconWarnTriangle.vue
@@ -3,7 +3,18 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.78488 2.03878C9.62343 1.72766 9.37026 1.46508 9.05455 1.28129C8.73885 1.09751 8.37345 1 8.00047 1C7.62748 1 7.26209 1.09751 6.94638 1.28129C6.63068 1.46508 6.37751 1.72766 6.21605 2.03878L0.521086 12.4048C-0.160262 13.6423 0.70072 15.2857 2.3048 15.2857H13.6954C15.3002 15.2857 16.1598 13.643 15.4799 12.4048L9.78488 2.03878ZM8.00047 5.54628C8.18657 5.54628 8.36505 5.61468 8.49664 5.73645C8.62824 5.85822 8.70216 6.02337 8.70216 6.19557V9.44205C8.70216 9.61425 8.62824 9.77941 8.49664 9.90117C8.36505 10.0229 8.18657 10.0913 8.00047 10.0913C7.81437 10.0913 7.63589 10.0229 7.50429 9.90117C7.3727 9.77941 7.29877 9.61425 7.29877 9.44205V6.19557C7.29877 6.02337 7.3727 5.85822 7.50429 5.73645C7.63589 5.61468 7.81437 5.54628 8.00047 5.54628ZM8.00047 11.0653C8.18657 11.0653 8.36505 11.1337 8.49664 11.2555C8.62824 11.3772 8.70216 11.5424 8.70216 11.7146V12.0392C8.70216 12.2114 8.62824 12.3766 8.49664 12.4984C8.36505 12.6201 8.18657 12.6885 8.00047 12.6885C7.81437 12.6885 7.63589 12.6201 7.50429 12.4984C7.3727 12.3766 7.29877 12.2114 7.29877 12.0392V11.7146C7.29877 11.5424 7.3727 11.3772 7.50429 11.2555C7.63589 11.1337 7.81437 11.0653 8.00047 11.0653Z" fill="#FF3366"/>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.78488 2.03878C9.62343 1.72766 9.37026 1.46508 9.05455 1.28129C8.73885 1.09751 8.37345 1 8.00047 1C7.62748 1 7.26209 1.09751 6.94638 1.28129C6.63068 1.46508 6.37751 1.72766 6.21605 2.03878L0.521086 12.4048C-0.160262 13.6423 0.70072 15.2857 2.3048 15.2857H13.6954C15.3002 15.2857 16.1598 13.643 15.4799 12.4048L9.78488 2.03878ZM8.00047 5.54628C8.18657 5.54628 8.36505 5.61468 8.49664 5.73645C8.62824 5.85822 8.70216 6.02337 8.70216 6.19557V9.44205C8.70216 9.61425 8.62824 9.77941 8.49664 9.90117C8.36505 10.0229 8.18657 10.0913 8.00047 10.0913C7.81437 10.0913 7.63589 10.0229 7.50429 9.90117C7.3727 9.77941 7.29877 9.61425 7.29877 9.44205V6.19557C7.29877 6.02337 7.3727 5.85822 7.50429 5.73645C7.63589 5.61468 7.81437 5.54628 8.00047 5.54628ZM8.00047 11.0653C8.18657 11.0653 8.36505 11.1337 8.49664 11.2555C8.62824 11.3772 8.70216 11.5424 8.70216 11.7146V12.0392C8.70216 12.2114 8.62824 12.3766 8.49664 12.4984C8.36505 12.6201 8.18657 12.6885 8.00047 12.6885C7.81437 12.6885 7.63589 12.6201 7.50429 12.4984C7.3727 12.3766 7.29877 12.2114 7.29877 12.0392V11.7146C7.29877 11.5424 7.3727 11.3772 7.50429 11.2555C7.63589 11.1337 7.81437 11.0653 8.00047 11.0653Z"
+      fill="#FF3366"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/IconsFilter.vue b/src/components/icons/IconsFilter.vue
index 1d26481..604db0d 100644
--- a/src/components/icons/IconsFilter.vue
+++ b/src/components/icons/IconsFilter.vue
@@ -3,8 +3,26 @@
      Authors:
        chiayin.kuo@dsp.im (chiayin), 2023/1/31 -->
 <template>
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 9.33333C22.6274 9.33333 28 8.13943 28 6.66667C28 5.19391 22.6274 4 16 4C9.37258 4 4 5.19391 4 6.66667C4 8.13943 9.37258 9.33333 16 9.33333Z" stroke="#191C21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 6.66666C4 9.63999 9.16133 15.5653 11.808 18.4067C12.7789 19.4358 13.3239 20.7945 13.3333 22.2093V25.3333C13.3333 26.0406 13.6143 26.7188 14.1144 27.2189C14.6145 27.719 15.2928 28 16 28C16.7072 28 17.3855 27.719 17.8856 27.2189C18.3857 26.7188 18.6667 26.0406 18.6667 25.3333V22.2093C18.6667 20.7947 19.228 19.4427 20.192 18.4067C22.84 15.5653 28 9.64132 28 6.66666" stroke="#191C21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16 9.33333C22.6274 9.33333 28 8.13943 28 6.66667C28 5.19391 22.6274 4 16 4C9.37258 4 4 5.19391 4 6.66667C4 8.13943 9.37258 9.33333 16 9.33333Z"
+      stroke="#191C21"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 6.66666C4 9.63999 9.16133 15.5653 11.808 18.4067C12.7789 19.4358 13.3239 20.7945 13.3333 22.2093V25.3333C13.3333 26.0406 13.6143 26.7188 14.1144 27.2189C14.6145 27.719 15.2928 28 16 28C16.7072 28 17.3855 27.719 17.8856 27.2189C18.3857 26.7188 18.6667 26.0406 18.6667 25.3333V22.2093C18.6667 20.7947 19.228 19.4427 20.192 18.4067C22.84 15.5653 28 9.64132 28 6.66666"
+      stroke="#191C21"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
 </template>
diff --git a/src/constants/constants.js b/src/constants/constants.js
index e6ef44e..cd7e897 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -14,19 +14,19 @@ export const ONCE_RENDER_NUM_OF_DATA = 9;
 export const PWD_VALID_LENGTH = 6;
 
 /** @constant {string} Default grid line color (Tailwind slate-500). */
-export const GRID_COLOR = '#64748b';
+export const GRID_COLOR = "#64748b";
 
 /** @constant {string} Modal type for creating a new account. */
-export const MODAL_CREATE_NEW = 'MODAL_CREATE_NEW';
+export const MODAL_CREATE_NEW = "MODAL_CREATE_NEW";
 /** @constant {string} Modal type for editing an account. */
-export const MODAL_ACCT_EDIT = 'MODAL_ACCT_EDIT';
+export const MODAL_ACCT_EDIT = "MODAL_ACCT_EDIT";
 /** @constant {string} Modal type for viewing account info. */
-export const MODAL_ACCT_INFO = 'MODAL_ACCT_INFO';
+export const MODAL_ACCT_INFO = "MODAL_ACCT_INFO";
 /** @constant {string} Modal type for deleting an account. */
-export const MODAL_DELETE = 'MODAL_DELETE';
+export const MODAL_DELETE = "MODAL_DELETE";
 
 /** @constant {string} LocalStorage key for saved Cytoscape node positions. */
-export const SAVE_KEY_NAME = 'CYTOSCAPE_NODE_POSITION';
+export const SAVE_KEY_NAME = "CYTOSCAPE_NODE_POSITION";
 
 /** @constant {number} Duration (minutes) to highlight newly created accounts. */
 export const JUST_CREATE_ACCOUNT_HOT_DURATION_MINS = 2;
@@ -36,171 +36,171 @@ export const JUST_CREATE_ACCOUNT_HOT_DURATION_MINS = 2;
  *   process insights (self-loops, short-loops, traces).
  */
 export const INSIGHTS_FIELDS_AND_LABELS = [
-    ['self_loops', 'Self-Loop'],
-    ['short_loops', 'Short-Loop'],
-    ['shortest_traces', 'Shortest Trace'],
-    ['longest_traces', 'Longest Trace'],
-    ['most_freq_traces', 'Most Frequent Trace'],
-  ];
+  ["self_loops", "Self-Loop"],
+  ["short_loops", "Short-Loop"],
+  ["shortest_traces", "Shortest Trace"],
+  ["longest_traces", "Longest Trace"],
+  ["most_freq_traces", "Most Frequent Trace"],
+];
 
 /** @constant {Object} Default Chart.js layout padding options. */
 export const knownLayoutChartOption = {
-    padding: {
-      top: 16,
-      left: 8,
-      right: 8,
-    }
+  padding: {
+    top: 16,
+    left: 8,
+    right: 8,
+  },
 };
 
 /** @constant {Object} Default Chart.js scale options for line charts. */
-export const knownScaleLineChartOptions =  {
-x: {
-    type: 'time',
+export const knownScaleLineChartOptions = {
+  x: {
+    type: "time",
     title: {
-    display: true,
-    color: '#334155',
-    font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
-    }
+        lineHeight: 2,
+      },
     },
     time: {
-    displayFormats: {
-        second: 'h:mm:ss', // ex: 1:11:11
-        minute: 'M/d h:mm', // ex: 1/1 1:11
-        hour: 'M/d h:mm', // ex: 1/1 1:11
-        day: 'M/d h', // ex: 1/1 1
-        month: 'y/M/d', // ex: 1911/1/1
-    },
+      displayFormats: {
+        second: "h:mm:ss", // ex: 1:11:11
+        minute: "M/d h:mm", // ex: 1/1 1:11
+        hour: "M/d h:mm", // ex: 1/1 1:11
+        day: "M/d h", // ex: 1/1 1
+        month: "y/M/d", // ex: 1911/1/1
+      },
     },
     ticks: {
-    display: true,
-    maxRotation: 0, // Do not rotate labels (range 0~50)
-    color: '#64748b',
-    source: 'labels', // Proportionally display the number of labels
+      display: true,
+      maxRotation: 0, // Do not rotate labels (range 0~50)
+      color: "#64748b",
+      source: "labels", // Proportionally display the number of labels
     },
     border: {
-    color: '#64748b',
+      color: "#64748b",
     },
     grid: {
-    tickLength: 0, // Whether grid lines extend beyond the axis
-    }
-},
-y: {
+      tickLength: 0, // Whether grid lines extend beyond the axis
+    },
+  },
+  y: {
     beginAtZero: true, // Scale includes 0
     title: {
-    display: true,
-    color: '#334155',
-    font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
+        lineHeight: 2,
+      },
     },
-    },
-    ticks:{
-    color: '#64748b',
-    padding: 8,
+    ticks: {
+      color: "#64748b",
+      padding: 8,
     },
     grid: {
-    color: '#64748b',
+      color: "#64748b",
     },
     border: {
-    display: false, // Hide the extra line on the left side
+      display: false, // Hide the extra line on the left side
     },
-},
+  },
 };
 /** @constant {Object} Default Chart.js scale options for horizontal charts. */
 export const knownScaleHorizontalChartOptions = {
-x: {
+  x: {
     title: {
-    display: true,
-    color: '#334155',
-    font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
-    }
+        lineHeight: 2,
+      },
     },
     ticks: {
-    display: true,
-    maxRotation: 0, // Do not rotate labels (range 0~50)
-    color: '#64748b',
+      display: true,
+      maxRotation: 0, // Do not rotate labels (range 0~50)
+      color: "#64748b",
     },
     grid: {
-    color: '#64748b',
-    tickLength: 0, // Whether grid lines extend beyond the axis
+      color: "#64748b",
+      tickLength: 0, // Whether grid lines extend beyond the axis
     },
     border: {
-    display:false,
+      display: false,
     },
-},
-y: {
+  },
+  y: {
     beginAtZero: true, // Scale includes 0
-    type: 'category',
+    type: "category",
     title: {
-    display: true,
-    color: '#334155',
-    font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
+        lineHeight: 2,
+      },
     },
-    },
-    ticks:{
-    color: '#64748b',
-    padding: 8,
+    ticks: {
+      color: "#64748b",
+      padding: 8,
     },
     grid: {
-    display:false,
-    color: '#64748b',
+      display: false,
+      color: "#64748b",
     },
     border: {
-    display: false, // Hide the extra line on the left side
+      display: false, // Hide the extra line on the left side
     },
-},
+  },
 };
 /** @constant {Object} Default Chart.js scale options for bar charts. */
 export const knownScaleBarChartOptions = {
-x: {
+  x: {
     title: {
-        display: true,
-        color: '#334155',
-        font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
-        }
+        lineHeight: 2,
+      },
     },
     ticks: {
-        display: true,
-        maxRotation: 0, // Do not rotate labels (range 0~50)
-        color: '#64748b',
+      display: true,
+      maxRotation: 0, // Do not rotate labels (range 0~50)
+      color: "#64748b",
     },
     grid: {
-        color: '#64748b',
-        tickLength: 0, // Whether grid lines extend beyond the axis
+      color: "#64748b",
+      tickLength: 0, // Whether grid lines extend beyond the axis
     },
     border: {
-        display:false,
+      display: false,
     },
-    },
-    y: {
+  },
+  y: {
     beginAtZero: true, // Scale includes 0
-    type: 'category',
+    type: "category",
     title: {
-        display: true,
-        color: '#334155',
-        font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
-        },
+        lineHeight: 2,
+      },
     },
-    ticks:{
-        color: '#64748b',
-        padding: 8,
+    ticks: {
+      color: "#64748b",
+      padding: 8,
     },
     grid: {
-        display:false,
-        color: '#64748b',
+      display: false,
+      color: "#64748b",
     },
     border: {
-        display: false, // Hide the extra line on the left side
+      display: false, // Hide the extra line on the left side
     },
-    },
-};
\ No newline at end of file
+  },
+};
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
index 1787d92..3ec5e94 100644
--- a/src/i18n/i18n.js
+++ b/src/i18n/i18n.js
@@ -9,24 +9,21 @@
  *   with browser language detection.
  */
 
-import i18next from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import enLocale from './en.json';
+import i18next from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import enLocale from "./en.json";
 
-
-i18next
-  .use(LanguageDetector)
-  .init({
-    resources: {
-      en: {
-        translation: enLocale
-      },
+i18next.use(LanguageDetector).init({
+  resources: {
+    en: {
+      translation: enLocale,
     },
-    fallbackLng: 'en',
-    detection: {
-      order: ['localStorage', 'navigator'],
-      caches: ['localStorage']
-    },
-  });
+  },
+  fallbackLng: "en",
+  detection: {
+    order: ["localStorage", "navigator"],
+    caches: ["localStorage"],
+  },
+});
 
-export default i18next;
\ No newline at end of file
+export default i18next;
diff --git a/src/main.ts b/src/main.ts
index 80e385f..c950111 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,45 +14,45 @@ import { createApp, markRaw } from "vue";
 
 import App from "./App.vue";
 import router from "./router";
-import pinia from '@/stores/main';
-import ToastPlugin from 'vue-toast-notification';
-import cytoscape from 'cytoscape';
-import dagre from 'cytoscape-dagre';
-import popper from 'cytoscape-popper';
-import draggable from 'vuedraggable';
-import VueSweetalert2 from 'vue-sweetalert2';
+import pinia from "@/stores/main";
+import ToastPlugin from "vue-toast-notification";
+import cytoscape from "cytoscape";
+import dagre from "cytoscape-dagre";
+import popper from "cytoscape-popper";
+import draggable from "vuedraggable";
+import VueSweetalert2 from "vue-sweetalert2";
 
 // import CSS
 import "./assets/main.css";
-import 'vue-toast-notification/dist/theme-sugar.css';
-import 'sweetalert2/dist/sweetalert2.min.css';
+import "vue-toast-notification/dist/theme-sugar.css";
+import "sweetalert2/dist/sweetalert2.min.css";
 
 // import PrimeVue
-import PrimeVue from 'primevue/config';
-import Aura from '@primevue/themes/aura';
-import 'primeicons/primeicons.css'; //icons
-import Sidebar from 'primevue/sidebar';
-import Dropdown from 'primevue/dropdown';
-import Tag from 'primevue/tag';
-import ProgressBar from 'primevue/progressbar';
-import TabView from 'primevue/tabview';
-import TabPanel from 'primevue/tabpanel';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import ColumnGroup from 'primevue/columngroup';   // optional
-import Row from 'primevue/row';   // optional
-import RadioButton from 'primevue/radiobutton';
-import Timeline from 'primevue/timeline';
-import InputSwitch from 'primevue/inputswitch';
-import InputNumber from 'primevue/inputnumber';
-import InputText from 'primevue/inputtext';
-import Chart from 'primevue/chart';
-import Slider from 'primevue/slider';
-import Calendar from 'primevue/calendar';
-import Tooltip from 'primevue/tooltip';
-import Checkbox from 'primevue/checkbox';
-import Dialog from 'primevue/dialog';
-import ContextMenu from 'primevue/contextmenu';
+import PrimeVue from "primevue/config";
+import Aura from "@primevue/themes/aura";
+import "primeicons/primeicons.css"; //icons
+import Sidebar from "primevue/sidebar";
+import Dropdown from "primevue/dropdown";
+import Tag from "primevue/tag";
+import ProgressBar from "primevue/progressbar";
+import TabView from "primevue/tabview";
+import TabPanel from "primevue/tabpanel";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import ColumnGroup from "primevue/columngroup"; // optional
+import Row from "primevue/row"; // optional
+import RadioButton from "primevue/radiobutton";
+import Timeline from "primevue/timeline";
+import InputSwitch from "primevue/inputswitch";
+import InputNumber from "primevue/inputnumber";
+import InputText from "primevue/inputtext";
+import Chart from "primevue/chart";
+import Slider from "primevue/slider";
+import Calendar from "primevue/calendar";
+import Tooltip from "primevue/tooltip";
+import Checkbox from "primevue/checkbox";
+import Dialog from "primevue/dialog";
+import ContextMenu from "primevue/contextmenu";
 
 const app = createApp(App);
 
@@ -62,39 +62,40 @@ pinia.use(({ store }) => {
 });
 
 // Cytoscape.js's style
-cytoscape.use( dagre );
-cytoscape.use( popper((ref) => ref) );
+cytoscape.use(dagre);
+cytoscape.use(popper((ref) => ref));
 
 app.use(pinia);
 app.use(router);
 app.use(VueSweetalert2);
-app.use(ToastPlugin, { // use `this.$toast` in Vue.js
-  position: 'bottom',
+app.use(ToastPlugin, {
+  // use `this.$toast` in Vue.js
+  position: "bottom",
   duration: 5000,
 });
 app.use(PrimeVue, { theme: { preset: Aura } });
-app.component('Sidebar', Sidebar);
-app.component('Dropdown', Dropdown);
-app.component('Tag', Tag);
-app.component('ProgressBar', ProgressBar);
-app.component('TabView', TabView);
-app.component('TabPanel', TabPanel);
-app.component('DataTable', DataTable);
-app.component('Column', Column);
-app.component('ColumnGroup', ColumnGroup);
-app.component('Row', Row);
-app.component('RadioButton', RadioButton);
-app.component('Timeline', Timeline);
-app.component('InputSwitch', InputSwitch);
-app.component('InputNumber', InputNumber);
-app.component('InputText', InputText);
-app.component('Chart', Chart);
-app.component('Slider', Slider);
-app.component('Calendar', Calendar);
-app.component('Checkbox', Checkbox);
-app.component('Dialog', Dialog);
-app.component('ContextMenu', ContextMenu);
-app.component('Draggable', draggable);  // Drag and drop
-app.directive('tooltip', Tooltip);
+app.component("Sidebar", Sidebar);
+app.component("Dropdown", Dropdown);
+app.component("Tag", Tag);
+app.component("ProgressBar", ProgressBar);
+app.component("TabView", TabView);
+app.component("TabPanel", TabPanel);
+app.component("DataTable", DataTable);
+app.component("Column", Column);
+app.component("ColumnGroup", ColumnGroup);
+app.component("Row", Row);
+app.component("RadioButton", RadioButton);
+app.component("Timeline", Timeline);
+app.component("InputSwitch", InputSwitch);
+app.component("InputNumber", InputNumber);
+app.component("InputText", InputText);
+app.component("Chart", Chart);
+app.component("Slider", Slider);
+app.component("Calendar", Calendar);
+app.component("Checkbox", Checkbox);
+app.component("Dialog", Dialog);
+app.component("ContextMenu", ContextMenu);
+app.component("Draggable", draggable); // Drag and drop
+app.directive("tooltip", Tooltip);
 
 app.mount("#app");
diff --git a/src/module/abbreviateNumber.js b/src/module/abbreviateNumber.js
index e6f5ec2..20e1a6c 100644
--- a/src/module/abbreviateNumber.js
+++ b/src/module/abbreviateNumber.js
@@ -19,23 +19,23 @@ export default function abbreviateNumber(totalSeconds) {
   let minutes = 0;
   let hours = 0;
   let days = 0;
-  let result = '';
-  let symbols = ['d', 'h', 'm', 's'];
+  let result = "";
+  let symbols = ["d", "h", "m", "s"];
 
   totalSeconds = parseInt(totalSeconds);
-  if(!isNaN(totalSeconds)) {
+  if (!isNaN(totalSeconds)) {
     seconds = totalSeconds % 60;
     minutes = (Math.floor(totalSeconds - seconds) / 60) % 60;
-    hours = (Math.floor(totalSeconds / 3600)) % 24;
+    hours = Math.floor(totalSeconds / 3600) % 24;
     days = Math.floor(totalSeconds / (3600 * 24));
-  };
+  }
 
   const units = [days, hours, minutes, seconds];
-  for(let i = 0; i < units.length; i++) {
-    if(units[i] > 0) result += units[i] + symbols[i] + " ";
+  for (let i = 0; i < units.length; i++) {
+    if (units[i] > 0) result += units[i] + symbols[i] + " ";
   }
   result = result.trim();
-  if(totalSeconds === 0) result = '0';
+  if (totalSeconds === 0) result = "0";
 
   return result;
-};
+}
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index f45975a..8404597 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -6,24 +6,27 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
 /** @module alertModal SweetAlert2 modal dialogs for user interactions. */
 
-import Swal from 'sweetalert2';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { useConformanceStore } from '@/stores/conformance';
-import { useFilesStore } from '@/stores/files';
-import { usePageAdminStore } from '@/stores/pageAdmin';
-import { useModalStore } from '@/stores/modal';
-import { escapeHtml } from '@/utils/escapeHtml.js';
+import Swal from "sweetalert2";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
+import { useFilesStore } from "@/stores/files";
+import { usePageAdminStore } from "@/stores/pageAdmin";
+import { useModalStore } from "@/stores/modal";
+import { escapeHtml } from "@/utils/escapeHtml.js";
 
 const customClass = {
-  container: '!z-[99999]',
-  popup: '!w-[564px]',
-  title: '!text-xl !font-semibold !mb-2',
-  htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
-  inputLabel: '!text-sm !font-normal',
-  input: '!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200',
-  validationMessage: '!bg-neutral-10 !text-danger',
-  confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
-  cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
+  container: "!z-[99999]",
+  popup: "!w-[564px]",
+  title: "!text-xl !font-semibold !mb-2",
+  htmlContainer: "!text-sm !font-normal !h-full !mb-4 !leading-5",
+  inputLabel: "!text-sm !font-normal",
+  input:
+    "!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200",
+  validationMessage: "!bg-neutral-10 !text-danger",
+  confirmButton:
+    "!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]",
+  cancelButton:
+    "!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ",
 };
 /**
  * Shows a modal dialog to save a new filter with a user-provided name.
@@ -33,47 +36,51 @@ const customClass = {
  * @returns {Promise<boolean>} True if the filter was saved, false otherwise.
  */
 export async function saveFilter(addFilterId, next = null) {
-  let fileName = '';
+  let fileName = "";
   const pageAdminStore = usePageAdminStore();
 
   const { value, isConfirmed } = await Swal.fire({
-    title: 'SAVE NEW FILTER',
-    input: 'text',
-    inputPlaceholder: 'Enter Filter Name.',
+    title: "SAVE NEW FILTER",
+    input: "text",
+    inputPlaceholder: "Enter Filter Name.",
     inputValue: fileName,
     inputAttributes: {
-      'maxlength': 200,
+      maxlength: 200,
     },
     inputValidator: (value) => {
-      if (!value) return 'You need to write something!';
+      if (!value) return "You need to write something!";
       fileName = value;
     },
-    icon: 'info',
-    iconHtml: '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
-    iconColor: '#0099FF',
-    reverseButtons:true,
-    confirmButtonColor: '#0099FF',
+    icon: "info",
+    iconHtml:
+      '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
+    iconColor: "#0099FF",
+    reverseButtons: true,
+    confirmButtonColor: "#0099FF",
     showCancelButton: true,
-    cancelButtonColor: '#94a3b8',
+    cancelButtonColor: "#94a3b8",
     customClass: customClass,
   });
   // Determine whether to redirect based on the return value
-  if(isConfirmed) { // Save succeeded
+  if (isConfirmed) {
+    // Save succeeded
     await addFilterId(fileName);
     // Show save complete notification
-    if (value) { // Example of value: yes
+    if (value) {
+      // Example of value: yes
       savedSuccessfully(value);
     }
     // Clear the input field
-    fileName = '';
+    fileName = "";
     return true;
-  } else { // Clicked cancel or outside the dialog; save failed.
+  } else {
+    // Clicked cancel or outside the dialog; save failed.
     pageAdminStore.keepPreviousPage();
 
     // Not every time we have nontrivial next value
     if (next !== null) {
       next(false);
-  }
+    }
     return false;
   }
 }
@@ -84,17 +91,17 @@ export async function saveFilter(addFilterId, next = null) {
  * @returns {Promise<void>}
  */
 export async function savedSuccessfully(value) {
-  value = value || '';
+  value = value || "";
   await Swal.fire({
-    title: 'SAVE COMPLETE',
+    title: "SAVE COMPLETE",
     html: `<span class="text-primary">${escapeHtml(value)}</span> has been saved in Lucia.`,
     timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
-    icon: 'success',
-    iconColor: '#0099FF',
-    customClass: customClass
-  })
-};
+    icon: "success",
+    iconColor: "#0099FF",
+    customClass: customClass,
+  });
+}
 /**
  * Prompts the user to save unsaved filter changes before leaving the
  * Map page. Handles confirm (save), cancel (discard), and backdrop
@@ -112,23 +119,23 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
   const pageAdminStore = usePageAdminStore();
 
   const result = await Swal.fire({
-    title: 'SAVE YOUR FILTER?',
-    html: 'If you want to continue using this filter in any other page, please select [Yes].',
-    icon: 'warning',
-    iconColor: '#FF3366',
-    reverseButtons:true,
-    confirmButtonText: 'Yes',
-    confirmButtonColor: '#FF3366',
+    title: "SAVE YOUR FILTER?",
+    html: "If you want to continue using this filter in any other page, please select [Yes].",
+    icon: "warning",
+    iconColor: "#FF3366",
+    reverseButtons: true,
+    confirmButtonText: "Yes",
+    confirmButtonColor: "#FF3366",
     showCancelButton: true,
-    cancelButtonText: 'No',
-    cancelButtonColor: '#94a3b8',
+    cancelButtonText: "No",
+    cancelButtonColor: "#94a3b8",
     customClass: customClass,
   });
 
-  if(result.isConfirmed) {
-    if(allMapDataStore.createFilterId) {
+  if (result.isConfirmed) {
+    if (allMapDataStore.createFilterId) {
       await allMapDataStore.updateFilter();
-      if(allMapDataStore.isUpdateFilter) {
+      if (allMapDataStore.isUpdateFilter) {
         await savedSuccessfully(allMapDataStore.filterName);
       }
     } else {
@@ -137,7 +144,7 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
     }
 
     logOut ? logOut() : next(toPath);
-  } else if(result.dismiss === 'cancel') {
+  } else if (result.dismiss === "cancel") {
     // console.log('popup cancel case', );
     // Handle page admin issue
     // console.log("usePageAdminStore.activePage", usePageAdminStore.activePage);
@@ -145,18 +152,17 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
 
     allMapDataStore.tempFilterId = null;
     logOut ? logOut() : next(toPath);
-  } else if(result.dismiss === 'backdrop') {
+  } else if (result.dismiss === "backdrop") {
     // console.log('popup backdrop case', );
     // Handle page admin issue
     // console.log("usePageAdminStore.activePage", usePageAdminStore.activePage);
     pageAdminStore.keepPreviousPage();
 
-    if(!logOut){
+    if (!logOut) {
       next(false);
-    };
+    }
   }
-
-};
+}
 /**
  * Shows a modal dialog to save a new conformance rule with a
  * user-provided name.
@@ -166,37 +172,40 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
  * @returns {Promise<boolean>} True if the rule was saved, false otherwise.
  */
 export async function saveConformance(addConformanceCreateCheckId) {
-  let fileName = '';
+  let fileName = "";
   const { value, isConfirmed } = await Swal.fire({
-    title: 'SAVE NEW RULE',
-    input: 'text',
-    inputPlaceholder: 'Enter Rule Name.',
+    title: "SAVE NEW RULE",
+    input: "text",
+    inputPlaceholder: "Enter Rule Name.",
     inputValue: fileName,
     inputAttributes: {
-      'maxlength': 200,
+      maxlength: 200,
     },
     inputValidator: (value) => {
-      if (!value) return 'You need to write something!';
+      if (!value) return "You need to write something!";
       fileName = value;
     },
-    icon: 'info',
-    iconHtml: '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
-    iconColor: '#0099FF',
-    reverseButtons:true,
-    confirmButtonColor: '#0099FF',
+    icon: "info",
+    iconHtml:
+      '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
+    iconColor: "#0099FF",
+    reverseButtons: true,
+    confirmButtonColor: "#0099FF",
     showCancelButton: true,
-    cancelButtonColor: '#94a3b8',
+    cancelButtonColor: "#94a3b8",
     customClass: customClass,
   });
   // Determine whether to redirect based on the return value
-  if(isConfirmed) { // Save succeeded
+  if (isConfirmed) {
+    // Save succeeded
     await addConformanceCreateCheckId(fileName);
     // Show save complete notification
     if (value) savedSuccessfully(value);
     // Clear the input field
-    fileName = '';
+    fileName = "";
     return true;
-  } else { // Clicked cancel or outside the dialog; save failed.
+  } else {
+    // Clicked cancel or outside the dialog; save failed.
     return false;
   }
 }
@@ -212,10 +221,15 @@ export async function saveConformance(addConformanceCreateCheckId) {
  * @param {Function} [logOut] - Optional logout function.
  * @returns {Promise<void>}
  */
-export async function leaveConformance(next, addConformanceCreateCheckId, toPath, logOut) {
+export async function leaveConformance(
+  next,
+  addConformanceCreateCheckId,
+  toPath,
+  logOut,
+) {
   const conformanceStore = useConformanceStore();
   const result = await showConfirmationDialog();
-  
+
   if (result.isConfirmed) {
     await handleConfirmed(conformanceStore, addConformanceCreateCheckId);
   } else {
@@ -228,16 +242,16 @@ export async function leaveConformance(next, addConformanceCreateCheckId, toPath
  */
 async function showConfirmationDialog() {
   return Swal.fire({
-    title: 'SAVE YOUR RULE?',
-    icon: 'warning',
-    iconColor: '#FF3366',
+    title: "SAVE YOUR RULE?",
+    icon: "warning",
+    iconColor: "#FF3366",
     reverseButtons: true,
-    confirmButtonText: 'Yes',
-    confirmButtonColor: '#FF3366',
+    confirmButtonText: "Yes",
+    confirmButtonColor: "#FF3366",
     showCancelButton: true,
-    cancelButtonText: 'No',
-    cancelButtonColor: '#94a3b8',
-    customClass: customClass
+    cancelButtonText: "No",
+    cancelButtonColor: "#94a3b8",
+    customClass: customClass,
   });
 }
 
@@ -248,7 +262,10 @@ async function showConfirmationDialog() {
  * @returns {Promise<void>}
  */
 async function handleConfirmed(conformanceStore, addConformanceCreateCheckId) {
-  if (conformanceStore.conformanceFilterCreateCheckId || conformanceStore.conformanceLogCreateCheckId) {
+  if (
+    conformanceStore.conformanceFilterCreateCheckId ||
+    conformanceStore.conformanceLogCreateCheckId
+  ) {
     await conformanceStore.updateConformance();
     if (conformanceStore.isUpdateConformance) {
       await savedSuccessfully(conformanceStore.conformanceFileName);
@@ -267,13 +284,19 @@ async function handleConfirmed(conformanceStore, addConformanceCreateCheckId) {
  * @param {Function} [logOut] - Optional logout function.
  * @returns {Promise<void>}
  */
-async function handleDismiss(dismissType, conformanceStore, next, toPath, logOut) {
+async function handleDismiss(
+  dismissType,
+  conformanceStore,
+  next,
+  toPath,
+  logOut,
+) {
   switch (dismissType) {
-    case 'cancel':
+    case "cancel":
       resetTempCheckId(conformanceStore);
       logOut ? logOut() : next(toPath);
       break;
-    case 'backdrop':
+    case "backdrop":
       if (!logOut) {
         next(false);
       }
@@ -304,38 +327,38 @@ function resetTempCheckId(conformanceStore) {
 export async function uploadFailedFirst(failureType, failureMsg, failureLoc) {
   // msg: 'not in UTF-8' | 'insufficient columns' | 'the csv file is empty' | 'the filename does not ends with .csv' | 'not a CSV file'
   // type: 'encoding' | 'insufficient_columns' | 'empty' | 'name_suffix' | mime_type
-  let value = '';
+  let value = "";
   switch (failureType) {
-    case 'size':
-      value = 'File size exceeds 90MB.';
+    case "size":
+      value = "File size exceeds 90MB.";
       break;
-    case 'encoding':
+    case "encoding":
       value = `Please use UTF-8 for character encoding: (Row #${failureLoc})`;
       break;
-    case 'insufficient_columns':
-      value = 'Need at least five columns of data.';
+    case "insufficient_columns":
+      value = "Need at least five columns of data.";
       break;
-    case 'empty':
-      value = 'Need at least one record of data.';
+    case "empty":
+      value = "Need at least one record of data.";
       break;
-    case 'name_suffix':
-    case 'mime_type':
-      value = 'File is not in csv format.';
+    case "name_suffix":
+    case "mime_type":
+      value = "File is not in csv format.";
       break;
     default:
       value = escapeHtml(failureMsg);
       break;
   }
   await Swal.fire({
-    title: 'IMPORT FAILED',
+    title: "IMPORT FAILED",
     html: value,
     timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
-    icon: 'error',
-    iconColor: '#FF3366',
-    customClass: customClass
-  })
-};
+    icon: "error",
+    iconColor: "#FF3366",
+    customClass: customClass,
+  });
+}
 /**
  * Shows an error modal for the second stage of upload validation failure,
  * listing individual row-level errors.
@@ -345,73 +368,73 @@ export async function uploadFailedFirst(failureType, failureMsg, failureLoc) {
  * @returns {Promise<void>}
  */
 export async function uploadFailedSecond(detail) {
-  let srt = '';
-  let manySrt = '';
+  let srt = "";
+  let manySrt = "";
 
-  detail.forEach(i => {
-    let content = '';
-    let key = '';
+  detail.forEach((i) => {
+    let content = "";
+    let key = "";
     switch (i.type) {
-      case 'too_many':
-        manySrt = 'There are more errors.';
+      case "too_many":
+        manySrt = "There are more errors.";
         break;
-      case 'unrecognized':
+      case "unrecognized":
         content = `<li>Data unrecognizable in Status Column: (Row #${i.loc[1]}, "${escapeHtml(i.input)}")</li>`;
         break;
-      case 'malformed':
+      case "malformed":
         content = `<li>Data malformed in Timestamp Column: (Row #${i.loc[1]}, "${escapeHtml(i.input)}")</li>`;
         break;
-      case 'missing':  
+      case "missing":
         switch (i.loc[2]) {
-          case 'case id':
-            key = 'Case ID';
+          case "case id":
+            key = "Case ID";
             break;
-          case 'timestamp':
-            key = 'Timestamp';
+          case "timestamp":
+            key = "Timestamp";
             break;
-          case 'name':
-            key = 'Activity';
+          case "name":
+            key = "Activity";
             break;
-          case 'instance':
-            key = 'Activity Instance ID';
+          case "instance":
+            key = "Activity Instance ID";
             break;
-          case 'status':
-            key = 'Status';
+          case "status":
+            key = "Status";
             break;
           default:
             key = i.loc[2];
             break;
         }
         content = `<li>Data missing in ${key} Column: (Row #${i.loc[1]})</li>`;
-      break;
+        break;
     }
     srt += content;
   });
   await Swal.fire({
-    title: 'IMPORT FAILED',
+    title: "IMPORT FAILED",
     html: `<div class="text-left mx-3 space-y-1"><p>Error(s) detected:</p><ul class="list-disc ml-6">${srt}</ul><p>${manySrt} Please check.</p></div>`,
     timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
-    icon: 'error',
-    iconColor: '#FF3366',
-    customClass: customClass
+    icon: "error",
+    iconColor: "#FF3366",
+    customClass: customClass,
   });
-  srt = '';
-};
+  srt = "";
+}
 /**
  * Shows a timed success notification after a file upload completes.
  * @returns {Promise<void>}
  */
 export async function uploadSuccess() {
   await Swal.fire({
-    title: 'IMPORT COMPLETED',
+    title: "IMPORT COMPLETED",
     timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
-    icon: 'success',
-    iconColor: '#0099FF',
-    customClass: customClass
-  })
-};
+    icon: "success",
+    iconColor: "#0099FF",
+    customClass: customClass,
+  });
+}
 /**
  * Shows a confirmation dialog before uploading a file. Proceeds with
  * the upload only if the user confirms.
@@ -422,23 +445,23 @@ export async function uploadSuccess() {
 export async function uploadConfirm(fetchData) {
   const filesStore = useFilesStore();
   const result = await Swal.fire({
-    title: 'ARE YOU SURE?',
-    html: 'After importing, you won’t be able to modify labels.',
-    icon: 'warning',
-    iconColor: '#FF3366',
-    reverseButtons:true,
-    confirmButtonText: 'Yes',
-    confirmButtonColor: '#FF3366',
+    title: "ARE YOU SURE?",
+    html: "After importing, you won’t be able to modify labels.",
+    icon: "warning",
+    iconColor: "#FF3366",
+    reverseButtons: true,
+    confirmButtonText: "Yes",
+    confirmButtonColor: "#FF3366",
     showCancelButton: true,
-    cancelButtonText: 'No',
-    cancelButtonColor: '#94a3b8',
+    cancelButtonText: "No",
+    cancelButtonColor: "#94a3b8",
     customClass: customClass,
   });
 
-  if(result.isConfirmed) {
+  if (result.isConfirmed) {
     filesStore.uploadLog(fetchData);
   }
-};
+}
 /**
  * Shows a non-dismissable loading spinner during file upload.
  * @returns {Promise<void>}
@@ -449,8 +472,8 @@ export async function uploadloader() {
     showConfirmButton: false,
     allowOutsideClick: false,
     customClass: customClass,
-  })
-};
+  });
+}
 /**
  * Shows a modal dialog for renaming a file.
  *
@@ -463,39 +486,40 @@ export async function uploadloader() {
 export async function renameModal(rename, type, id, baseName) {
   const fileName = baseName;
   const { value, isConfirmed } = await Swal.fire({
-    title: 'RENAME',
-    input: 'text',
-    inputPlaceholder: 'Enter File Name.',
+    title: "RENAME",
+    input: "text",
+    inputPlaceholder: "Enter File Name.",
     inputValue: fileName,
     inputAttributes: {
-      'maxlength': 200,
+      maxlength: 200,
     },
-    icon: 'info',
-    iconHtml: '<span class="material-symbols-outlined !text-[58px]">edit_square</span>',
-    iconColor: '#0099FF',
+    icon: "info",
+    iconHtml:
+      '<span class="material-symbols-outlined !text-[58px]">edit_square</span>',
+    iconColor: "#0099FF",
     reverseButtons: true,
-    confirmButtonColor: '#0099FF',
+    confirmButtonColor: "#0099FF",
     showCancelButton: true,
-    cancelButtonColor: '#94a3b8',
+    cancelButtonColor: "#94a3b8",
     customClass: customClass,
     didOpen: () => {
       const confirmButton = Swal.getConfirmButton();
       const inputField = Swal.getInput();
 
-      inputField.addEventListener('input', function() {
+      inputField.addEventListener("input", function () {
         if (!inputField.value.trim()) {
-          confirmButton.classList.add('disable-hover');
+          confirmButton.classList.add("disable-hover");
           confirmButton.disabled = true;
         } else {
-          confirmButton.classList.remove('disable-hover');
+          confirmButton.classList.remove("disable-hover");
           confirmButton.disabled = false;
         }
       });
-    }
+    },
   });
 
   // Rename succeeded
-  if(isConfirmed) await rename(type, id, value);
+  if (isConfirmed) await rename(type, id, value);
   // Clear the field: fileName = ''
 }
 /**
@@ -511,46 +535,50 @@ export async function deleteFileModal(files, type, id, name) {
   const filesStore = useFilesStore();
 
   const safeName = escapeHtml(name);
-  const htmlText = files.length === 0 ? `Do you really want to delete <span class="text-primary">${safeName}</span>?` : `<div class="text-left mx-4 space-y-1"><p class="mb-2">Do you really want to delete <span class="text-primary">${safeName}</span>?</p><p>The following dependent file(s) will also be deleted:</p><ul class="list-disc ml-6">${files}</ul></div>`;
+  const htmlText =
+    files.length === 0
+      ? `Do you really want to delete <span class="text-primary">${safeName}</span>?`
+      : `<div class="text-left mx-4 space-y-1"><p class="mb-2">Do you really want to delete <span class="text-primary">${safeName}</span>?</p><p>The following dependent file(s) will also be deleted:</p><ul class="list-disc ml-6">${files}</ul></div>`;
 
   const deleteCustomClass = { ...customClass };
-  deleteCustomClass.confirmButton = '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] !text-danger !bg-neutral-10 !border !border-danger';
+  deleteCustomClass.confirmButton =
+    "!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] !text-danger !bg-neutral-10 !border !border-danger";
 
   const result = await Swal.fire({
-    title: 'CONFIRM DELETION',
+    title: "CONFIRM DELETION",
     html: htmlText,
-    icon: 'warning',
-    iconColor: '#FF3366',
-    reverseButtons:true,
-    confirmButtonColor: '#ffffff',
+    icon: "warning",
+    iconColor: "#FF3366",
+    reverseButtons: true,
+    confirmButtonColor: "#ffffff",
     showCancelButton: true,
-    cancelButtonColor: '#FF3366',
+    cancelButtonColor: "#FF3366",
     customClass: deleteCustomClass,
     didOpen: () => {
       const confirmButton = Swal.getConfirmButton();
 
-      confirmButton.style.border = '1px solid #FF3366';
-    }
+      confirmButton.style.border = "1px solid #FF3366";
+    },
   });
 
-  if(result.isConfirmed) {
+  if (result.isConfirmed) {
     filesStore.deleteFile(type, id);
   }
-};
+}
 /**
  * Shows a timed success notification after file deletion.
  * @returns {Promise<void>}
  */
 export async function deleteSuccess() {
   await Swal.fire({
-    title: 'FILE(S) DELETED',
+    title: "FILE(S) DELETED",
     timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
-    icon: 'success',
-    iconColor: '#0099FF',
-    customClass: customClass
-  })
-};
+    icon: "success",
+    iconColor: "#0099FF",
+    customClass: customClass,
+  });
+}
 /**
  * Shows an informational modal about files deleted by other users,
  * then records the deletions and refreshes the file list.
@@ -565,22 +593,25 @@ export async function reallyDeleteInformation(files, reallyDeleteData) {
   const deleteCustomClass = { ...customClass };
   const htmlText = `<div class="text-left mx-4 space-y-1"><p>The following file(s) have been deleted by other user(s):</p><ul class="list-disc ml-6">${files}</ul></div>`;
 
-  deleteCustomClass.confirmButton = '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] !text-primary !bg-neutral-10 !border !border-primary';
+  deleteCustomClass.confirmButton =
+    "!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] !text-primary !bg-neutral-10 !border !border-primary";
   deleteCustomClass.cancelButton = null;
   await Swal.fire({
-    title: 'FILE(S) DELETED BY OTHER USER(S)',
+    title: "FILE(S) DELETED BY OTHER USER(S)",
     html: htmlText,
-    icon: 'info',
-    iconColor: '#0099FF',
+    icon: "info",
+    iconColor: "#0099FF",
     customClass: deleteCustomClass,
-    confirmButtonColor: '#ffffff',
+    confirmButtonColor: "#ffffff",
     didOpen: () => {
       const confirmButton = Swal.getConfirmButton();
 
-      confirmButton.style.border = '1px solid #0099FF';
-    }
+      confirmButton.style.border = "1px solid #0099FF";
+    },
   });
-  await Promise.all(reallyDeleteData.map(file => filesStore.deletionRecord(file.id)));
+  await Promise.all(
+    reallyDeleteData.map((file) => filesStore.deletionRecord(file.id)),
+  );
   await filesStore.fetchAllFiles();
 }
 
@@ -589,21 +620,21 @@ export async function reallyDeleteInformation(files, reallyDeleteData) {
  * page with unsaved edits.
  * @returns {Promise<void>}
  */
-export async function leaveAccountManagementToRemind(){
+export async function leaveAccountManagementToRemind() {
   const modalStore = useModalStore();
   const result = await Swal.fire({
-    title: 'SAVE YOUR EDIT?',
-    icon: 'info',
+    title: "SAVE YOUR EDIT?",
+    icon: "info",
     showCancelButton: true,
     didOpen: () => {
       const confirmButton = Swal.getConfirmButton();
 
-      confirmButton.style.border = '1px solid #0099FF';
-    }
+      confirmButton.style.border = "1px solid #0099FF";
+    },
   });
-  if(result.isConfirmed) {
+  if (result.isConfirmed) {
     return;
   } else {
     modalStore.openModal();
   }
-};
\ No newline at end of file
+}
diff --git a/src/module/apiError.js b/src/module/apiError.js
index 77caee8..438b68f 100644
--- a/src/module/apiError.js
+++ b/src/module/apiError.js
@@ -6,8 +6,8 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
 /** @module apiError Centralized API error handler with toast notifications. */
 
-import {useToast} from 'vue-toast-notification';
-import 'vue-toast-notification/dist/theme-sugar.css';
+import { useToast } from "vue-toast-notification";
+import "vue-toast-notification/dist/theme-sugar.css";
 
 /**
  * Handles API errors by showing a toast notification.
@@ -19,5 +19,5 @@ import 'vue-toast-notification/dist/theme-sugar.css';
  */
 export default function apiError(error, toastMessage) {
   const $toast = useToast();
-  $toast.default(toastMessage, {position: 'bottom'});
+  $toast.default(toastMessage, { position: "bottom" });
 }
diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js
index 83d8cee..7eb2005 100644
--- a/src/module/cytoscapeMap.js
+++ b/src/module/cytoscapeMap.js
@@ -9,18 +9,18 @@
  *   interactive node/edge highlighting, tooltips, and position persistence.
  */
 
-import cytoscape from 'cytoscape';
-import spread from 'cytoscape-spread';
-import dagre from 'cytoscape-dagre';
-import fcose from 'cytoscape-fcose';
-import cola from 'cytoscape-cola';
-import tippy from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
-import { useMapPathStore } from '@/stores/mapPathStore';
-import { getTimeLabel } from '@/module/timeLabel.js';
-import { createTooltipContent } from '@/module/tooltipContent.js';
-import { useCytoscapeStore } from '@/stores/cytoscapeStore';
-import { SAVE_KEY_NAME } from '@/constants/constants.js';
+import cytoscape from "cytoscape";
+import spread from "cytoscape-spread";
+import dagre from "cytoscape-dagre";
+import fcose from "cytoscape-fcose";
+import cola from "cytoscape-cola";
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
+import { useMapPathStore } from "@/stores/mapPathStore";
+import { getTimeLabel } from "@/module/timeLabel.js";
+import { createTooltipContent } from "@/module/tooltipContent.js";
+import { useCytoscapeStore } from "@/stores/cytoscapeStore";
+import { SAVE_KEY_NAME } from "@/constants/constants.js";
 
 /**
  * Composes display text for frequency-type data layer values.
@@ -33,8 +33,14 @@ import { SAVE_KEY_NAME } from '@/constants/constants.js';
  */
 const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => {
   let text = baseText;
-  const textInt = dataLayerOption === 'rel_freq' ? baseText + optionValue * 100 + "%" : baseText + optionValue;
-  const textFloat = dataLayerOption === 'rel_freq' ? baseText + (optionValue * 100).toFixed(2) + "%" : baseText + optionValue.toFixed(2);
+  const textInt =
+    dataLayerOption === "rel_freq"
+      ? baseText + optionValue * 100 + "%"
+      : baseText + optionValue;
+  const textFloat =
+    dataLayerOption === "rel_freq"
+      ? baseText + (optionValue * 100).toFixed(2) + "%"
+      : baseText + optionValue.toFixed(2);
   // Check if the value is an integer; if not, round to 2 decimal places.
   text = Math.trunc(optionValue) === optionValue ? textInt : textFloat;
   return text;
@@ -65,7 +71,14 @@ cytoscape.use(cola);
  * @param {HTMLElement} graphId - The DOM container element for Cytoscape.
  * @returns {cytoscape.Core} The configured Cytoscape instance.
  */
-export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, curveStyle, rank, graphId) {
+export default function cytoscapeMap(
+  mapData,
+  dataLayerType,
+  dataLayerOption,
+  curveStyle,
+  rank,
+  graphId,
+) {
   // Set the color and style for each node and edge
   let nodes = mapData.nodes;
   let edges = mapData.edges;
@@ -78,209 +91,234 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
       edges: edges, // Edge data
     },
     layout: {
-      name: 'dagre',
+      name: "dagre",
       rankDir: rank, // Vertical TB | Horizontal LR, variable from 'cytoscape-dagre' plugin
     },
     style: [
       // Style changes when a node is selected
       {
-        selector: 'node:selected',
+        selector: "node:selected",
         style: {
-          'border-color': 'red',
-          'border-width': '3',
+          "border-color": "red",
+          "border-width": "3",
         },
       },
       // Node styling
       {
-        selector: 'node',
+        selector: "node",
         style: {
-          'label':
-            function (node) { // Text to display on the node
-              // node.data(this.dataLayerType+"."+this.dataLayerOption) accesses the original array value at node.data.key.value
-              let optionValue = node.data(`${dataLayerType}.${dataLayerOption}`);
-              let text = '';
-              const STRING_LIMIT = 8;
-              if (node.data('label').length > STRING_LIMIT) {
-                // If text exceeds STRING_LIMIT, append "..." and add line breaks (\n)
-                // Using data() because Cytoscape converts array data to function calls
-                text = `${node.data('label').substr(0, STRING_LIMIT)}...\n\n`;
-              } else { // Pad with spaces to match the label width for consistent sizing
-                text = `${node.data('label').padEnd(STRING_LIMIT, '　')}\n\n`
+          label: function (node) {
+            // Text to display on the node
+            // node.data(this.dataLayerType+"."+this.dataLayerOption) accesses the original array value at node.data.key.value
+            let optionValue = node.data(`${dataLayerType}.${dataLayerOption}`);
+            let text = "";
+            const STRING_LIMIT = 8;
+            if (node.data("label").length > STRING_LIMIT) {
+              // If text exceeds STRING_LIMIT, append "..." and add line breaks (\n)
+              // Using data() because Cytoscape converts array data to function calls
+              text = `${node.data("label").substr(0, STRING_LIMIT)}...\n\n`;
+            } else {
+              // Pad with spaces to match the label width for consistent sizing
+              text = `${node.data("label").padEnd(STRING_LIMIT, "　")}\n\n`;
+            }
+
+            // In elements, activity is categorized as default, so check if the node is an activity before adding text.
+            // Use parseInt (integer) or parseFloat (float) to convert strings to numbers.
+            // Relative values need to be converted to percentages (%)
+            if (node.data("type") === "activity") {
+              let textDurRel;
+              let timeLabelInt;
+              let timeLabelFloat;
+              let textTimeLabel;
+
+              switch (dataLayerType) {
+                case "freq": // Frequency
+                  text = composeFreqTypeText(
+                    text,
+                    dataLayerOption,
+                    optionValue,
+                  );
+                  break;
+                case "duration": // Duration: Relative is percentage %, others need time unit conversion.
+                  // Relative %
+                  textDurRel = text + (optionValue * 100).toFixed(2) + "%";
+                  // Timelabel
+                  timeLabelInt = text + getTimeLabel(optionValue);
+                  timeLabelFloat = text + getTimeLabel(optionValue.toFixed(2));
+
+                  // Check if the value is an integer; if not, round to 2 decimal places.
+                  textTimeLabel =
+                    Math.trunc(optionValue) === optionValue
+                      ? timeLabelInt
+                      : timeLabelFloat;
+
+                  text =
+                    dataLayerOption === "rel_duration"
+                      ? textDurRel
+                      : textTimeLabel;
+                  break;
               }
+            }
 
-              // In elements, activity is categorized as default, so check if the node is an activity before adding text.
-              // Use parseInt (integer) or parseFloat (float) to convert strings to numbers.
-              // Relative values need to be converted to percentages (%)
-              if (node.data('type') === 'activity') {
-                let textDurRel;
-                let timeLabelInt;
-                let timeLabelFloat;
-                let textTimeLabel;
-
-                switch (dataLayerType) {
-                  case 'freq': // Frequency   
-                    text = composeFreqTypeText(text, dataLayerOption, optionValue);
-                    break;
-                  case 'duration': // Duration: Relative is percentage %, others need time unit conversion.
-                    // Relative %
-                    textDurRel = text + (optionValue * 100).toFixed(2) + "%";
-                    // Timelabel
-                    timeLabelInt = text + getTimeLabel(optionValue);
-                    timeLabelFloat = text + getTimeLabel(optionValue.toFixed(2));
-
-                    // Check if the value is an integer; if not, round to 2 decimal places.
-                    textTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
-
-                    text = dataLayerOption === 'rel_duration' ? textDurRel : textTimeLabel;
-                    break;
-                }
-              }
-
-              return text;
-            },
-          'text-opacity': 0.7,
-          'background-color': 'data(backgroundColor)',
-          'border-color': 'data(bordercolor)',
-          'border-width':
-            function (node) {
-              return node.data('type') === 'activity' ? '1' : '2';
-            },
-          'background-image': 'data(nodeImageUrl)',
-          'background-opacity': 'data(backgroundOpacity)', // Transparent background
-          'border-opacity': 'data(borderOpacity)', // Transparent border
-          'shape': 'data(shape)',
-          'text-wrap': 'wrap',
-          'text-max-width': 'data(width)', // Wrap text within the node
-          'text-overflow-wrap': 'anywhere', // Allow wrapping at any position
-          'text-margin-x': function (node) {
-            return node.data('type') === 'activity' ? -5 : 0;
+            return text;
           },
-          'text-margin-y': function (node) {
-            return node.data('type') === 'activity' ? 2 : 0;
+          "text-opacity": 0.7,
+          "background-color": "data(backgroundColor)",
+          "border-color": "data(bordercolor)",
+          "border-width": function (node) {
+            return node.data("type") === "activity" ? "1" : "2";
           },
-          'padding': function (node) {
-            return node.data('type') === 'activity' ? 0 : 0;
+          "background-image": "data(nodeImageUrl)",
+          "background-opacity": "data(backgroundOpacity)", // Transparent background
+          "border-opacity": "data(borderOpacity)", // Transparent border
+          shape: "data(shape)",
+          "text-wrap": "wrap",
+          "text-max-width": "data(width)", // Wrap text within the node
+          "text-overflow-wrap": "anywhere", // Allow wrapping at any position
+          "text-margin-x": function (node) {
+            return node.data("type") === "activity" ? -5 : 0;
+          },
+          "text-margin-y": function (node) {
+            return node.data("type") === "activity" ? 2 : 0;
+          },
+          padding: function (node) {
+            return node.data("type") === "activity" ? 0 : 0;
+          },
+          "text-justification": "left",
+          "text-halign": "center",
+          "text-valign": "center",
+          height: "data(height)",
+          width: "data(width)",
+          color: "data(textColor)",
+          "line-height": "0.7rem",
+          "font-size": function (node) {
+            return node.data("type") === "activity" ? 14 : 14;
           },
-          'text-justification': 'left',
-          'text-halign': 'center',
-          'text-valign': 'center',
-          'height': 'data(height)',
-          'width': 'data(width)',
-          'color': 'data(textColor)',
-          'line-height': '0.7rem',
-          'font-size':
-            function (node) {
-              return node.data('type') === 'activity' ? 14 : 14;
-            },
         },
       },
       // Edge styling
       {
-        selector: 'edge',
+        selector: "edge",
         style: {
-          'content': function (edge) { // Text displayed on the edge
+          content: function (edge) {
+            // Text displayed on the edge
             let optionValue = edge.data(`${dataLayerType}.${dataLayerOption}`);
-            let result = '';
+            let result = "";
             let edgeInt;
             let edgeFloat;
             let edgeDurRel;
             let timeLabelInt;
             let timeLabelFloat;
             let edgeTimeLabel;
-            if (optionValue === '') return optionValue;
+            if (optionValue === "") return optionValue;
 
             switch (dataLayerType) {
-              case 'freq':
-                edgeInt = dataLayerOption === 'rel_freq' ? optionValue * 100 + "%" : optionValue;
-                edgeFloat = dataLayerOption === 'rel_freq' ? (optionValue * 100).toFixed(2) + "%" : optionValue.toFixed(2);
+              case "freq":
+                edgeInt =
+                  dataLayerOption === "rel_freq"
+                    ? optionValue * 100 + "%"
+                    : optionValue;
+                edgeFloat =
+                  dataLayerOption === "rel_freq"
+                    ? (optionValue * 100).toFixed(2) + "%"
+                    : optionValue.toFixed(2);
 
                 // Check if the value is an integer; if not, round to 2 decimal places.
-                result = Math.trunc(optionValue) === optionValue ? edgeInt : edgeFloat;
+                result =
+                  Math.trunc(optionValue) === optionValue ? edgeInt : edgeFloat;
                 break;
 
-              case 'duration': // Duration: Relative is percentage %, others need time unit conversion.
+              case "duration": // Duration: Relative is percentage %, others need time unit conversion.
                 // Relative %
                 edgeDurRel = (optionValue * 100).toFixed(2) + "%";
                 // Timelabel
                 timeLabelInt = getTimeLabel(optionValue);
                 timeLabelFloat = getTimeLabel(optionValue.toFixed(2));
-                edgeTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
+                edgeTimeLabel =
+                  Math.trunc(optionValue) === optionValue
+                    ? timeLabelInt
+                    : timeLabelFloat;
 
-                result = dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel;
+                result =
+                  dataLayerOption === "rel_duration"
+                    ? edgeDurRel
+                    : edgeTimeLabel;
                 break;
-            };
+            }
             return result;
           },
-          'curve-style': curveStyle, // unbundled-bezier | taxi
-          'overlay-opacity': 0, // Set overlay-opacity to 0 to remove the gray shadow
-          'target-arrow-shape': 'triangle', // Arrow shape pointing to target: triangle
-          'color': 'gray', //#0066cc
+          "curve-style": curveStyle, // unbundled-bezier | taxi
+          "overlay-opacity": 0, // Set overlay-opacity to 0 to remove the gray shadow
+          "target-arrow-shape": "triangle", // Arrow shape pointing to target: triangle
+          color: "gray", //#0066cc
           //'control-point-step-size':100, // Distance between Bezier curve control points
-          'width': 'data(lineWidth)',
-          'line-style': 'data(edgeStyle)',
+          width: "data(lineWidth)",
+          "line-style": "data(edgeStyle)",
           "text-margin-y": "0.7rem",
           //"text-rotation": "autorotate",
-        }
-      }, {
-        selector: '.highlight-edge',
-        style: {
-          'color': '#0099FF',
-          'line-color': '#0099FF',
-          'overlay-color': '#0099FF',
-          'overlay-opacity': 0.2,
-          'overlay-padding': '5px',
         },
-      }, {
-        selector: '.highlight-node',
+      },
+      {
+        selector: ".highlight-edge",
         style: {
-          'overlay-color': '#0099FF',
-          'overlay-opacity': 0.01,
-          'overlay-padding': '5px',
+          color: "#0099FF",
+          "line-color": "#0099FF",
+          "overlay-color": "#0099FF",
+          "overlay-opacity": 0.2,
+          "overlay-padding": "5px",
         },
-      }, {
-        selector: 'edge[source = target]', // Select self-loop edges
+      },
+      {
+        selector: ".highlight-node",
         style: {
-          'loop-direction': '0deg',  // Control the loop direction
-          'loop-sweep': '-60deg',   // Control the loop arc; adjust to change size
-          'control-point-step-size': 50 // Control the loop radius; increase to enlarge the loop
-        }
+          "overlay-color": "#0099FF",
+          "overlay-opacity": 0.01,
+          "overlay-padding": "5px",
+        },
+      },
+      {
+        selector: "edge[source = target]", // Select self-loop edges
+        style: {
+          "loop-direction": "0deg", // Control the loop direction
+          "loop-sweep": "-60deg", // Control the loop arc; adjust to change size
+          "control-point-step-size": 50, // Control the loop radius; increase to enlarge the loop
+        },
       },
     ],
   });
 
-
   // When an edge is clicked, apply glow effect to the edge and its label
-  cy.on('tap', 'edge', function (event) {
-    cy.edges().removeClass('highlight-edge');
-    event.target.addClass('highlight-edge');
+  cy.on("tap", "edge", function (event) {
+    cy.edges().removeClass("highlight-edge");
+    event.target.addClass("highlight-edge");
   });
 
-
   // When a node is clicked, apply glow effect to the node and adjacent edges
-  cy.on('tap, mousedown', 'node', function (event) {
+  cy.on("tap, mousedown", "node", function (event) {
     useMapPathStore().onNodeClickHighlightEdges(event.target);
   });
 
   // When an edge is clicked, apply glow effect to the edge and both endpoint nodes
-  cy.on('tap, mousedown', 'edge', function (event) {
+  cy.on("tap, mousedown", "edge", function (event) {
     useMapPathStore().onEdgeClickHighlightNodes(event.target);
   });
 
   // creat tippy.js
   let tip;
-  cy.on('mouseover', 'node', function (event) {
+  cy.on("mouseover", "node", function (event) {
     const node = event.target;
-    let ref = node.popperRef()
-    let dummyDomEle = document.createElement('div');
-    let content = createTooltipContent(node.data('label'));
-    tip = new tippy(dummyDomEle, { // tippy props:
+    let ref = node.popperRef();
+    let dummyDomEle = document.createElement("div");
+    let content = createTooltipContent(node.data("label"));
+    tip = new tippy(dummyDomEle, {
+      // tippy props:
       getReferenceClientRect: ref.getBoundingClientRect,
-      trigger: 'manual',
-      content: content
+      trigger: "manual",
+      content: content,
     });
     if (node.data("label").length > 10) tip.show();
   });
-  cy.on('mouseout', 'node', function (event) {
+  cy.on("mouseout", "node", function (event) {
     tip?.hide();
   });
 
@@ -290,12 +328,20 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     cytoscapeStore.loadPositionsFromStorage(rank);
     // Check if localStorage has previously saved visit data.
     // If saved node positions exist, restore them for rendering.
-    if (localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))) {
-      const allGraphsRemembered = JSON.parse(localStorage.getItem(SAVE_KEY_NAME));
-      const currentGraphNodesRemembered =
-        allGraphsRemembered[cytoscapeStore.currentGraphId] ? allGraphsRemembered[cytoscapeStore.currentGraphId][rank] : null; // May be undefined
+    if (
+      localStorage.getItem(SAVE_KEY_NAME) &&
+      JSON.parse(localStorage.getItem(SAVE_KEY_NAME))
+    ) {
+      const allGraphsRemembered = JSON.parse(
+        localStorage.getItem(SAVE_KEY_NAME),
+      );
+      const currentGraphNodesRemembered = allGraphsRemembered[
+        cytoscapeStore.currentGraphId
+      ]
+        ? allGraphsRemembered[cytoscapeStore.currentGraphId][rank]
+        : null; // May be undefined
       if (currentGraphNodesRemembered) {
-        currentGraphNodesRemembered.forEach(nodeRemembered => {
+        currentGraphNodesRemembered.forEach((nodeRemembered) => {
           const nodeToDecide = cy.getElementById(nodeRemembered.id);
           if (nodeToDecide) {
             nodeToDecide.position(nodeRemembered.position);
@@ -305,15 +351,23 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     }
     // Save the current positions of all nodes when the view is first entered
     const allNodes = cy.nodes();
-    allNodes.forEach(nodeFirstlySave => {
-      cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position(), rank);
+    allNodes.forEach((nodeFirstlySave) => {
+      cytoscapeStore.saveNodePosition(
+        nodeFirstlySave.id(),
+        nodeFirstlySave.position(),
+        rank,
+      );
     });
 
     // After node positions change, save the updated positions.
     // rank represents whether the user is in horizontal or vertical layout mode.
-    cy.on('dragfree', 'node', (event) => {
+    cy.on("dragfree", "node", (event) => {
       const nodeToSave = event.target;
-      cytoscapeStore.saveNodePosition(nodeToSave.id(), nodeToSave.position(), rank);
+      cytoscapeStore.saveNodePosition(
+        nodeToSave.id(),
+        nodeToSave.position(),
+        rank,
+      );
     });
   });
 
diff --git a/src/module/cytoscapeMapTrace.js b/src/module/cytoscapeMapTrace.js
index dc7a325..f5d5b1f 100644
--- a/src/module/cytoscapeMapTrace.js
+++ b/src/module/cytoscapeMapTrace.js
@@ -9,13 +9,13 @@
  *   individual trace visualization.
  */
 
-import cytoscape from 'cytoscape';
-import dagre from 'cytoscape-dagre';
-import tippy from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
-import { createTooltipContent } from '@/module/tooltipContent.js';
+import cytoscape from "cytoscape";
+import dagre from "cytoscape-dagre";
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
+import { createTooltipContent } from "@/module/tooltipContent.js";
 
-cytoscape.use( dagre );
+cytoscape.use(dagre);
 
 /**
  * Creates a Cytoscape.js instance for rendering a single trace's
@@ -36,75 +36,79 @@ export default function cytoscapeMapTrace(nodes, edges, graphId) {
       edges: edges, // Edge data
     },
     layout: {
-      name: 'dagre',
-      rankDir: 'LR' // Vertical TB | Horizontal LR, variable from 'cytoscape-dagre' plugin
+      name: "dagre",
+      rankDir: "LR", // Vertical TB | Horizontal LR, variable from 'cytoscape-dagre' plugin
     },
     style: [
       // Node styling
       {
-        selector: 'node',
+        selector: "node",
         style: {
-          'label':
-          function(node) { // Text to display on the node
-            let text = '';
+          label: function (node) {
+            // Text to display on the node
+            let text = "";
 
             // node.data('label') accesses the original array value at node.data.label
-            text = node.data('label').length > 18 ? `${node.data('label').substr(0,15)}...` : `${node.data('label')}`;
+            text =
+              node.data("label").length > 18
+                ? `${node.data("label").substr(0, 15)}...`
+                : `${node.data("label")}`;
 
-            return text
+            return text;
           },
-          'text-opacity': 0.7,
-          'background-color': 'data(backgroundColor)',
-          'border-color': 'data(bordercolor)',
-          'border-width': '1',
-          'shape': 'data(shape)',
-          'text-wrap': 'wrap',
-          'text-max-width': 75,
-          'text-halign': 'center',
-          'text-valign': 'center',
-          'height': 'data(height)',
-          'width': 'data(width)',
-          'color': '#001933',
-          'font-size': 14,
-        }
+          "text-opacity": 0.7,
+          "background-color": "data(backgroundColor)",
+          "border-color": "data(bordercolor)",
+          "border-width": "1",
+          shape: "data(shape)",
+          "text-wrap": "wrap",
+          "text-max-width": 75,
+          "text-halign": "center",
+          "text-valign": "center",
+          height: "data(height)",
+          width: "data(width)",
+          color: "#001933",
+          "font-size": 14,
+        },
       },
       // Edge styling
       {
-        selector: 'edge',
+        selector: "edge",
         style: {
-          'curve-style': 'taxi', // unbundled-bezier | taxi
-          'target-arrow-shape': 'triangle', // Arrow shape pointing to target: triangle
-          'color': 'gray', //#0066cc
-          'width': 'data(lineWidth)',
-          'line-style': 'data(style)',
-        }
+          "curve-style": "taxi", // unbundled-bezier | taxi
+          "target-arrow-shape": "triangle", // Arrow shape pointing to target: triangle
+          color: "gray", //#0066cc
+          width: "data(lineWidth)",
+          "line-style": "data(style)",
+        },
       },
       // Style changes when a node is selected
       {
-        selector: 'node:selected',
-        style:{
-         'border-color': 'red',
-         'border-width': '3',
-        }
+        selector: "node:selected",
+        style: {
+          "border-color": "red",
+          "border-width": "3",
+        },
       },
     ],
   });
 
   // creat tippy.js
   let tip;
-  cy.on('mouseover', 'node', function(event) {
-    const node = event.target
-    let ref = node.popperRef()
-    let dummyDomEle = document.createElement('div');
-    let content = createTooltipContent(node.data('label'));
-    tip = new tippy(dummyDomEle, { // tippy props:
-        getReferenceClientRect: ref.getBoundingClientRect,
-        trigger: 'manual',
-        content:content
-        });
+  cy.on("mouseover", "node", function (event) {
+    const node = event.target;
+    let ref = node.popperRef();
+    let dummyDomEle = document.createElement("div");
+    let content = createTooltipContent(node.data("label"));
+    tip = new tippy(dummyDomEle, {
+      // tippy props:
+      getReferenceClientRect: ref.getBoundingClientRect,
+      trigger: "manual",
+      content: content,
+    });
     tip.show();
-  })
-  cy.on('mouseout', 'node', function(event) {
+  });
+  cy.on("mouseout", "node", function (event) {
     tip.hide();
   });
 }
diff --git a/src/module/numberLabel.js b/src/module/numberLabel.js
index acc7e6d..88bfc36 100644
--- a/src/module/numberLabel.js
+++ b/src/module/numberLabel.js
@@ -12,13 +12,13 @@
  * @returns {string} The formatted string with commas (e.g. "1,000,000").
  */
 const formatNumberWithCommas = (numberStr) => {
-  let reversedStr = numberStr.split('').reverse().join('');
+  let reversedStr = numberStr.split("").reverse().join("");
   let groupedStr = reversedStr.match(/.{1,3}/g);
-  let joinedStr = groupedStr.join(',');
-  let finalStr = joinedStr.split('').reverse().join('');
+  let joinedStr = groupedStr.join(",");
+  let finalStr = joinedStr.split("").reverse().join("");
 
   return finalStr;
-}
+};
 
 /**
  * Converts a number to a string with comma-separated thousands.
@@ -29,7 +29,7 @@ const formatNumberWithCommas = (numberStr) => {
  * @returns {string} The formatted number string (e.g. "1,234.56").
  */
 export default function numberLabel(num) {
-  let parts = num.toString().split('.');
+  let parts = num.toString().split(".");
   parts[0] = formatNumberWithCommas(parts[0]);
-  return parts.join('.');
+  return parts.join(".");
 }
diff --git a/src/module/setChartData.js b/src/module/setChartData.js
index 9a06fff..d803c95 100644
--- a/src/module/setChartData.js
+++ b/src/module/setChartData.js
@@ -6,7 +6,7 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
 /** @module setChartData Chart.js data transformation utilities. */
 
-import getMoment from 'moment';
+import getMoment from "moment";
 
 /**
  * Extends backend chart data with extrapolated boundary points for
@@ -24,30 +24,30 @@ import getMoment from 'moment';
  *   with boundary points.
  */
 export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
-   // Convert baseData to an array of objects with x and y properties
-   let data = baseData.map(i => ({ x: i.x, y: i.y }));
+  // Convert baseData to an array of objects with x and y properties
+  let data = baseData.map((i) => ({ x: i.x, y: i.y }));
 
-   // Calculate the Y-axis minimum value
-   let b = calculateYMin(baseData, isPercent, yMin, yMax);
- 
-   // Calculate the Y-axis maximum value
-   let mf = calculateYMax(baseData, isPercent, yMin, yMax);
- 
-   // Prepend the minimum value
-   data.unshift({
-     x: xMin,
-     y: b,
-   });
- 
-   // Append the maximum value
-   data.push({
-     x: xMax,
-     y: mf,
-   });
- 
-   return data;
- };
- /**
+  // Calculate the Y-axis minimum value
+  let b = calculateYMin(baseData, isPercent, yMin, yMax);
+
+  // Calculate the Y-axis maximum value
+  let mf = calculateYMax(baseData, isPercent, yMin, yMax);
+
+  // Prepend the minimum value
+  data.unshift({
+    x: xMin,
+    y: b,
+  });
+
+  // Append the maximum value
+  data.push({
+    x: xMax,
+    y: mf,
+  });
+
+  return data;
+}
+/**
  * Extrapolates the Y-axis minimum boundary value using linear
  * interpolation from the first two data points.
  *
@@ -65,7 +65,7 @@ function calculateYMin(baseData, isPercent, yMin, yMax) {
   let f = baseData[1].y;
   let b = (e * d - a * d - f * a - f * c) / (e - c - a);
   return clampValue(b, isPercent, yMin, yMax);
-};
+}
 /**
  * Extrapolates the Y-axis maximum boundary value using linear
  * interpolation from the last two data points.
@@ -84,7 +84,7 @@ function calculateYMax(baseData, isPercent, yMin, yMax) {
   let me = 11;
   let mf = (mb * me - mb * mc - md * me + md * ma) / (ma - mc);
   return clampValue(mf, isPercent, yMin, yMax);
-};
+}
 /**
  * Clamps a value within a specified range. If isPercent is true, the
  * value is clamped to [0, 1]; otherwise to [min, max].
@@ -107,11 +107,11 @@ function clampValue(value, isPercent, min, max) {
       return max;
     }
     if (value <= min) {
-        return min;
+      return min;
     }
   }
   return value;
-};
+}
 /**
  * Converts backend chart data timestamps to formatted date strings
  * for bar charts.
@@ -122,14 +122,14 @@ function clampValue(value, isPercent, min, max) {
  *   as "YYYY/M/D hh:mm:ss".
  */
 export function setBarChartData(baseData) {
-  let data = baseData.map(i =>{
+  let data = baseData.map((i) => {
     return {
-      x: getMoment(i.x).format('YYYY/M/D hh:mm:ss'),
-      y: i.y
-    }
-  })
-  return data
-};
+      x: getMoment(i.x).format("YYYY/M/D hh:mm:ss"),
+      y: i.y,
+    };
+  });
+  return data;
+}
 /**
  * Divides a time range into evenly spaced time points.
  *
@@ -149,9 +149,9 @@ export function timeRange(minTime, maxTime, amount) {
   for (let i = 0; i < amount; i++) {
     timeRange.push(startTime + timeGap * i);
   }
-  timeRange = timeRange.map(value => Math.round(value));
+  timeRange = timeRange.map((value) => Math.round(value));
   return timeRange;
-};
+}
 /**
  * Generates smooth Y-axis values using cubic Bezier interpolation
  * to produce evenly spaced ticks matching the X-axis divisions.
@@ -163,39 +163,40 @@ export function timeRange(minTime, maxTime, amount) {
  */
 export function yTimeRange(data, yAmount, yMax) {
   const yRange = [];
-  const yGap = (1/ (yAmount-1));
+  const yGap = 1 / (yAmount - 1);
 
   // Cubic Bezier curve formula
   const threebsr = function (t, a1, a2, a3, a4) {
     return (
       (1 - t) * (1 - t) * (1 - t) * a1 +
-        3 * t * (1 - t)* (1 - t) * a2 +
-        3 * t * t *  (1 - t) * a3 +
-        t * t * t * a4
-    )
+      3 * t * (1 - t) * (1 - t) * a2 +
+      3 * t * t * (1 - t) * a3 +
+      t * t * t * a4
+    );
   };
 
-   for (let j = 0; j < data.length - 1; j++) {
-     for (let i = 0; i <= 1; i += yGap*11) {
-    yRange.push(threebsr(i, data[j].y, data[j].y, data[j + 1].y, data[j + 1].y));
+  for (let j = 0; j < data.length - 1; j++) {
+    for (let i = 0; i <= 1; i += yGap * 11) {
+      yRange.push(
+        threebsr(i, data[j].y, data[j].y, data[j + 1].y, data[j + 1].y),
+      );
     }
   }
 
-  if(yRange.length < yAmount) {
+  if (yRange.length < yAmount) {
     let len = yAmount - yRange.length;
     for (let i = 0; i < len; i++) {
       yRange.push(yRange[yRange.length - 1]);
     }
-  }
-  else if(yRange.length > yAmount) {
+  } else if (yRange.length > yAmount) {
     let len = yRange.length - yAmount;
-    for(let i = 0; i < len; i++) {
+    for (let i = 0; i < len; i++) {
       yRange.splice(1, 1);
     }
   }
 
   return yRange;
-};
+}
 /**
  * Finds the index of the closest value in an array to the given target.
  *
@@ -217,7 +218,7 @@ export function getXIndex(data, xValue) {
   }
 
   return closestIndex;
-};
+}
 /**
  * Formats a duration in seconds to a compact string with d/h/m/s units.
  *
@@ -226,13 +227,13 @@ export function getXIndex(data, xValue) {
  *   or null if the input is NaN.
  */
 export function formatTime(seconds) {
-  if(!isNaN(seconds)) {
+  if (!isNaN(seconds)) {
     const remainingSeconds = seconds % 60;
     const minutes = (Math.floor(seconds - remainingSeconds) / 60) % 60;
-    const hours = (Math.floor(seconds / 3600)) % 24;
+    const hours = Math.floor(seconds / 3600) % 24;
     const days = Math.floor(seconds / (3600 * 24));
 
-    let result = '';
+    let result = "";
     if (days > 0) {
       result += `${days}d`;
     }
@@ -258,20 +259,20 @@ export function formatTime(seconds) {
 export function formatMaxTwo(times) {
   const formattedTimes = [];
   for (let time of times) {
-      // Match numbers and units (days, hours, minutes, seconds); assume numbers have at most 10 digits
-      let units = time.match(/\d{1,10}[dhms]/g);
-      let formattedTime = '';
-      let count = 0;
+    // Match numbers and units (days, hours, minutes, seconds); assume numbers have at most 10 digits
+    let units = time.match(/\d{1,10}[dhms]/g);
+    let formattedTime = "";
+    let count = 0;
 
-      // Keep only the two largest units
-      for (let unit of units) {
-          if (count >= 2) {
-              break;
-          }
-          formattedTime += unit + ' ';
-          count++;
+    // Keep only the two largest units
+    for (let unit of units) {
+      if (count >= 2) {
+        break;
       }
-      formattedTimes.push(formattedTime.trim()); // Remove trailing whitespace
+      formattedTime += unit + " ";
+      count++;
+    }
+    formattedTimes.push(formattedTime.trim()); // Remove trailing whitespace
   }
   return formattedTimes;
 }
diff --git a/src/module/shortScaleNumber.js b/src/module/shortScaleNumber.js
index 3fd0a04..a24640a 100644
--- a/src/module/shortScaleNumber.js
+++ b/src/module/shortScaleNumber.js
@@ -25,5 +25,5 @@ export default function shortScaleNumber(number) {
     index++;
   }
   num = Math.ceil(num * 10) / 10;
-  return num + abbreviations[index] + " " ;
+  return num + abbreviations[index] + " ";
 }
diff --git a/src/module/sortNumEngZhtw.js b/src/module/sortNumEngZhtw.js
index c4f205f..34e8b54 100644
--- a/src/module/sortNumEngZhtw.js
+++ b/src/module/sortNumEngZhtw.js
@@ -25,7 +25,7 @@ export function sortNumEngZhtw(data) {
     if (isANumber) return -1;
     if (isBNumber) return 1;
 
-    return a.localeCompare(b, 'zh-Hant-TW', { sensitivity: 'accent' });
+    return a.localeCompare(b, "zh-Hant-TW", { sensitivity: "accent" });
   });
 }
 
@@ -48,5 +48,5 @@ export function sortNumEngZhtwForFilter(a, b) {
   if (isANumber) return -1;
   if (isBNumber) return 1;
 
-  return a.localeCompare(b, 'zh-Hant-TW', { sensitivity: 'accent' });
+  return a.localeCompare(b, "zh-Hant-TW", { sensitivity: "accent" });
 }
diff --git a/src/module/timeLabel.js b/src/module/timeLabel.js
index 58ae830..e4b7f25 100644
--- a/src/module/timeLabel.js
+++ b/src/module/timeLabel.js
@@ -6,7 +6,7 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
 /** @module timeLabel Time formatting and chart axis tick utilities. */
 
-import moment from 'moment';
+import moment from "moment";
 
 /** @constant {number} Number of decimal places for formatted time values. */
 const TOFIXED_DECIMAL = 1;
@@ -20,12 +20,12 @@ const TOFIXED_DECIMAL = 1;
  *   and the time unit character ("d", "h", "m", or "s").
  */
 export const getStepSizeOfYTicks = (maxTimeInSecond, numOfParts) => {
-  const {unitToUse, timeValue} = getTimeUnitAndValueToUse(maxTimeInSecond);
-  const getLarger = 1 + (1 / (numOfParts - 1));
-  const resultStepSize = (timeValue * getLarger / numOfParts);
+  const { unitToUse, timeValue } = getTimeUnitAndValueToUse(maxTimeInSecond);
+  const getLarger = 1 + 1 / (numOfParts - 1);
+  const resultStepSize = (timeValue * getLarger) / numOfParts;
 
-  return {resultStepSize, unitToUse};
-}
+  return { resultStepSize, unitToUse };
+};
 
 /**
  * Determines the most appropriate time unit for a given number of seconds
@@ -62,7 +62,7 @@ const getTimeUnitAndValueToUse = (secondToDecide) => {
     return {
       unitToUse: "s",
       timeValue: secondToDecide,
-    }
+    };
   }
 };
 
@@ -75,12 +75,14 @@ const getTimeUnitAndValueToUse = (secondToDecide) => {
  * @param {string} unitToUse - The time unit suffix ("d", "h", "m", or "s").
  * @returns {string} The formatted tick label (e.g. "2.5h").
  */
-export function getYTicksByIndex(stepSize, index, unitToUse){
+export function getYTicksByIndex(stepSize, index, unitToUse) {
   const rawStepsizeMultIndex = (stepSize * index).toString();
   const shortenStepsizeMultIndex = rawStepsizeMultIndex.substring(
-    0, rawStepsizeMultIndex.indexOf('.') + 1 + TOFIXED_DECIMAL);
+    0,
+    rawStepsizeMultIndex.indexOf(".") + 1 + TOFIXED_DECIMAL,
+  );
   return `${shortenStepsizeMultIndex}${unitToUse}`;
-};
+}
 
 /**
  * Converts seconds to a human-readable time string with full unit names.
@@ -101,17 +103,15 @@ export function getTimeLabel(second, fixedNumber = 0) {
   const hh = Math.floor((second % day) / hour);
   const mm = Math.floor((second % hour) / minutes);
 
-  if(dd > 0){
-      return (second / day).toFixed(fixedNumber) + " days";
+  if (dd > 0) {
+    return (second / day).toFixed(fixedNumber) + " days";
+  } else if (hh > 0) {
+    return ((second % day) / hour).toFixed(fixedNumber) + " hrs";
+  } else if (mm > 0) {
+    return ((second % hour) / minutes).toFixed(fixedNumber) + " mins";
   }
-  else if(hh > 0){
-      return ((second % day) / hour).toFixed(fixedNumber) + " hrs";
-  }
-  else if(mm > 0){
-      return ((second % hour) / minutes).toFixed(fixedNumber) + " mins";
-  }
-  if(second == 0){
-      return second + " sec";
+  if (second == 0) {
+    return second + " sec";
   }
   return second + " sec";
 }
@@ -134,17 +134,15 @@ export function simpleTimeLabel(second, fixedNumber = 0) {
   const hh = Math.floor((second % day) / hour);
   const mm = Math.floor((second % hour) / minutes);
 
-  if(dd > 0){
-      return (second / day).toFixed(fixedNumber) + "d";
+  if (dd > 0) {
+    return (second / day).toFixed(fixedNumber) + "d";
+  } else if (hh > 0) {
+    return ((second % day) / hour).toFixed(fixedNumber) + "h";
+  } else if (mm > 0) {
+    return ((second % hour) / minutes).toFixed(fixedNumber) + "m";
   }
-  else if(hh > 0){
-      return ((second % day) / hour).toFixed(fixedNumber) + "h";
-  }
-  else if(mm > 0){
-      return ((second % hour) / minutes).toFixed(fixedNumber) + "m";
-  }
-  if(second == 0){
-      return second + "s";
+  if (second == 0) {
+    return second + "s";
   }
   return second + "s";
 }
@@ -167,49 +165,48 @@ export function followTimeLabel(second, max, fixedNumber = 0) {
 
   const dd = max / day;
   const hh = max / hour;
-  const mm = max/ minutes;
-  let maxUnit = '';
+  const mm = max / minutes;
+  let maxUnit = "";
   let result = "";
 
   if (dd > 1) {
-    maxUnit = 'd';
+    maxUnit = "d";
   } else if (hh > 1) {
-    maxUnit = 'h';
+    maxUnit = "h";
   } else if (mm > 1) {
-    maxUnit = 'm';
+    maxUnit = "m";
   } else {
-    maxUnit = 's';
+    maxUnit = "s";
   }
   switch (maxUnit) {
-    case 'd':
-      if((second / day) === 0) {
+    case "d":
+      if (second / day === 0) {
         fixedNumber = 0;
       }
-      result = (second / day).toFixed(fixedNumber) + 'd';
+      result = (second / day).toFixed(fixedNumber) + "d";
       break;
-    case 'h':
-      if((second / hour) === 0) {
+    case "h":
+      if (second / hour === 0) {
         fixedNumber = 0;
       }
-      result = (second / hour).toFixed(fixedNumber) + 'h';
+      result = (second / hour).toFixed(fixedNumber) + "h";
       break;
-    case 'm':
-      if((second / minutes) === 0) {
+    case "m":
+      if (second / minutes === 0) {
         fixedNumber = 0;
       }
-      result = (second / minutes).toFixed(fixedNumber) + 'm';
+      result = (second / minutes).toFixed(fixedNumber) + "m";
       break;
-    case 's':
-      if(second === 0) {
+    case "s":
+      if (second === 0) {
         fixedNumber = 0;
       }
-      result = second.toFixed(fixedNumber) + 's';
+      result = second.toFixed(fixedNumber) + "s";
       break;
   }
   return result;
 }
 
-
 /**
  * Selects an appropriate moment.js date format string based on the
  * difference between the minimum and maximum timestamps.
@@ -221,20 +218,25 @@ export function followTimeLabel(second, max, fixedNumber = 0) {
  * @param {number} maxTimeStamp - The maximum timestamp in seconds.
  * @returns {string} A moment.js format string.
  */
-export const setTimeStringFormatBaseOnTimeDifference = (minTimeStamp, maxTimeStamp) => {
+export const setTimeStringFormatBaseOnTimeDifference = (
+  minTimeStamp,
+  maxTimeStamp,
+) => {
   const timeDifferenceInSeconds = maxTimeStamp - minTimeStamp;
 
   let dateFormat;
   if (timeDifferenceInSeconds < 60) {
-    dateFormat = 'HH:mm:ss'; // Seconds range
+    dateFormat = "HH:mm:ss"; // Seconds range
   } else if (timeDifferenceInSeconds < 3600) {
-    dateFormat = 'MM/DD HH:mm'; // Minutes range
-  } else if (timeDifferenceInSeconds < 86400) { // 86400 seconds = 24 hours
-    dateFormat = 'MM/DD HH:mm'; // Hours range
-  } else if (timeDifferenceInSeconds < 2592000) { // 2592000 seconds = 30 days
-    dateFormat = 'YYYY/MM/DD'; // Days range
+    dateFormat = "MM/DD HH:mm"; // Minutes range
+  } else if (timeDifferenceInSeconds < 86400) {
+    // 86400 seconds = 24 hours
+    dateFormat = "MM/DD HH:mm"; // Hours range
+  } else if (timeDifferenceInSeconds < 2592000) {
+    // 2592000 seconds = 30 days
+    dateFormat = "YYYY/MM/DD"; // Days range
   } else {
-    dateFormat = 'YYYY/MM/DD'; // Months range
+    dateFormat = "YYYY/MM/DD"; // Months range
   }
 
   return dateFormat;
@@ -251,6 +253,6 @@ export const setTimeStringFormatBaseOnTimeDifference = (minTimeStamp, maxTimeSta
  */
 export const mapTimestampToAxisTicksByFormat = (timeStampArr, timeFormat) => {
   if (timeStampArr) {
-    return timeStampArr.map(ts => moment(ts).format(timeFormat));
-  }  
-};
\ No newline at end of file
+    return timeStampArr.map((ts) => moment(ts).format(timeFormat));
+  }
+};
diff --git a/src/module/tooltipContent.js b/src/module/tooltipContent.js
index a0da7a9..96d8ccd 100644
--- a/src/module/tooltipContent.js
+++ b/src/module/tooltipContent.js
@@ -11,7 +11,7 @@
  * @returns {HTMLDivElement} A div element with text-only content.
  */
 export function createTooltipContent(label) {
-  const content = document.createElement('div');
-  content.textContent = String(label ?? '');
+  const content = document.createElement("div");
+  content.textContent = String(label ?? "");
   return content;
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 18987cc..c159bb1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -9,29 +9,29 @@
  *   navigation guards, and authentication redirect logic.
  */
 
-import { createRouter, createWebHistory, } from "vue-router";
-import AuthContainer from '@/views/AuthContainer.vue';
-import MainContainer from '@/views/MainContainer.vue';
-import Login from '@/views/Login/Login.vue';
-import Files from '@/views/Files/Files.vue';
-import Upload from '@/views/Upload/index.vue';
-import Map from '@/views/Discover/Map/Map.vue';
-import Conformance from '@/views/Discover/Conformance/index.vue';
-import Performance from '@/views/Discover/Performance/index.vue';
-import CompareDashboard from '@/views/Compare/Dashboard/Compare.vue';
-import MapCompare from '@/views/Compare/MapCompare.vue';
-import AccountAdmin from '@/views/AccountManagement/AccountAdmin/AccountAdmin.vue';
-import MyAccount from '@/views/AccountManagement/MyAccount.vue';
-import MemberArea from '@/views/MemberArea/index.vue';
-import NotFound404 from '@/views/NotFound404.vue';
+import { createRouter, createWebHistory } from "vue-router";
+import AuthContainer from "@/views/AuthContainer.vue";
+import MainContainer from "@/views/MainContainer.vue";
+import Login from "@/views/Login/Login.vue";
+import Files from "@/views/Files/Files.vue";
+import Upload from "@/views/Upload/index.vue";
+import Map from "@/views/Discover/Map/Map.vue";
+import Conformance from "@/views/Discover/Conformance/index.vue";
+import Performance from "@/views/Discover/Performance/index.vue";
+import CompareDashboard from "@/views/Compare/Dashboard/Compare.vue";
+import MapCompare from "@/views/Compare/MapCompare.vue";
+import AccountAdmin from "@/views/AccountManagement/AccountAdmin/AccountAdmin.vue";
+import MyAccount from "@/views/AccountManagement/MyAccount.vue";
+import MemberArea from "@/views/MemberArea/index.vue";
+import NotFound404 from "@/views/NotFound404.vue";
 
 const routes = [
   {
-    path: '/', // Default entry route
-    redirect: '/files',  // Redirect to /files
-   },
+    path: "/", // Default entry route
+    redirect: "/files", // Redirect to /files
+  },
   {
-    path: '/',
+    path: "/",
     name: "AuthContainer",
     component: AuthContainer,
     children: [
@@ -40,7 +40,7 @@ const routes = [
         name: "Login",
         component: Login,
       },
-    ]
+    ],
   },
   {
     path: "/",
@@ -48,7 +48,7 @@ const routes = [
     component: MainContainer,
     meta: {
       title: "MainContainer",
-      requiresAuth: true
+      requiresAuth: true,
     },
     children: [
       {
@@ -70,16 +70,17 @@ const routes = [
             name: "AcctAdmin",
             component: AccountAdmin,
           },
-        ]
-      },{
-         path: "/my-account",
+        ],
+      },
+      {
+        path: "/my-account",
         name: "My Account",
         component: MyAccount,
       },
       {
         path: "/upload", // router.push({ replace: true }) does not add the path to history
         name: "Upload",
-        component: Upload
+        component: Upload,
       },
       {
         path: "/discover",
@@ -114,7 +115,7 @@ const routes = [
             component: Map,
             meta: {
               file: {}, // parent log or parent filter
-            }
+            },
           },
           {
             // type: log | filter, the parameter can be either.
@@ -124,7 +125,7 @@ const routes = [
             component: Conformance,
             meta: {
               file: {}, // parent log or parent filter
-            }
+            },
           },
           {
             // type: log | filter, the parameter can be either.
@@ -134,9 +135,9 @@ const routes = [
             component: Performance,
             meta: {
               file: {}, // parent log or parent filter
-            }
+            },
           },
-        ]
+        ],
       },
       {
         path: "/compare",
@@ -146,14 +147,15 @@ const routes = [
             path: "/compare/dashboard/:primaryType/:primaryId/:secondaryType/:secondaryId",
             name: "CompareDashboard",
             component: CompareDashboard,
-          }, {
+          },
+          {
             path: "/compare/map/:primaryType/:primaryId/:secondaryType/:secondaryId",
             name: "MapCompare",
             component: MapCompare,
-          }
-        ]
+          },
+        ],
       },
-    ]
+    ],
   },
   {
     path: "/:pathMatch(.*)*",
@@ -166,7 +168,7 @@ const base_url = import.meta.env.BASE_URL;
 const router = createRouter({
   history: createWebHistory(base_url), //(/)
   // history: createWebHashHistory(base_url), // (/#)
-  routes
+  routes,
 });
 
 // Global navigation guard
@@ -175,9 +177,11 @@ router.beforeEach((to, from) => {
   // from: Route: the current route being navigated away from
 
   // When navigating to the login page, redirect to Files if already logged in
-  if (to.name === 'Login') {
-    const isLoggedIn = document.cookie.split(';').some(c => c.trim().startsWith('isLuciaLoggedIn='));
-    if (isLoggedIn) return { name: 'Files' };
+  if (to.name === "Login") {
+    const isLoggedIn = document.cookie
+      .split(";")
+      .some((c) => c.trim().startsWith("isLuciaLoggedIn="));
+    if (isLoggedIn) return { name: "Files" };
   }
 });
 
diff --git a/src/stores/allMapData.ts b/src/stores/allMapData.ts
index c68cba9..b22ea44 100644
--- a/src/stores/allMapData.ts
+++ b/src/stores/allMapData.ts
@@ -13,8 +13,8 @@
 import { defineStore } from "pinia";
 import moment from "moment";
 import apiClient from "@/api/client.js";
-import apiError from '@/module/apiError.js';
-import { Decimal } from 'decimal.js';
+import apiError from "@/module/apiError.js";
+import { Decimal } from "decimal.js";
 
 /**
  * Returns the API base path for the current map data source,
@@ -30,7 +30,7 @@ function getMapApiBase(state) {
 }
 
 /** Pinia store for Discover Map page data and filter management. */
-export const useAllMapDataStore = defineStore('allMapDataStore', {
+export const useAllMapDataStore = defineStore("allMapDataStore", {
   state: () => ({
     baseLogId: null,
     logId: null,
@@ -68,73 +68,85 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
     baseInfiniteStart: 0, // Starting index for base infinite scroll cases
   }),
   getters: {
-    processMap: state => {
+    processMap: (state) => {
       return state.allProcessMap;
     },
-    bpmn: state => {
+    bpmn: (state) => {
       return state.allBpmn;
     },
-    stats: state => {
+    stats: (state) => {
       return state.allStats;
     },
-    insights: state => {
+    insights: (state) => {
       return state.allInsights;
     },
-    traces: state => {
+    traces: (state) => {
       return state.allTrace.sort((x, y) => x.id - y.id);
     },
-    baseTraces: state => {
+    baseTraces: (state) => {
       return state.allBaseTrace.sort((x, y) => x.id - y.id);
     },
-    cases: state => {
+    cases: (state) => {
       return state.allCase;
     },
-    baseCases: state => {
+    baseCases: (state) => {
       return state.allBaseCase;
     },
-    infiniteFirstCases: state => {
-      if(state.infiniteStart === 0) return state.allCase;
+    infiniteFirstCases: (state) => {
+      if (state.infiniteStart === 0) return state.allCase;
     },
-    BaseInfiniteFirstCases: state => {
-      if(state.baseInfiniteStart === 0) return state.allBaseCase;
+    BaseInfiniteFirstCases: (state) => {
+      if (state.baseInfiniteStart === 0) return state.allBaseCase;
     },
-    traceTaskSeq: state => {
+    traceTaskSeq: (state) => {
       return state.allTraceTaskSeq;
     },
-    baseTraceTaskSeq: state => {
+    baseTraceTaskSeq: (state) => {
       return state.allBaseTraceTaskSeq;
     },
     // All tasks
-    filterTasks: state => {
+    filterTasks: (state) => {
       return state.allFilterTask;
     },
     // form start to end tasks
-    filterStartToEnd: state => {
+    filterStartToEnd: (state) => {
       return state.allFilterStartToEnd;
     },
     // form end to start tasks
-    filterEndToStart: state => {
+    filterEndToStart: (state) => {
       return state.allFilterEndToStart;
     },
-    filterTimeframe: state => {
+    filterTimeframe: (state) => {
       return state.allFilterTimeframe;
     },
-    filterTrace: state => {
+    filterTrace: (state) => {
       return state.allFilterTrace;
     },
-    filterAttrs: state => {
-      if(state.allFilterAttrs !== null){
-        return state.allFilterAttrs.map(att => {
+    filterAttrs: (state) => {
+      if (state.allFilterAttrs !== null) {
+        return state.allFilterAttrs.map((att) => {
           const copy = { ...att };
           switch (copy.type) {
-            case 'date':
-              copy.min = copy.min !== null ? moment(copy.min).format('YYYY/MM/DD HH:mm') : null;
-              copy.max = copy.max !== null ? moment(copy.max).format('YYYY/MM/DD HH:mm') : null;
+            case "date":
+              copy.min =
+                copy.min !== null
+                  ? moment(copy.min).format("YYYY/MM/DD HH:mm")
+                  : null;
+              copy.max =
+                copy.max !== null
+                  ? moment(copy.max).format("YYYY/MM/DD HH:mm")
+                  : null;
+              break;
+            case "float":
+              copy.min =
+                copy.min !== null
+                  ? Number(new Decimal(copy.min).toFixed(2, 1))
+                  : null;
+              copy.max =
+                copy.max !== null
+                  ? Number(new Decimal(copy.max).toFixed(2, 0))
+                  : null;
               break;
-            case 'float':
-              copy.min = copy.min !== null ? Number(new Decimal(copy.min).toFixed(2, 1)) : null;
-              copy.max = copy.max !== null ? Number(new Decimal(copy.max).toFixed(2, 0)) : null;
-              break
             default:
               break;
           }
@@ -142,7 +154,7 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
         });
       }
     },
-    allFunnels: state => {
+    allFunnels: (state) => {
       return state.allFunnelData;
     },
   },
@@ -158,9 +170,9 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
         this.allBpmn = response.data.bpmn;
         this.allStats = response.data.stats;
         this.allInsights = response.data.insights;
-      } catch(error) {
-        apiError(error, 'Failed to load the Map.');
-      };
+      } catch (error) {
+        apiError(error, "Failed to load the Map.");
+      }
     },
     /**
      * fetch trace api.
@@ -173,12 +185,12 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
         let baseResponse;
         const response = await apiClient.get(api);
         this.allTrace = response.data;
-        if(baseLogId) {
+        if (baseLogId) {
           baseResponse = await apiClient.get(baseApi);
           this.allBaseTrace = baseResponse.data;
         }
-      } catch(error) {
-        apiError(error, 'Failed to load the Trace.');
+      } catch (error) {
+        apiError(error, "Failed to load the Trace.");
       }
     },
     /**
@@ -192,30 +204,36 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
         const response = await apiClient.get(api);
         this.allTraceTaskSeq = response.data.task_seq;
         this.allCase = response.data.cases;
-        this.allCase.forEach(c => {
-          c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:mm');
-          c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm');
-          c.attributes.forEach(att => {
+        this.allCase.forEach((c) => {
+          c.started_at = moment(c.started_at).format("YYYY/MM/DD HH:mm");
+          c.completed_at = moment(c.completed_at).format("YYYY/MM/DD HH:mm");
+          c.attributes.forEach((att) => {
             switch (att.type) {
-              case 'date':
-                att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:mm') : null;
+              case "date":
+                att.value =
+                  att.value !== null
+                    ? moment(att.value).format("YYYY/MM/DD HH:mm")
+                    : null;
                 break;
-              case 'float':
-                att.value = att.value !== null ? Number(new Decimal(att.value).toFixed(2)) : null;
+              case "float":
+                att.value =
+                  att.value !== null
+                    ? Number(new Decimal(att.value).toFixed(2))
+                    : null;
                 break;
               default:
                 break;
             }
-          })
+          });
         });
         return this.allCase;
-      } catch(error) {
-        if(error.response?.status === 404) {
+      } catch (error) {
+        if (error.response?.status === 404) {
           this.infinite404 = 404;
           return;
         }
-        apiError(error, 'Failed to load the Trace Detail.');
-      };
+        apiError(error, "Failed to load the Trace Detail.");
+      }
     },
     /**
      * fetch base log trace detail api.
@@ -230,30 +248,36 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
         const response = await apiClient.get(api);
         this.allBaseTraceTaskSeq = response.data.task_seq;
         this.allBaseCase = response.data.cases;
-        this.allBaseCase.forEach(c => {
-          c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:mm');
-          c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm');
-          c.attributes.forEach(att => {
+        this.allBaseCase.forEach((c) => {
+          c.started_at = moment(c.started_at).format("YYYY/MM/DD HH:mm");
+          c.completed_at = moment(c.completed_at).format("YYYY/MM/DD HH:mm");
+          c.attributes.forEach((att) => {
             switch (att.type) {
-              case 'date':
-                att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:mm') : null;
+              case "date":
+                att.value =
+                  att.value !== null
+                    ? moment(att.value).format("YYYY/MM/DD HH:mm")
+                    : null;
                 break;
-              case 'float':
-                att.value = att.value !== null ? Number(new Decimal(att.value).toFixed(2)) : null;
+              case "float":
+                att.value =
+                  att.value !== null
+                    ? Number(new Decimal(att.value).toFixed(2))
+                    : null;
                 break;
               default:
                 break;
             }
-          })
+          });
         });
         return this.allBaseCase;
-      } catch(error) {
-        if(error.response?.status === 404) {
+      } catch (error) {
+        if (error.response?.status === 404) {
           this.infinite404 = 404;
           return;
         }
-        apiError(error, 'Failed to load the Base Trace Detail.');
-      };
+        apiError(error, "Failed to load the Base Trace Detail.");
+      }
     },
     /**
      * fetch Filter Parameters api.
@@ -277,11 +301,13 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
         this.allFilterTimeframe.x_axis.min_base = min;
         this.allFilterTimeframe.x_axis.max_base = max;
         // Convert to a time format without seconds
-        this.allFilterTimeframe.x_axis.min = min !== null ? moment(min).format('YYYY/MM/DD HH:mm') : null;
-        this.allFilterTimeframe.x_axis.max = max !== null ? moment(max).format('YYYY/MM/DD HH:mm') : null;
-      } catch(error) {
-        apiError(error, 'Failed to load the Filter Parameters.');
-      };
+        this.allFilterTimeframe.x_axis.min =
+          min !== null ? moment(min).format("YYYY/MM/DD HH:mm") : null;
+        this.allFilterTimeframe.x_axis.max =
+          max !== null ? moment(max).format("YYYY/MM/DD HH:mm") : null;
+      } catch (error) {
+        apiError(error, "Failed to load the Filter Parameters.");
+      }
     },
     /**
      * Test if the Filter Rules Result in Any Data
@@ -291,11 +317,11 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
       const api = `/api/filters/has-result?log_id=${logId}`;
 
       try {
-        const response = await apiClient.post(api, this.postRuleData)
+        const response = await apiClient.post(api, this.postRuleData);
         this.hasResultRule = response.data.result;
-      } catch(error) {
-        apiError(error, 'Failed to load the Has Result.');
-      };
+      } catch (error) {
+        apiError(error, "Failed to load the Has Result.");
+      }
     },
     /**
      * Add a New Temporary Filter
@@ -305,11 +331,11 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
       const api = `/api/temp-filters?log_id=${logId}`;
 
       try {
-        const response = await apiClient.post(api, this.postRuleData)
+        const response = await apiClient.post(api, this.postRuleData);
         this.tempFilterId = response.data.id;
-      } catch(error) {
-        apiError(error, 'Failed to add the Temporary Filters.');
-      };
+      } catch (error) {
+        apiError(error, "Failed to add the Temporary Filters.");
+      }
     },
     /**
      * Add a New Filter
@@ -320,16 +346,16 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
       const api = `/api/filters?log_id=${logId}`;
       const createFilterObj = {
         name: value,
-        rules: this.postRuleData
+        rules: this.postRuleData,
       };
 
       try {
         const response = await apiClient.post(api, createFilterObj);
         this.createFilterId = response.data.id;
         this.tempFilterId = null;
-      }catch(error) {
-        apiError(error, 'Failed to load the Filters.');
-      };
+      } catch (error) {
+        apiError(error, "Failed to load the Filters.");
+      }
     },
     /**
      * Get Filter Detail
@@ -338,15 +364,15 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
     async fetchFunnel(createFilterId) {
       const api = `/api/filters/${createFilterId}`;
 
-      if(createFilterId){
+      if (createFilterId) {
         try {
           const response = await apiClient.get(api);
           this.temporaryData = response.data.rules;
           this.logId = response.data.log.id;
           this.filterName = response.data.name;
           this.baseLogId = response.data.log.id;
-        }catch(error) {
-          apiError(error, 'Failed to get Filter Detail.');
+        } catch (error) {
+          apiError(error, "Failed to get Filter Detail.");
         }
       }
     },
@@ -354,7 +380,7 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
      * Update an Existing Filter
      */
     async updateFilter() {
-      const createFilterId = this.createFilterId
+      const createFilterId = this.createFilterId;
       const api = `/api/filters/${createFilterId}`;
       const data = this.postRuleData;
 
@@ -362,9 +388,9 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
         const response = await apiClient.put(api, data);
         this.isUpdateFilter = response.status === 200;
         this.tempFilterId = null;
-      }catch(error) {
-        apiError(error, 'Failed to update an Existing Filter.');
+      } catch (error) {
+        apiError(error, "Failed to update an Existing Filter.");
       }
     },
   },
-})
+});
diff --git a/src/stores/compare.ts b/src/stores/compare.ts
index 51665bc..cd8840e 100644
--- a/src/stores/compare.ts
+++ b/src/stores/compare.ts
@@ -11,15 +11,15 @@
 
 import { defineStore } from "pinia";
 import apiClient from "@/api/client.js";
-import apiError from '@/module/apiError.js';
+import apiError from "@/module/apiError.js";
 
 /** Pinia store for the Compare Dashboard page data. */
-export const useCompareStore = defineStore('compareStore', {
+export const useCompareStore = defineStore("compareStore", {
   state: () => ({
     allCompareDashboardData: null,
   }),
   getters: {
-    compareDashboardData: state => {
+    compareDashboardData: (state) => {
       return state.allCompareDashboardData;
     },
   },
@@ -36,8 +36,8 @@ export const useCompareStore = defineStore('compareStore', {
       try {
         const response = await apiClient.get(api);
         this.allCompareDashboardData = response.data;
-      } catch(error) {
-        apiError(error, 'Failed to load the Compare.');
+      } catch (error) {
+        apiError(error, "Failed to load the Compare.");
       }
     },
     /**
@@ -46,38 +46,38 @@ export const useCompareStore = defineStore('compareStore', {
      * @param {number} id log or filter ID
      */
     async getStateData(type, id) {
-      let api = '';
+      let api = "";
 
       switch (type) {
-        case 'log':
+        case "log":
           api = `/api/logs/${id}/discover`;
           break;
-        case 'filter':
-          api = `/api/filters/${id}/discover`
+        case "filter":
+          api = `/api/filters/${id}/discover`;
           break;
       }
       try {
         const response = await apiClient.get(api);
 
         return response.data.stats;
-      } catch(error) {
+      } catch (error) {
         apiError(error, "Failed to load the Compare's States.");
-      };
+      }
     },
     /**
      * Get file's name
      * @param {number} id log or filter ID
      */
     async getFileName(id) {
-      id = Number(id)
+      id = Number(id);
       try {
-        const response = await apiClient.get('/api/files');
-        const file = response.data.find(i => i.id === id);
+        const response = await apiClient.get("/api/files");
+        const file = response.data.find((i) => i.id === id);
 
-        if(file) return file.name;
-      } catch(error) {
+        if (file) return file.name;
+      } catch (error) {
         apiError(error, "Failed to load the Compare's file name.");
       }
-    }
+    },
   },
-})
+});
diff --git a/src/stores/conformance.ts b/src/stores/conformance.ts
index a5b7975..4632eb2 100644
--- a/src/stores/conformance.ts
+++ b/src/stores/conformance.ts
@@ -11,10 +11,10 @@
 
 import { defineStore } from "pinia";
 import moment from "moment";
-import { Decimal } from 'decimal.js';
-import abbreviateNumber from '@/module/abbreviateNumber.js';
+import { Decimal } from "decimal.js";
+import abbreviateNumber from "@/module/abbreviateNumber.js";
 import apiClient from "@/api/client.js";
-import apiError from '@/module/apiError.js';
+import apiError from "@/module/apiError.js";
 
 /**
  * Returns the API base path for the current conformance check,
@@ -23,13 +23,21 @@ import apiError from '@/module/apiError.js';
  * @returns {string} The API base path.
  */
 function getCheckApiBase(state) {
-  const { conformanceFilterTempCheckId, conformanceLogTempCheckId,
-          conformanceFilterCreateCheckId, conformanceLogCreateCheckId } = state;
-  if (conformanceFilterTempCheckId !== null) return `/api/temp-filter-checks/${conformanceFilterTempCheckId}`;
-  if (conformanceLogTempCheckId !== null) return `/api/temp-log-checks/${conformanceLogTempCheckId}`;
-  if (conformanceFilterCreateCheckId !== null) return `/api/filter-checks/${conformanceFilterCreateCheckId}`;
-  if (conformanceLogCreateCheckId !== null) return `/api/log-checks/${conformanceLogCreateCheckId}`;
-  return '';
+  const {
+    conformanceFilterTempCheckId,
+    conformanceLogTempCheckId,
+    conformanceFilterCreateCheckId,
+    conformanceLogCreateCheckId,
+  } = state;
+  if (conformanceFilterTempCheckId !== null)
+    return `/api/temp-filter-checks/${conformanceFilterTempCheckId}`;
+  if (conformanceLogTempCheckId !== null)
+    return `/api/temp-log-checks/${conformanceLogTempCheckId}`;
+  if (conformanceFilterCreateCheckId !== null)
+    return `/api/filter-checks/${conformanceFilterCreateCheckId}`;
+  if (conformanceLogCreateCheckId !== null)
+    return `/api/log-checks/${conformanceLogCreateCheckId}`;
+  return "";
 }
 
 /**
@@ -41,13 +49,13 @@ function getCheckApiBase(state) {
 function getFileTypeApi(state) {
   const { conformanceFilterId, conformanceLogId } = state;
   if (conformanceFilterId !== null) {
-    return { prefix: 'filter', idParam: `filter_id=${conformanceFilterId}` };
+    return { prefix: "filter", idParam: `filter_id=${conformanceFilterId}` };
   }
-  return { prefix: 'log', idParam: `log_id=${conformanceLogId}` };
+  return { prefix: "log", idParam: `log_id=${conformanceLogId}` };
 }
 
 /** Pinia store for conformance checking and rule management. */
-export const useConformanceStore = defineStore('conformanceStore', {
+export const useConformanceStore = defineStore("conformanceStore", {
   state: () => ({
     conformanceLogId: null, // Log file
     conformanceFilterId: null, // Filter file
@@ -69,12 +77,12 @@ export const useConformanceStore = defineStore('conformanceStore', {
     allLoopTraces: null,
     allLoopTaskSeq: null,
     allLoopCases: null,
-    selectedRuleType: 'Have activity', // radio
-    selectedActivitySequence: 'Start & End', // radio
-    selectedMode: 'Directly follows', // radio
-    selectedProcessScope: 'End to end', // radio
-    selectedActSeqMore: 'All', // radio
-    selectedActSeqFromTo: 'From', // radio
+    selectedRuleType: "Have activity", // radio
+    selectedActivitySequence: "Start & End", // radio
+    selectedMode: "Directly follows", // radio
+    selectedProcessScope: "End to end", // radio
+    selectedActSeqMore: "All", // radio
+    selectedActSeqFromTo: "From", // radio
     infinite404: null,
     isStartSelected: null, // Whether start is selected in linked start & end selection
     isEndSelected: null, // Whether end is selected in linked start & end selection
@@ -83,109 +91,119 @@ export const useConformanceStore = defineStore('conformanceStore', {
     conformanceFileName: null, // File name displayed in the save success modal
   }),
   getters: {
-    conformanceAllTasks: state => {
+    conformanceAllTasks: (state) => {
       return state.allConformanceTask;
     },
-    conformanceTask: state => {
-      return state.allConformanceTask.map(i => i.label);
+    conformanceTask: (state) => {
+      return state.allConformanceTask.map((i) => i.label);
     },
-    cfmSeqStart: state => {
+    cfmSeqStart: (state) => {
       return state.allCfmSeqStart;
     },
-    cfmSeqEnd: state => {
+    cfmSeqEnd: (state) => {
       return state.allCfmSeqEnd;
     },
-    cfmPtEteWhole: state => {
+    cfmPtEteWhole: (state) => {
       return state.allProcessingTime.end_to_end.whole;
     },
-    cfmPtEteStart: state => {
+    cfmPtEteStart: (state) => {
       return state.allProcessingTime.end_to_end.starts_with;
     },
-    cfmPtEteEnd: state => {
+    cfmPtEteEnd: (state) => {
       return state.allProcessingTime.end_to_end.ends_with;
     },
-    cfmPtEteSE: state => {
+    cfmPtEteSE: (state) => {
       return state.allProcessingTime.end_to_end.start_end;
     },
-    cfmPtPStart: state => {
+    cfmPtPStart: (state) => {
       return state.allProcessingTime.partial.starts_with;
     },
-    cfmPtPEnd: state => {
+    cfmPtPEnd: (state) => {
       return state.allProcessingTime.partial.ends_with;
     },
-    cfmPtPSE: state => {
+    cfmPtPSE: (state) => {
       return state.allProcessingTime.partial.start_end;
     },
-    cfmWtEteWhole: state => {
+    cfmWtEteWhole: (state) => {
       return state.allWaitingTime.end_to_end.whole;
     },
-    cfmWtEteStart: state => {
+    cfmWtEteStart: (state) => {
       return state.allWaitingTime.end_to_end.starts_with;
     },
-    cfmWtEteEnd: state => {
+    cfmWtEteEnd: (state) => {
       return state.allWaitingTime.end_to_end.ends_with;
     },
-    cfmWtEteSE: state => {
+    cfmWtEteSE: (state) => {
       return state.allWaitingTime.end_to_end.start_end;
     },
-    cfmWtPStart: state => {
+    cfmWtPStart: (state) => {
       return state.allWaitingTime.partial.starts_with;
     },
-    cfmWtPEnd: state => {
+    cfmWtPEnd: (state) => {
       return state.allWaitingTime.partial.ends_with;
     },
-    cfmWtPSE: state => {
+    cfmWtPSE: (state) => {
       return state.allWaitingTime.partial.start_end;
     },
-    cfmCtEteWhole: state => {
+    cfmCtEteWhole: (state) => {
       return state.allCycleTime.end_to_end.whole;
     },
-    cfmCtEteStart: state => {
+    cfmCtEteStart: (state) => {
       return state.allCycleTime.end_to_end.starts_with;
     },
-    cfmCtEteEnd: state => {
+    cfmCtEteEnd: (state) => {
       return state.allCycleTime.end_to_end.ends_with;
     },
-    cfmCtEteSE: state => {
+    cfmCtEteSE: (state) => {
       return state.allCycleTime.end_to_end.start_end;
     },
-    conformanceTempReportData: state => {
+    conformanceTempReportData: (state) => {
       return state.allConformanceTempReportData;
     },
-    routeFile: state => {
+    routeFile: (state) => {
       return state.allRouteFile;
     },
-    issueTraces: state => {
+    issueTraces: (state) => {
       return state.allIssueTraces;
     },
-    taskSeq: state => {
+    taskSeq: (state) => {
       return state.allTaskSeq;
     },
-    cases: state => {
-      if(state.allCases !== null){
-        return state.allCases.map(c => {
-          const facets = c.facets.map(fac => {
+    cases: (state) => {
+      if (state.allCases !== null) {
+        return state.allCases.map((c) => {
+          const facets = c.facets.map((fac) => {
             const copy = { ...fac };
-            switch(copy.type) {
-              case 'dummy': //sonar-qube
-              case 'duration-list':
-                copy.value = copy.value.map(v => v !== null ? abbreviateNumber(new Decimal(v.toFixed(2))) : null);
-                copy.value = (copy.value).map(v => v.trim()).join(', ');
+            switch (copy.type) {
+              case "dummy": //sonar-qube
+              case "duration-list":
+                copy.value = copy.value.map((v) =>
+                  v !== null
+                    ? abbreviateNumber(new Decimal(v.toFixed(2)))
+                    : null,
+                );
+                copy.value = copy.value.map((v) => v.trim()).join(", ");
                 break;
               default:
                 break;
-            };
+            }
             return copy;
           });
-          const attributes = c.attributes.map(att => {
+          const attributes = c.attributes.map((att) => {
             const copy = { ...att };
             switch (copy.type) {
-              case 'date':
-                copy.value = copy.value !== null ? moment(copy.value).format('YYYY/MM/DD HH:mm:ss') : null;
+              case "date":
+                copy.value =
+                  copy.value !== null
+                    ? moment(copy.value).format("YYYY/MM/DD HH:mm:ss")
+                    : null;
+                break;
+              case "float":
+                copy.value =
+                  copy.value !== null
+                    ? new Decimal(copy.value).toFixed(2)
+                    : null;
                 break;
-              case 'float':
-                copy.value = copy.value !== null ? new Decimal(copy.value).toFixed(2) : null;
-                break
               default:
                 break;
             }
@@ -193,32 +211,38 @@ export const useConformanceStore = defineStore('conformanceStore', {
           });
           return {
             ...c,
-            started_at: moment(c.started_at).format('YYYY/MM/DD HH:mm'),
-            completed_at: moment(c.completed_at).format('YYYY/MM/DD HH:mm'),
+            started_at: moment(c.started_at).format("YYYY/MM/DD HH:mm"),
+            completed_at: moment(c.completed_at).format("YYYY/MM/DD HH:mm"),
             facets,
             attributes,
           };
         });
-      };
+      }
     },
-    loopTraces: state => {
+    loopTraces: (state) => {
       return state.allLoopTraces;
     },
-    loopTaskSeq: state => {
+    loopTaskSeq: (state) => {
       return state.allLoopTaskSeq;
     },
-    loopCases: state => {
-      if(state.allLoopCases !== null){
-        return state.allLoopCases.map(c => {
-          const attributes = c.attributes.map(att => {
+    loopCases: (state) => {
+      if (state.allLoopCases !== null) {
+        return state.allLoopCases.map((c) => {
+          const attributes = c.attributes.map((att) => {
             const copy = { ...att };
             switch (copy.type) {
-              case 'date':
-                copy.value = copy.value !== null ? moment(copy.value).format('YYYY/MM/DD HH:mm:ss') : null;
+              case "date":
+                copy.value =
+                  copy.value !== null
+                    ? moment(copy.value).format("YYYY/MM/DD HH:mm:ss")
+                    : null;
+                break;
+              case "float":
+                copy.value =
+                  copy.value !== null
+                    ? new Decimal(copy.value).toFixed(2)
+                    : null;
                 break;
-              case 'float':
-                copy.value = copy.value !== null ? new Decimal(copy.value).toFixed(2) : null;
-                break
               default:
                 break;
             }
@@ -226,12 +250,12 @@ export const useConformanceStore = defineStore('conformanceStore', {
           });
           return {
             ...c,
-            started_at: moment(c.started_at).format('YYYY/MM/DD HH:mm'),
-            completed_at: moment(c.completed_at).format('YYYY/MM/DD HH:mm'),
+            started_at: moment(c.started_at).format("YYYY/MM/DD HH:mm"),
+            completed_at: moment(c.completed_at).format("YYYY/MM/DD HH:mm"),
             attributes,
           };
         });
-      };
+      }
     },
   },
   actions: {
@@ -249,8 +273,8 @@ export const useConformanceStore = defineStore('conformanceStore', {
         this.allProcessingTime = response.data.processing_time;
         this.allWaitingTime = response.data.waiting_time;
         this.allCycleTime = response.data.cycle_time;
-      } catch(error) {
-        apiError(error, 'Failed to load the Conformance Parameters.');
+      } catch (error) {
+        apiError(error, "Failed to load the Conformance Parameters.");
       }
     },
     /**
@@ -263,13 +287,13 @@ export const useConformanceStore = defineStore('conformanceStore', {
 
       try {
         const response = await apiClient.post(api, data);
-        if (prefix === 'filter') {
+        if (prefix === "filter") {
           this.conformanceFilterTempCheckId = response.data.id;
         } else {
           this.conformanceLogTempCheckId = response.data.id;
         }
-      } catch(error) {
-        apiError(error, 'Failed to add the Temporary Check for a file.');
+      } catch (error) {
+        apiError(error, "Failed to add the Temporary Check for a file.");
       }
     },
     /**
@@ -280,13 +304,13 @@ export const useConformanceStore = defineStore('conformanceStore', {
       const api = getCheckApiBase(this);
       try {
         const response = await apiClient.get(api);
-        if(!getRouteFile) {
-          this.allConformanceTempReportData = response.data
+        if (!getRouteFile) {
+          this.allConformanceTempReportData = response.data;
         } else {
           this.allRouteFile = response.data.file;
         }
-      } catch(error) {
-        apiError(error, 'Failed to Get the Temporary Log Conformance Report.');
+      } catch (error) {
+        apiError(error, "Failed to Get the Temporary Log Conformance Report.");
       }
     },
     /**
@@ -298,9 +322,12 @@ export const useConformanceStore = defineStore('conformanceStore', {
       try {
         const response = await apiClient.get(api);
         this.allIssueTraces = response.data.traces;
-      } catch(error) {
-        apiError(error, 'Failed to Get the detail of a temporary log conformance issue.');
-      };
+      } catch (error) {
+        apiError(
+          error,
+          "Failed to Get the detail of a temporary log conformance issue.",
+        );
+      }
     },
     /**
      * Get the Trace Details of a Temporary Log Conformance lssue.
@@ -315,13 +342,16 @@ export const useConformanceStore = defineStore('conformanceStore', {
         this.allTaskSeq = response.data.task_seq;
         this.allCases = response.data.cases;
         return response.data.cases;
-      } catch(error) {
-        if(error.response?.status === 404) {
+      } catch (error) {
+        if (error.response?.status === 404) {
           this.infinite404 = 404;
           return;
         }
-        apiError(error, 'Failed to Get the detail of a temporary log conformance issue.');
-      };
+        apiError(
+          error,
+          "Failed to Get the detail of a temporary log conformance issue.",
+        );
+      }
     },
     /**
      * Get the Details of a Temporary Log Conformance Loop.
@@ -332,9 +362,12 @@ export const useConformanceStore = defineStore('conformanceStore', {
       try {
         const response = await apiClient.get(api);
         this.allLoopTraces = response.data.traces;
-      } catch(error) {
-        apiError(error, 'Failed to Get the detail of a temporary log conformance loop.');
-      };
+      } catch (error) {
+        apiError(
+          error,
+          "Failed to Get the detail of a temporary log conformance loop.",
+        );
+      }
     },
     /**
      * Get the Trace Details of a Temporary Log Conformance Loops.
@@ -349,13 +382,16 @@ export const useConformanceStore = defineStore('conformanceStore', {
         this.allLoopTaskSeq = response.data.task_seq;
         this.allLoopCases = response.data.cases;
         return response.data.cases;
-      } catch(error) {
-        if(error.response?.status === 404) {
+      } catch (error) {
+        if (error.response?.status === 404) {
           this.infinite404 = 404;
           return;
         }
-        apiError(error, 'Failed to Get the detail of a temporary log conformance loop.');
-      };
+        apiError(
+          error,
+          "Failed to Get the detail of a temporary log conformance loop.",
+        );
+      }
     },
     /**
      * Add a New Log Conformance Check, Save the log file.
@@ -366,21 +402,21 @@ export const useConformanceStore = defineStore('conformanceStore', {
       const api = `/api/${prefix}-checks?${idParam}`;
       const data = {
         name: value,
-        rule: this.conformanceRuleData
+        rule: this.conformanceRuleData,
       };
 
       try {
         const response = await apiClient.post(api, data);
-        if (prefix === 'filter') {
+        if (prefix === "filter") {
           this.conformanceFilterCreateCheckId = response.data.id;
           this.conformanceFilterTempCheckId = null;
         } else {
           this.conformanceLogCreateCheckId = response.data.id;
           this.conformanceLogTempCheckId = null;
         }
-      }catch(error) {
-        apiError(error, 'Failed to add the Conformance Check for a file.');
-      };
+      } catch (error) {
+        apiError(error, "Failed to add the Conformance Check for a file.");
+      }
     },
     /**
      * Update an Existing Conformance Check, log and filter
@@ -394,8 +430,8 @@ export const useConformanceStore = defineStore('conformanceStore', {
         this.isUpdateConformance = response.status === 200;
         this.conformanceLogTempCheckId = null;
         this.conformanceFilterTempCheckId = null;
-      }catch(error) {
-        apiError(error, 'Failed to update an Existing Conformance.');
+      } catch (error) {
+        apiError(error, "Failed to update an Existing Conformance.");
       }
     },
     /**
@@ -406,4 +442,4 @@ export const useConformanceStore = defineStore('conformanceStore', {
       this.conformanceLogCreateCheckId = createCheckID;
     },
   },
-})
+});
diff --git a/src/stores/conformanceInput.ts b/src/stores/conformanceInput.ts
index 3a37e65..0e15a4a 100644
--- a/src/stores/conformanceInput.ts
+++ b/src/stores/conformanceInput.ts
@@ -12,46 +12,46 @@
  */
 
 import { defineStore } from "pinia";
-import moment from 'moment';
+import moment from "moment";
 
 /**
  * Pinia store for caching user input during conformance rule editing.
  */
-export const useConformanceInputStore = defineStore('conformanceInputStore', {
+export const useConformanceInputStore = defineStore("conformanceInputStore", {
   state: () => ({
     inputDataToSave: {
-        inputStart: null, // TODO: clarify whether "start" means activity start or time start
-        inputEnd: null,
-        min: null,
-        max: null,
-        type: null,
-        task: null,
+      inputStart: null, // TODO: clarify whether "start" means activity start or time start
+      inputEnd: null,
+      min: null,
+      max: null,
+      type: null,
+      task: null,
     },
     activityRadioData: {
       category: null,
-      task: ['', ''],
+      task: ["", ""],
     },
   }),
-  getters: {
-  },
+  getters: {},
   actions: {
     /**
      * Sets the activity radio global state for either the start ('From') or end ('To') of a task.
      * We arrange in this way because backend needs us to communicate in this way.
-     * @param {object} actRadioData 
+     * @param {object} actRadioData
      * @param {string} fromToStr 'From' or 'To'
      */
-    setActivityRadioStartEndData(actRadioData, fromToStr){
-      switch(fromToStr) {
-        case 'From':
+    setActivityRadioStartEndData(actRadioData, fromToStr) {
+      switch (fromToStr) {
+        case "From":
           this.activityRadioData.task[0] = actRadioData;
           break;
-        case 'To':
-          this.activityRadioData.task[this.activityRadioData.task.length - 1] = actRadioData;
+        case "To":
+          this.activityRadioData.task[this.activityRadioData.task.length - 1] =
+            actRadioData;
           break;
         default:
           break;
       }
     },
   },
-})
\ No newline at end of file
+});
diff --git a/src/stores/files.ts b/src/stores/files.ts
index eaa2a51..20dc478 100644
--- a/src/stores/files.ts
+++ b/src/stores/files.ts
@@ -11,18 +11,24 @@
 
 import { defineStore } from "pinia";
 import apiClient from "@/api/client.js";
-import moment from 'moment';
-import apiError from '@/module/apiError.js';
-import Swal from 'sweetalert2';
-import { uploadFailedFirst, uploadFailedSecond, uploadloader, uploadSuccess, deleteSuccess } from '@/module/alertModal.js';
-import { useLoadingStore } from '@/stores/loading';
+import moment from "moment";
+import apiError from "@/module/apiError.js";
+import Swal from "sweetalert2";
+import {
+  uploadFailedFirst,
+  uploadFailedSecond,
+  uploadloader,
+  uploadSuccess,
+  deleteSuccess,
+} from "@/module/alertModal.js";
+import { useLoadingStore } from "@/stores/loading";
 
 /** Map of file type to API path segment. */
 const FILE_TYPE_PATHS = {
-  'log': 'logs',
-  'filter': 'filters',
-  'log-check': 'log-checks',
-  'filter-check': 'filter-checks',
+  log: "logs",
+  filter: "filters",
+  "log-check": "log-checks",
+  "filter-check": "filter-checks",
 };
 
 /**
@@ -36,22 +42,22 @@ function getFileApiBase(type, id) {
 }
 
 /** Pinia store for file CRUD operations and upload workflow. */
-export const useFilesStore = defineStore('filesStore', {
+export const useFilesStore = defineStore("filesStore", {
   state: () => ({
     allEventFiles: [
       {
-        parentLog: '',
-        fileType: '',
-        ownerName: '',
-      }
+        parentLog: "",
+        fileType: "",
+        ownerName: "",
+      },
     ],
     switchFilesTagData: {
-      ALL: ['Log', 'Filter', 'Rule', 'Design'],
-      DISCOVER: ['Log', 'Filter', 'Rule'],
-      COMPARE: ['Log','Filter'],
-      DESIGN: ['Log', 'Design'],
+      ALL: ["Log", "Filter", "Rule", "Design"],
+      DISCOVER: ["Log", "Filter", "Rule"],
+      COMPARE: ["Log", "Filter"],
+      DESIGN: ["Log", "Design"],
     },
-    filesTag: 'ALL',
+    filesTag: "ALL",
     httpStatus: 200,
     uploadId: null,
     allUploadDetail: null,
@@ -63,64 +69,64 @@ export const useFilesStore = defineStore('filesStore', {
     /**
      * Get allFiles and switch files tag
      */
-    allFiles: state => {
+    allFiles: (state) => {
       let result = state.allEventFiles;
       const data = state.switchFilesTagData;
       const filesTag = state.filesTag;
 
-      result = result.filter(file => data[filesTag].includes(file.fileType));
+      result = result.filter((file) => data[filesTag].includes(file.fileType));
 
       return result;
     },
     /**
      * Get upload preview
      */
-    uploadDetail: state => {
+    uploadDetail: (state) => {
       return state.allUploadDetail;
     },
     /**
      * Get dependents of files data
      */
-    dependentsData: state => {
+    dependentsData: (state) => {
       return state.allDependentsData;
-    }
+    },
   },
   actions: {
     /**
      * Fetch All Files api
      */
     async fetchAllFiles() {
-      const api = '/api/files';
+      const api = "/api/files";
 
       try {
         const response = await apiClient.get(api);
 
         this.allEventFiles = response.data;
-        this.allEventFiles.forEach(o => {
-          let icon = '';
-          let fileType = '';
+        this.allEventFiles.forEach((o) => {
+          let icon = "";
+          let fileType = "";
           let parentLog = o.name;
 
           switch (o.type) {
-            case 'log':
-              icon = 'work_history';
-              fileType = 'Log';
+            case "log":
+              icon = "work_history";
+              fileType = "Log";
               parentLog = o.name;
               break;
-            case 'filter':
-              icon = 'tornado';
-              fileType = 'Filter';
+            case "filter":
+              icon = "tornado";
+              fileType = "Filter";
               parentLog = o.parent.name;
               break;
-            case 'log-check':
-            case 'filter-check':
-              icon = 'local_police';
-              fileType = 'Rule';
+            case "log-check":
+            case "filter-check":
+              icon = "local_police";
+              fileType = "Rule";
               parentLog = o.parent.name;
               break;
-            case 'design':
-              icon = 'shape_line';
-              fileType = 'Design';
+            case "design":
+              icon = "shape_line";
+              fileType = "Design";
               parentLog = o.name;
               break;
           }
@@ -130,23 +136,29 @@ export const useFilesStore = defineStore('filesStore', {
           o.ownerName = o.owner.name;
           o.updated_base = o.updated_at;
           o.accessed_base = o.accessed_at;
-          o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
-          o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
+          o.updated_at = moment(o.updated_at)
+            .utcOffset("+08:00")
+            .format("YYYY-MM-DD HH:mm");
+          o.accessed_at = o.accessed_at
+            ? moment(o.accessed_at)
+                .utcOffset("+08:00")
+                .format("YYYY-MM-DD HH:mm")
+            : null;
         });
-      } catch(error) {
-        apiError(error, 'Failed to load the files.');
-      };
+      } catch (error) {
+        apiError(error, "Failed to load the files.");
+      }
     },
     /**
      * Uploads a CSV log file (first stage).
      * @param {Object} fromData - The form data to send to the backend.
      */
     async upload(fromData) {
-      const api = '/api/logs/csv-uploads';
+      const api = "/api/logs/csv-uploads";
       const config = {
         data: true,
         headers: {
-          'Content-Type': 'multipart/form-data',
+          "Content-Type": "multipart/form-data",
         },
       };
 
@@ -155,10 +167,10 @@ export const useFilesStore = defineStore('filesStore', {
         const response = await apiClient.post(api, fromData, config);
 
         this.uploadId = response.data.id;
-        this.$router.push({name: 'Upload'});
+        this.$router.push({ name: "Upload" });
         Swal.close(); // Close the loading progress bar
-      } catch(error) {
-        if(error.response?.status === 422) {
+      } catch (error) {
+        if (error.response?.status === 422) {
           // msg: 'not in UTF-8' | 'insufficient columns' | 'the csv file is empty' | 'the filename does not ends with .csv'
           // type: 'encoding' | 'insufficient_columns' | 'empty' | 'name_suffix'
           const detail = error.response.data.detail;
@@ -166,7 +178,7 @@ export const useFilesStore = defineStore('filesStore', {
           uploadFailedFirst(detail[0].type, detail[0].msg, detail[0].loc[2]);
         } else {
           Swal.close(); // Close the loading progress bar
-          apiError(error, 'Failed to upload the files.');
+          apiError(error, "Failed to upload the files.");
         }
       }
     },
@@ -180,8 +192,8 @@ export const useFilesStore = defineStore('filesStore', {
       try {
         const response = await apiClient.get(api);
         this.allUploadDetail = response.data.preview;
-      } catch(error) {
-        apiError(error, 'Failed to get upload detail.');
+      } catch (error) {
+        apiError(error, "Failed to get upload detail.");
       }
     },
     /**
@@ -200,15 +212,15 @@ export const useFilesStore = defineStore('filesStore', {
         Swal.close(); // Close the loading progress bar
         await this.rename(); // Rename the file
         await uploadSuccess();
-        this.$router.push({name: 'Files'});
-      } catch(error) {
-        if(error.response?.status === 422) {
+        this.$router.push({ name: "Files" });
+      } catch (error) {
+        if (error.response?.status === 422) {
           const detail = [...error.response.data.detail];
 
           uploadFailedSecond(detail);
         } else {
           Swal.close(); // Close the loading progress bar
-          apiError(error, 'Failed to upload the log files.');
+          apiError(error, "Failed to upload the log files.");
         }
       }
     },
@@ -220,19 +232,19 @@ export const useFilesStore = defineStore('filesStore', {
      */
     async rename(type, id, fileName) {
       // If uploadLogId exists, set id and type accordingly; then check the file type.
-      if(this.uploadId && this.uploadFileName) {
-        type = 'log';
+      if (this.uploadId && this.uploadFileName) {
+        type = "log";
         id = this.uploadLogId;
         fileName = this.uploadFileName;
       }
 
-      const data = {"name": fileName};
+      const data = { name: fileName };
       try {
         await apiClient.put(`${getFileApiBase(type, id)}/name`, data);
         this.uploadFileName = null;
         await this.fetchAllFiles();
-      } catch(error) {
-        apiError(error, 'Failed to rename.');
+      } catch (error) {
+        apiError(error, "Failed to rename.");
       }
     },
     /**
@@ -242,10 +254,12 @@ export const useFilesStore = defineStore('filesStore', {
      */
     async getDependents(type, id) {
       try {
-        const response = await apiClient.get(`${getFileApiBase(type, id)}/dependents`);
+        const response = await apiClient.get(
+          `${getFileApiBase(type, id)}/dependents`,
+        );
         this.allDependentsData = response.data;
-      } catch(error) {
-        apiError(error, 'Failed to get Dependents of the files.');
+      } catch (error) {
+        apiError(error, "Failed to get Dependents of the files.");
       }
     },
     /**
@@ -254,18 +268,18 @@ export const useFilesStore = defineStore('filesStore', {
      * @param {number} id - The file ID.
      */
     async deleteFile(type, id) {
-      if(id === null || id === undefined || isNaN(id)) {
-        console.error('Delete File API Error: invalid id');
+      if (id === null || id === undefined || isNaN(id)) {
+        console.error("Delete File API Error: invalid id");
         return;
-      };
+      }
       const loading = useLoadingStore();
       loading.isLoading = true;
       try {
         await apiClient.delete(getFileApiBase(type, id));
         await this.fetchAllFiles();
         await deleteSuccess();
-      } catch(error) {
-        apiError(error, 'Failed to delete.');
+      } catch (error) {
+        apiError(error, "Failed to delete.");
       } finally {
         loading.isLoading = false;
       }
@@ -275,15 +289,15 @@ export const useFilesStore = defineStore('filesStore', {
      * @param {number} id - The file ID.
      */
     async deletionRecord(id) {
-      let api = '';
+      let api = "";
 
       const loading = useLoadingStore();
       loading.isLoading = true;
       api = `/api/deletion/${id}`;
       try {
         await apiClient.delete(api);
-      } catch(error) {
-        apiError(error, 'Failed to Remove a Deletion Record.')
+      } catch (error) {
+        apiError(error, "Failed to Remove a Deletion Record.");
       } finally {
         loading.isLoading = false;
       }
@@ -295,21 +309,21 @@ export const useFilesStore = defineStore('filesStore', {
      * @param {string} fileName - The file name.
      */
     async downloadFileCSV(type, id, fileName) {
-      if (type !== 'log' && type !== 'filter') return;
+      if (type !== "log" && type !== "filter") return;
       try {
         const response = await apiClient.get(`${getFileApiBase(type, id)}/csv`);
         const csvData = response.data;
-        const blob = new Blob([csvData], { type: 'text/csv' });
+        const blob = new Blob([csvData], { type: "text/csv" });
         const url = window.URL.createObjectURL(blob);
-        const link = document.createElement('a');
+        const link = document.createElement("a");
 
         link.href = url;
         link.download = `${fileName}.csv`;
         link.click();
         window.URL.revokeObjectURL(url);
-      } catch(error) {
-        apiError(error, 'Failed to download.');
+      } catch (error) {
+        apiError(error, "Failed to download.");
       }
     },
   },
-})
+});
diff --git a/src/stores/loading.ts b/src/stores/loading.ts
index e6a4c6e..9a82586 100644
--- a/src/stores/loading.ts
+++ b/src/stores/loading.ts
@@ -9,7 +9,7 @@
 import { defineStore } from "pinia";
 
 /** Pinia store for managing the global loading spinner visibility. */
-export const useLoadingStore = defineStore('loadingStore', {
+export const useLoadingStore = defineStore("loadingStore", {
   state: () => ({
     /** Whether the loading spinner is currently visible. */
     isLoading: true,
@@ -21,6 +21,6 @@ export const useLoadingStore = defineStore('loadingStore', {
      */
     setIsLoading(isLoadingBoolean) {
       this.isLoading = isLoadingBoolean;
-    }
+    },
   },
 });
diff --git a/src/stores/login.ts b/src/stores/login.ts
index fa43fd4..6ab13ec 100644
--- a/src/stores/login.ts
+++ b/src/stores/login.ts
@@ -10,20 +10,24 @@
  */
 
 import { defineStore } from "pinia";
-import axios from 'axios';
-import apiClient from '@/api/client.js';
-import apiError from '@/module/apiError.js';
-import { deleteCookie, setCookie, setCookieWithoutExpiration } from "../utils/cookieUtil";
+import axios from "axios";
+import apiClient from "@/api/client.js";
+import apiError from "@/module/apiError.js";
+import {
+  deleteCookie,
+  setCookie,
+  setCookieWithoutExpiration,
+} from "../utils/cookieUtil";
 
 /** Pinia store for authentication and user session management. */
-export const useLoginStore = defineStore('loginStore', {
+export const useLoginStore = defineStore("loginStore", {
   // data, methods, computed
   // state, actions, getters
   state: () => ({
     auth: {
-      grant_type: 'password', // password | refresh_token
-      username: '',
-      password: '',
+      grant_type: "password", // password | refresh_token
+      username: "",
+      password: "",
       refresh_token: undefined,
     },
     isInvalid: false,
@@ -36,11 +40,11 @@ export const useLoginStore = defineStore('loginStore', {
      * fetch Login For Access Token api
      */
     async signIn() {
-      const api = '/api/oauth/token';
+      const api = "/api/oauth/token";
       const config = {
         headers: {
           // Default URL-encoded format for HTTP POST, not JSON
-          'Content-Type':'application/x-www-form-urlencoded',
+          "Content-Type": "application/x-www-form-urlencoded",
         },
       };
 
@@ -52,7 +56,13 @@ export const useLoginStore = defineStore('loginStore', {
         setCookieWithoutExpiration("luciaToken", accessToken);
         const expiryDate = new Date();
         expiryDate.setMonth(expiryDate.getMonth() + 6);
-        setCookie("luciaRefreshToken", refresh_token, Math.ceil((expiryDate.getTime() - Date.now()) / (24 * 60 * 60 * 1000)));
+        setCookie(
+          "luciaRefreshToken",
+          refresh_token,
+          Math.ceil(
+            (expiryDate.getTime() - Date.now()) / (24 * 60 * 60 * 1000),
+          ),
+        );
 
         this.isLoggedIn = true;
         setCookie("isLuciaLoggedIn", "true");
@@ -60,30 +70,30 @@ export const useLoginStore = defineStore('loginStore', {
         // By default, redirect to the FILES page.
         // However, if the user pasted a URL while not logged in,
         // redirect them to the remembered return-to URL after login.
-        if(this.rememberedReturnToUrl !== "") {
+        if (this.rememberedReturnToUrl !== "") {
           const decodedUrl = atob(this.rememberedReturnToUrl);
           // Only allow relative paths to prevent open redirect attacks
-          if(decodedUrl.startsWith('/') && !decodedUrl.startsWith('//')) {
+          if (decodedUrl.startsWith("/") && !decodedUrl.startsWith("//")) {
             window.location.href = decodedUrl;
           } else {
-            this.$router.push('/files');
+            this.$router.push("/files");
           }
         } else {
-          this.$router.push('/files');
+          this.$router.push("/files");
         }
-      } catch(error) {
+      } catch (error) {
         this.isInvalid = true;
-      };
+      }
     },
     /**
      * Refresh Token
      */
     async refreshToken() {
       try {
-        const { refreshTokenAndGetNew } = await import('@/api/auth.js');
+        const { refreshTokenAndGetNew } = await import("@/api/auth.js");
         await refreshTokenAndGetNew();
-      } catch(error) {
-        this.$router.push('/login');
+      } catch (error) {
+        this.$router.push("/login");
         throw error;
       }
     },
@@ -96,36 +106,36 @@ export const useLoginStore = defineStore('loginStore', {
       this.isLoggedIn = false;
       deleteCookie("isLuciaLoggedIn");
 
-      this.$router.push('/login');
+      this.$router.push("/login");
     },
     /**
      * get user detail for 'my-account' api
      */
     async getUserData() {
-      const api = '/api/my-account';
+      const api = "/api/my-account";
 
       try {
         const response = await apiClient.get(api);
 
         this.userData = response.data;
-      } catch(error) {
-        apiError(error, 'Failed to load user data.');
-      };
+      } catch (error) {
+        apiError(error, "Failed to load user data.");
+      }
     },
     /**
      * check login for 'my-account' api
      */
     async checkLogin() {
-      const api = '/api/my-account';
+      const api = "/api/my-account";
 
       try {
         await apiClient.get(api);
-      } catch(error) {
-        this.$router.push('/login');
-      };
+      } catch (error) {
+        this.$router.push("/login");
+      }
     },
-    setRememberedReturnToUrl(returnToUrl){
-      this.rememberedReturnToUrl = returnToUrl
+    setRememberedReturnToUrl(returnToUrl) {
+      this.rememberedReturnToUrl = returnToUrl;
     },
     setIsLoggedIn(boolean) {
       this.isLoggedIn = boolean;
diff --git a/src/stores/main.ts b/src/stores/main.ts
index 8101953..99ddd9c 100644
--- a/src/stores/main.ts
+++ b/src/stores/main.ts
@@ -8,8 +8,8 @@
  * @module stores/main Pinia store instance with persisted state plugin.
  */
 
-import { createPinia } from 'pinia';
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
index 8a6e673..c96c312 100644
--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -6,11 +6,11 @@
 //   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
 /** @module stores/modal Account management modal state. */
 
-import { defineStore } from 'pinia';
-import { MODAL_ACCT_INFO, } from '@/constants/constants.js';
+import { defineStore } from "pinia";
+import { MODAL_ACCT_INFO } from "@/constants/constants.js";
 
 /** Pinia store for controlling account management modal visibility. */
-export const useModalStore = defineStore('modalStore', {
+export const useModalStore = defineStore("modalStore", {
   state: () => ({
     /** Whether a modal is currently open. */
     isModalOpen: false,
@@ -27,7 +27,7 @@ export const useModalStore = defineStore('modalStore', {
       this.whichModal = whichModal;
     },
     /** Closes the currently open modal. */
-    async closeModal(){
+    async closeModal() {
       this.isModalOpen = false;
     },
   },
diff --git a/src/stores/pageAdmin.ts b/src/stores/pageAdmin.ts
index de17519..b7b3b78 100644
--- a/src/stores/pageAdmin.ts
+++ b/src/stores/pageAdmin.ts
@@ -23,56 +23,65 @@ const printPageAdminLog = false;
  * page refreshes. Manages pending states for SweetAlert2 modal
  * confirmation flows.
  */
-export const usePageAdminStore = defineStore('pageAdminStore', {
+export const usePageAdminStore = defineStore("pageAdminStore", {
   state: () => ({
-     activePage: 'MAP',
-     previousPage: 'MAP',
-     pendingActivePage: 'FILES',
-     isPagePending: false,
-     shouldKeepPreviousPage: false, // false -- meaning modal is not pressed as "NO"
-     activePageComputedByRoute: "MAP",
-     currentMapFile: '',
+    activePage: "MAP",
+    previousPage: "MAP",
+    pendingActivePage: "FILES",
+    isPagePending: false,
+    shouldKeepPreviousPage: false, // false -- meaning modal is not pressed as "NO"
+    activePageComputedByRoute: "MAP",
+    currentMapFile: "",
   }),
-  getters: {
-  },
+  getters: {},
   actions: {
     /**
      * Sets the active page based on the last matched route record.
      * @param {Array} routeMatched - The route.matched array.
      */
-    setActivePageComputedByRoute(routeMatched){
-      if (routeMatched.length && routeMatched[routeMatched.length - 1] 
-          && routeMatched[routeMatched.length - 1].name) {
-        printPageAdminLog && console.log('setActivePageComputedByRoute()', mapPageNameToCapitalUnifiedName(routeMatched[routeMatched.length - 1].name));
+    setActivePageComputedByRoute(routeMatched) {
+      if (
+        routeMatched.length &&
+        routeMatched[routeMatched.length - 1] &&
+        routeMatched[routeMatched.length - 1].name
+      ) {
+        printPageAdminLog &&
+          console.log(
+            "setActivePageComputedByRoute()",
+            mapPageNameToCapitalUnifiedName(
+              routeMatched[routeMatched.length - 1].name,
+            ),
+          );
         this.activePageComputedByRoute = mapPageNameToCapitalUnifiedName(
-          routeMatched[routeMatched.length - 1].name);
+          routeMatched[routeMatched.length - 1].name,
+        );
       }
     },
     /**
      * Set Active Page; the page which the user is currently visiting
-     * @param {string} activePage 
+     * @param {string} activePage
      */
     setActivePage(activePage) {
-      printPageAdminLog && console.log("setActivePage", activePage)
+      printPageAdminLog && console.log("setActivePage", activePage);
       this.activePage = mapPageNameToCapitalUnifiedName(activePage);
     },
     /**
      * Specify previous page state value.
-     * @param {string} prevPage 
+     * @param {string} prevPage
      */
     setPreviousPage(prevPage) {
       this.previousPage = mapPageNameToCapitalUnifiedName(prevPage);
     },
     /**
-    * Set the previous(usually current) pages to the ones we just decide. 
-    */
+     * Set the previous(usually current) pages to the ones we just decide.
+     */
     setPreviousPageUsingActivePage() {
       this.previousPage = this.activePage;
     },
     /**
      * Set the boolean value of status of pending state of the pate
      * For the control of Swal popup
-     * @param {boolean} boolVal 
+     * @param {boolean} boolVal
      */
     setIsPagePendingBoolean(boolVal) {
       this.isPagePending = boolVal;
@@ -81,49 +90,59 @@ export const usePageAdminStore = defineStore('pageAdminStore', {
      * Copy(transit) the value of pendingActivePage to activePage
      */
     copyPendingPageToActivePage() {
-      printPageAdminLog && console.log('pinia copying  this.pendingActivePage', this.pendingActivePage);
+      printPageAdminLog &&
+        console.log(
+          "pinia copying  this.pendingActivePage",
+          this.pendingActivePage,
+        );
       this.activePage = this.pendingActivePage;
-    },    
+    },
     /**
      * Set Pending active Page, meaning we are not sure if user will chang her mind later on.
      * Also, start pending state.
      * Often, user triggers the modal and the pending state starts.
      * Note: String conversion is needed. For Example, CheckMap is converted into MAP
-     * @param {string} pendingActivePage 
+     * @param {string} pendingActivePage
      */
     setPendingActivePage(argPendingActivePage) {
-      printPageAdminLog && console.log('pinia setting this.pendingActivePage', this.pendingActivePage);
-      this.pendingActivePage = mapPageNameToCapitalUnifiedName(argPendingActivePage);
+      printPageAdminLog &&
+        console.log(
+          "pinia setting this.pendingActivePage",
+          this.pendingActivePage,
+        );
+      this.pendingActivePage =
+        mapPageNameToCapitalUnifiedName(argPendingActivePage);
     },
     /**
      * Set Pending active Page to empty string; we call this right after we just decide an active page.
      * Also, stop pending state.
      */
-    clearPendingActivePage(){
-      this.pendingActivePage = '';
+    clearPendingActivePage() {
+      this.pendingActivePage = "";
     },
     /**
      * When user dismiss the popup modal, we don't apply the new page,
      * instead, we apply the previous page.
      */
     keepPreviousPage() {
-      printPageAdminLog && console.log('pinia keeping this.previousPage', this.previousPage);
+      printPageAdminLog &&
+        console.log("pinia keeping this.previousPage", this.previousPage);
       this.activePage = this.previousPage;
       this.shouldKeepPreviousPage = true;
     },
     /**
      * Clean up the state of the boolean related to modal showing phase
      */
-    clearShouldKeepPreviousPageBoolean(){
-      printPageAdminLog && console.log('clearShouldKeepPreviousPageBoolean()');
+    clearShouldKeepPreviousPageBoolean() {
+      printPageAdminLog && console.log("clearShouldKeepPreviousPageBoolean()");
       this.shouldKeepPreviousPage = false;
     },
     /**
      * Stores the name of the currently opened map file.
      * @param {string} fileName - The file name.
      */
-    setCurrentMapFile(fileName){
+    setCurrentMapFile(fileName) {
       this.currentMapFile = fileName;
     },
   },
-})
\ No newline at end of file
+});
diff --git a/src/stores/performance.ts b/src/stores/performance.ts
index f330bad..f7cc8af 100644
--- a/src/stores/performance.ts
+++ b/src/stores/performance.ts
@@ -11,10 +11,10 @@
 
 import { defineStore } from "pinia";
 import apiClient from "@/api/client.js";
-import apiError from '@/module/apiError.js';
+import apiError from "@/module/apiError.js";
 
 /** Pinia store for the Discover Performance page data. */
-export const usePerformanceStore = defineStore('performanceStore', {
+export const usePerformanceStore = defineStore("performanceStore", {
   state: () => ({
     allPerformanceData: null,
     freqChartData: null,
@@ -24,10 +24,10 @@ export const usePerformanceStore = defineStore('performanceStore', {
       maxX: null,
       xData: null,
       content: null,
-    }
+    },
   }),
   getters: {
-    performanceData: state => {
+    performanceData: (state) => {
       return state.allPerformanceData;
     },
   },
@@ -38,43 +38,43 @@ export const usePerformanceStore = defineStore('performanceStore', {
      * @param {number} id - The file ID.
      */
     async getPerformance(type, id) {
-      let api = '';
+      let api = "";
 
       switch (type) {
-        case 'log':
+        case "log":
           api = `/api/logs/${id}/performance`;
           break;
-        case 'filter':
+        case "filter":
           api = `/api/filters/${id}/performance`;
           break;
       }
       try {
         const response = await apiClient.get(api);
         this.allPerformanceData = response.data;
-      } catch(error) {
-        apiError(error, 'Failed to load the Performance.');
+      } catch (error) {
+        apiError(error, "Failed to load the Performance.");
       }
     },
     /**
      * In PrimeVue format
-     * @param {object} freqChartData 
+     * @param {object} freqChartData
      */
-    setFreqChartData(freqChartData){
+    setFreqChartData(freqChartData) {
       this.freqChartData = freqChartData;
     },
     /**
      * In PrimeVue format
-     * @param {object} freqChartOptions 
+     * @param {object} freqChartOptions
      */
-    setFreqChartOptions(freqChartOptions){
+    setFreqChartOptions(freqChartOptions) {
       this.freqChartOptions = freqChartOptions;
     },
     /**
-     * 
-     * @param {object} freqChartXData 
+     *
+     * @param {object} freqChartXData
      */
     setFreqChartXData(freqChartXData) {
       this.freqChartXData = freqChartXData;
-    }
+    },
   },
-})
+});
diff --git a/src/types/vue.d.ts b/src/types/vue.d.ts
index 60d7f63..3e4ddb8 100644
--- a/src/types/vue.d.ts
+++ b/src/types/vue.d.ts
@@ -8,4 +8,4 @@
  *   Vue App type import (placeholder).
  */
 
-import { App } from 'vue';
+import { App } from "vue";
diff --git a/src/utils/cookieUtil.js b/src/utils/cookieUtil.js
index c172857..b331474 100644
--- a/src/utils/cookieUtil.js
+++ b/src/utils/cookieUtil.js
@@ -13,7 +13,7 @@
  */
 export function getCookie(name) {
   const nameEqual = name + "=";
-  const cookieArr = document.cookie.split(';');
+  const cookieArr = document.cookie.split(";");
 
   for (const cookie of cookieArr) {
     let c = cookie.trim();
@@ -34,14 +34,15 @@ export function getCookie(name) {
  * @param {string} value - The cookie value.
  * @param {number} [days=1] - Number of days until the cookie expires.
  */
-export function setCookie(name, value, days=1) {
+export function setCookie(name, value, days = 1) {
   let expires = "";
   if (days) {
     const date = new Date();
-    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
     expires = "; expires=" + date.toUTCString();
   }
-  document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=Lax";
+  document.cookie =
+    name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=Lax";
 }
 
 /**
@@ -50,7 +51,8 @@ export function setCookie(name, value, days=1) {
  * @param {string} value - The cookie value.
  */
 export function setCookieWithoutExpiration(name, value) {
-  document.cookie = name + "=" + (value || "") + "; path=/; Secure; SameSite=Lax";
+  document.cookie =
+    name + "=" + (value || "") + "; path=/; Secure; SameSite=Lax";
 }
 
 /**
@@ -58,6 +60,7 @@ export function setCookieWithoutExpiration(name, value) {
  * @param {string} name - The cookie name to delete.
  * @param {string} [path='/'] - The path scope of the cookie.
  */
-export function deleteCookie(name, path = '/') {
-  document.cookie = name + '=; Max-Age=-99999999; path=' + path + '; Secure; SameSite=Lax';
+export function deleteCookie(name, path = "/") {
+  document.cookie =
+    name + "=; Max-Age=-99999999; path=" + path + "; Secure; SameSite=Lax";
 }
diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts
index b12e553..07f0f34 100644
--- a/src/utils/emitter.ts
+++ b/src/utils/emitter.ts
@@ -4,7 +4,7 @@
 //   imacat.yang@dsp.im (imacat), 2023/9/23
 /** @module emitter Shared mitt event bus instance. */
 
-import mitt from 'mitt';
+import mitt from "mitt";
 
 /** Global event emitter for cross-component communication. */
 const emitter = mitt();
diff --git a/src/utils/escapeHtml.js b/src/utils/escapeHtml.js
index e930f82..3fb91e7 100644
--- a/src/utils/escapeHtml.js
+++ b/src/utils/escapeHtml.js
@@ -12,9 +12,9 @@
  */
 export function escapeHtml(str) {
   return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
 }
diff --git a/src/utils/jsUtils.js b/src/utils/jsUtils.js
index 8448d83..92e35b9 100644
--- a/src/utils/jsUtils.js
+++ b/src/utils/jsUtils.js
@@ -12,20 +12,20 @@
  * @param {number} [indent=0] - The current indentation level.
  */
 export const printObject = (obj, indent = 0) => {
-    const padding = ' '.repeat(indent);
+  const padding = " ".repeat(indent);
 
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        if (typeof obj[key] === 'object' && obj[key] !== null) {
-          console.log(`${padding}${key}: {`);
-          printObject(obj[key], indent + 2);
-          console.log(`${padding}}`);
-        } else {
-          console.log(`${padding}${key}: ${obj[key]}`);
-        }
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (typeof obj[key] === "object" && obj[key] !== null) {
+        console.log(`${padding}${key}: {`);
+        printObject(obj[key], indent + 2);
+        console.log(`${padding}}`);
+      } else {
+        console.log(`${padding}${key}: ${obj[key]}`);
       }
     }
-  };
+  }
+};
 
 /**
  * Returns a cryptographically random integer between 0 and max (inclusive).
@@ -35,5 +35,5 @@ export const printObject = (obj, indent = 0) => {
 export const getRandomInt = (max) => {
   const array = new Uint32Array(1);
   window.crypto.getRandomValues(array);
-  return Math.floor(array[0] / (0xFFFFFFFF + 1) * (max + 1));
+  return Math.floor((array[0] / (0xffffffff + 1)) * (max + 1));
 };
diff --git a/src/utils/pageUtils.js b/src/utils/pageUtils.js
index 8a11869..2bd4413 100644
--- a/src/utils/pageUtils.js
+++ b/src/utils/pageUtils.js
@@ -18,23 +18,20 @@
  *   undefined if rawPageName is falsy.
  */
 const mapPageNameToCapitalUnifiedName = (rawPageName) => {
-    if(rawPageName) {
-        switch (rawPageName.toUpperCase()) {
-            case 'CHECKMAP':
-                return 'MAP';
-            case 'CHECKCONFORMANCE':
-                return 'CONFORMANCE';
-            case 'CHECKPERFORMANCE':
-                return 'PERFORMANCE';
-            case 'COMPAREDASHBOARD':
-                return 'DASHBOARD';
-            default:
-                return rawPageName.toUpperCase();
-        }
+  if (rawPageName) {
+    switch (rawPageName.toUpperCase()) {
+      case "CHECKMAP":
+        return "MAP";
+      case "CHECKCONFORMANCE":
+        return "CONFORMANCE";
+      case "CHECKPERFORMANCE":
+        return "PERFORMANCE";
+      case "COMPAREDASHBOARD":
+        return "DASHBOARD";
+      default:
+        return rawPageName.toUpperCase();
     }
-
+  }
 };
 
-export {
-    mapPageNameToCapitalUnifiedName,
-};
+export { mapPageNameToCapitalUnifiedName };
diff --git a/src/utils/timeUtil.js b/src/utils/timeUtil.js
index 78ac2b0..63bfada 100644
--- a/src/utils/timeUtil.js
+++ b/src/utils/timeUtil.js
@@ -11,7 +11,6 @@
  * @param {number} [s=2.5] - The delay in seconds.
  * @returns {Promise<void>} A promise that resolves after the delay.
  */
-export const delaySecond = (s = 2.5) =>  {
-    return new Promise((resolve) =>
-        setTimeout(resolve, s * 1000)
-);}
+export const delaySecond = (s = 2.5) => {
+  return new Promise((resolve) => setTimeout(resolve, s * 1000));
+};
diff --git a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
index 2c1921f..051a985 100644
--- a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
+++ b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
@@ -1,115 +1,239 @@
 <template>
-    <div class="flex justify-center pt-2">
-        <div class="flex w-[1216px] flex-col items-center">
-            <div class="flex w-full justify-between py-2 items-center">
-                <button id="create_new_acct_btn" class="flex rounded-full bg-primary text-[#ffffff] flex justify-center
-                    items-center px-6 py-[10px]" @click="onCreateNewClick">
-                    {{ i18next.t("AcctMgmt.CreateNew") }}
-                </button>
-                <SearchBar @on-search-account-button-click="onSearchAccountButtonClick"/>
-            </div>
-            <div id="acct_mgmt_data_grid" class="flex w-full overflow-y-auto h-[570px]" @scroll="handleScroll">
-                <DataTable :value="accountSearchResults" dataKey="username" tableClass="w-full mt-4 text-sm relative table-fixed"
-                    :rowClass="getRowClass"
+  <div class="flex justify-center pt-2">
+    <div class="flex w-[1216px] flex-col items-center">
+      <div class="flex w-full justify-between py-2 items-center">
+        <button
+          id="create_new_acct_btn"
+          class="flex rounded-full bg-primary text-[#ffffff] flex justify-center items-center px-6 py-[10px]"
+          @click="onCreateNewClick"
+        >
+          {{ i18next.t("AcctMgmt.CreateNew") }}
+        </button>
+        <SearchBar
+          @on-search-account-button-click="onSearchAccountButtonClick"
+        />
+      </div>
+      <div
+        id="acct_mgmt_data_grid"
+        class="flex w-full overflow-y-auto h-[570px]"
+        @scroll="handleScroll"
+      >
+        <DataTable
+          :value="accountSearchResults"
+          dataKey="username"
+          tableClass="w-full mt-4 text-sm relative table-fixed"
+          :rowClass="getRowClass"
+        >
+          <Column
+            field="username"
+            :header="i18next.t('AcctMgmt.Account')"
+            bodyClass="font-medium"
+            sortable
+          >
+            <template #body="slotProps">
+              <div
+                class="row-container flex-w-full-hoverable w-full"
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+              >
+                <div
+                  @dblclick="onAcctDoubleClick(slotProps.data.username)"
+                  class="account-cell cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
                 >
-                    <Column field="username" :header="i18next.t('AcctMgmt.Account')" bodyClass="font-medium"  sortable>
-                        <template #body="slotProps">
-                            <div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
-                                @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="account-cell cursor-pointer
-                                    whitespace-nowrap overflow-hidden text-ellipsis">
-                                    {{ slotProps.data.username }}
-                                </div>
-                                <span id="just_create_badge" class="flex ml-4"
-                                    v-if="isOneAccountJustCreate && slotProps.data.username === justCreateUsername">
-                                    <img src="@/assets/icon-new.svg" alt="New">
-                                </span>
-                            </div>
-                        </template>
-                    </Column>
-                    <Column field="name" :header="i18next.t('AcctMgmt.FullName')" bodyClass="text-neutral-500" sortable>
-                        <template #body="slotProps">
-                            <div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
-                                @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <div class="fullname-cell whitespace-nowrap overflow-hidden text-ellipsis">
-                                    {{ slotProps.data.name }}
-                                </div>
-                            </div>
-                        </template>
-                    </Column>
-                    <Column field="is_admin" :header="i18next.t('AcctMgmt.AdminRights')" bodyClass="text-neutral-500 flex justify-center"
-                        headerClass="header-center">
-                        <template #body="slotProps">
-                            <div v-if="!slotProps.data.isCurrentLoggedIn" class="row-container flex-w-full-hoverable flex w-full justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
-                                @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <img v-if="slotProps.data.is_admin" src="@/assets/radioOn.svg" alt="Radio On" class="btn-admin cursor-pointer flex justify-center"
-                                    @click="onAdminInputClick(slotProps.data, false)"
-                                />
-                                <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-admin cursor-pointer flex justify-center"
-                                    @click="onAdminInputClick(slotProps.data, true)"
-                                />
-                            </div>
-                            <div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
-                            class="row-container flex-w-full-hoverable flex w-full h-6"></div>
-                        </template>
-                    </Column>
-                    <Column field="is_active" :header="i18next.t('AcctMgmt.AccountActivation')" bodyClass="text-neutral-500"
-                        headerClass="header-center">
-                        <template #body="slotProps">
-                            <div v-if="!slotProps.data.isCurrentLoggedIn" class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
-                                @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <div class="w-full flex justify-center">
-                                    <img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="btn-activate cursor-pointer flex"
-                                        @click="setIsActiveInput(slotProps.data, false)"/>
-                                    <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-activate cursor-pointer flex"
-                                        @click="setIsActiveInput(slotProps.data, true)"/>
-                                </div>
-                            </div>
-                            <div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
-                            class="row-container flex-w-full-hoverable flex w-full h-6"></div>
-                        </template>
-                    </Column>
-                    <Column :header="i18next.t('AcctMgmt.Detail')" bodyClass="text-neutral-500" headerClass="header-center">
-                        <template #body="slotProps">
-                            <div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
-                                @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <img :src="slotProps.data.isDetailHovered ? iconDetailOn : iconDetailOff" alt="Detail" class="btn-detail cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"
-                                    @mouseover="handleDetailMouseOver(slotProps.data.username)"
-                                    @mouseout="handleDetailMouseOut(slotProps.data.username)"
-                                />
-                            </div>
-                        </template>
-                    </Column>
-                    <Column :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500" headerClass="header-center">
-                        <template #body="slotProps">
-                            <div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
-                                <img :src="slotProps.data.isEditHovered ? iconEditOn : iconEditOff" alt="Edit" class="btn-edit cursor-pointer"
-                                    @click="onEditButtonClick(slotProps.data.username)"
-                                    @mouseover="handleEditMouseOver(slotProps.data.username)"
-                                    @mouseout="handleEditMouseOut(slotProps.data.username)"
-                                />
-                            </div>
-                        </template>
-                    </Column>
-                    <Column :header="i18next.t('AcctMgmt.Delete')" bodyClass="text-neutral-500 flex justify-center" headerClass="header-center">
-                        <template #body="slotProps">
-                            <div v-if="!slotProps.data.isCurrentLoggedIn" class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
-                                <img :src="slotProps.data.isDeleteHovered ? iconDeleteRed : iconDeleteGray"
-                                    :alt="slotProps.data.isDeleteHovered ? 'hovered' : 'not-hovered'"
-                                    class="delete-account cursor-pointer flex"
-                                    @mouseover="handleDeleteMouseOver(slotProps.data.username)"
-                                    @mouseout="handleDeleteMouseOut(slotProps.data.username)"
-                                    @click="onDeleteBtnClick(slotProps.data.username)"
-                                >
-                            </div>
-                            <div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
-                            class="row-container flex-w-full-hoverable flex w-full h-6"></div>
-                        </template>
-                    </Column>
-                </DataTable>
-            </div>
-        </div>
+                  {{ slotProps.data.username }}
+                </div>
+                <span
+                  id="just_create_badge"
+                  class="flex ml-4"
+                  v-if="
+                    isOneAccountJustCreate &&
+                    slotProps.data.username === justCreateUsername
+                  "
+                >
+                  <img src="@/assets/icon-new.svg" alt="New" />
+                </span>
+              </div>
+            </template>
+          </Column>
+          <Column
+            field="name"
+            :header="i18next.t('AcctMgmt.FullName')"
+            bodyClass="text-neutral-500"
+            sortable
+          >
+            <template #body="slotProps">
+              <div
+                class="row-container flex-w-full-hoverable w-full"
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+              >
+                <div
+                  class="fullname-cell whitespace-nowrap overflow-hidden text-ellipsis"
+                >
+                  {{ slotProps.data.name }}
+                </div>
+              </div>
+            </template>
+          </Column>
+          <Column
+            field="is_admin"
+            :header="i18next.t('AcctMgmt.AdminRights')"
+            bodyClass="text-neutral-500 flex justify-center"
+            headerClass="header-center"
+          >
+            <template #body="slotProps">
+              <div
+                v-if="!slotProps.data.isCurrentLoggedIn"
+                class="row-container flex-w-full-hoverable flex w-full justify-center"
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+              >
+                <img
+                  v-if="slotProps.data.is_admin"
+                  src="@/assets/radioOn.svg"
+                  alt="Radio On"
+                  class="btn-admin cursor-pointer flex justify-center"
+                  @click="onAdminInputClick(slotProps.data, false)"
+                />
+                <img
+                  v-else
+                  src="@/assets/radioOff.svg"
+                  alt="Radio Off"
+                  class="btn-admin cursor-pointer flex justify-center"
+                  @click="onAdminInputClick(slotProps.data, true)"
+                />
+              </div>
+              <div
+                v-else
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+                class="row-container flex-w-full-hoverable flex w-full h-6"
+              ></div>
+            </template>
+          </Column>
+          <Column
+            field="is_active"
+            :header="i18next.t('AcctMgmt.AccountActivation')"
+            bodyClass="text-neutral-500"
+            headerClass="header-center"
+          >
+            <template #body="slotProps">
+              <div
+                v-if="!slotProps.data.isCurrentLoggedIn"
+                class="row-container flex-w-full-hoverable w-full"
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+              >
+                <div class="w-full flex justify-center">
+                  <img
+                    v-if="slotProps.data.is_active"
+                    src="@/assets/radioOn.svg"
+                    alt="Radio On"
+                    class="btn-activate cursor-pointer flex"
+                    @click="setIsActiveInput(slotProps.data, false)"
+                  />
+                  <img
+                    v-else
+                    src="@/assets/radioOff.svg"
+                    alt="Radio Off"
+                    class="btn-activate cursor-pointer flex"
+                    @click="setIsActiveInput(slotProps.data, true)"
+                  />
+                </div>
+              </div>
+              <div
+                v-else
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+                class="row-container flex-w-full-hoverable flex w-full h-6"
+              ></div>
+            </template>
+          </Column>
+          <Column
+            :header="i18next.t('AcctMgmt.Detail')"
+            bodyClass="text-neutral-500"
+            headerClass="header-center"
+          >
+            <template #body="slotProps">
+              <div
+                class="row-container flex-w-full-hoverable w-full flex justify-center"
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+              >
+                <img
+                  :src="
+                    slotProps.data.isDetailHovered
+                      ? iconDetailOn
+                      : iconDetailOff
+                  "
+                  alt="Detail"
+                  class="btn-detail cursor-pointer"
+                  @click="onDetailBtnClick(slotProps.data.username)"
+                  @mouseover="handleDetailMouseOver(slotProps.data.username)"
+                  @mouseout="handleDetailMouseOut(slotProps.data.username)"
+                />
+              </div>
+            </template>
+          </Column>
+          <Column
+            :header="i18next.t('AcctMgmt.Edit')"
+            bodyClass="text-neutral-500"
+            headerClass="header-center"
+          >
+            <template #body="slotProps">
+              <div
+                class="row-container flex-w-full-hoverable w-full flex justify-center"
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+              >
+                <img
+                  :src="slotProps.data.isEditHovered ? iconEditOn : iconEditOff"
+                  alt="Edit"
+                  class="btn-edit cursor-pointer"
+                  @click="onEditButtonClick(slotProps.data.username)"
+                  @mouseover="handleEditMouseOver(slotProps.data.username)"
+                  @mouseout="handleEditMouseOut(slotProps.data.username)"
+                />
+              </div>
+            </template>
+          </Column>
+          <Column
+            :header="i18next.t('AcctMgmt.Delete')"
+            bodyClass="text-neutral-500 flex justify-center"
+            headerClass="header-center"
+          >
+            <template #body="slotProps">
+              <div
+                v-if="!slotProps.data.isCurrentLoggedIn"
+                class="row-container flex-w-full-hoverable w-full flex justify-center"
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+              >
+                <img
+                  :src="
+                    slotProps.data.isDeleteHovered
+                      ? iconDeleteRed
+                      : iconDeleteGray
+                  "
+                  :alt="
+                    slotProps.data.isDeleteHovered ? 'hovered' : 'not-hovered'
+                  "
+                  class="delete-account cursor-pointer flex"
+                  @mouseover="handleDeleteMouseOver(slotProps.data.username)"
+                  @mouseout="handleDeleteMouseOut(slotProps.data.username)"
+                  @click="onDeleteBtnClick(slotProps.data.username)"
+                />
+              </div>
+              <div
+                v-else
+                @mouseenter="handleRowMouseOver(slotProps.data.username)"
+                @mouseout="handleRowMouseOut(slotProps.data.username)"
+                class="row-container flex-w-full-hoverable flex w-full h-6"
+              ></div>
+            </template>
+          </Column>
+        </DataTable>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -123,27 +247,27 @@
  *   delete actions, admin toggle, and infinite scroll.
  */
 
-import { ref, computed, onMounted, watch } from 'vue';
-import { useLoadingStore } from '@/stores/loading';
-import { useModalStore } from '@/stores/modal';
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
-import { useLoginStore } from '@/stores/login';
-import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
-import i18next from '@/i18n/i18n.js';
-import { useToast } from 'vue-toast-notification';
+import { ref, computed, onMounted, watch } from "vue";
+import { useLoadingStore } from "@/stores/loading";
+import { useModalStore } from "@/stores/modal";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
+import { useLoginStore } from "@/stores/login";
+import SearchBar from "../../../components/AccountMenu/SearchBar.vue";
+import i18next from "@/i18n/i18n.js";
+import { useToast } from "vue-toast-notification";
 import {
-    MODAL_CREATE_NEW,
-    MODAL_ACCT_EDIT,
-    MODAL_ACCT_INFO,
-    MODAL_DELETE,
-    ONCE_RENDER_NUM_OF_DATA,
-  } from "@/constants/constants.js";
-import iconDeleteGray from '@/assets/icon-delete-gray.svg';
-import iconDeleteRed from '@/assets/icon-delete-red.svg';
-import iconEditOff from '@/assets/icon-edit-off.svg';
-import iconEditOn from '@/assets/icon-edit-on.svg';
-import iconDetailOn from '@/assets/icon-detail-on.svg';
-import iconDetailOff from '@/assets/icon-detail-card.svg';
+  MODAL_CREATE_NEW,
+  MODAL_ACCT_EDIT,
+  MODAL_ACCT_INFO,
+  MODAL_DELETE,
+  ONCE_RENDER_NUM_OF_DATA,
+} from "@/constants/constants.js";
+import iconDeleteGray from "@/assets/icon-delete-gray.svg";
+import iconDeleteRed from "@/assets/icon-delete-red.svg";
+import iconEditOff from "@/assets/icon-edit-off.svg";
+import iconEditOn from "@/assets/icon-edit-on.svg";
+import iconDetailOn from "@/assets/icon-detail-on.svg";
+import iconDetailOff from "@/assets/icon-detail-card.svg";
 
 const toast = useToast();
 const acctMgmtStore = useAcctMgmtStore();
@@ -155,176 +279,187 @@ const infiniteStart = ref(0);
 const shouldUpdateList = computed(() => acctMgmtStore.shouldUpdateList);
 
 const allAccountResponsive = computed(() => acctMgmtStore.allUserAccountList);
-const infiniteAcctData = computed(() => allAccountResponsive.value.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
+const infiniteAcctData = computed(() =>
+  allAccountResponsive.value.slice(
+    0,
+    infiniteStart.value + ONCE_RENDER_NUM_OF_DATA,
+  ),
+);
 const loginUserData = ref(null);
 
-const isOneAccountJustCreate = computed(() => acctMgmtStore.isOneAccountJustCreate);
+const isOneAccountJustCreate = computed(
+  () => acctMgmtStore.isOneAccountJustCreate,
+);
 const justCreateUsername = computed(() => acctMgmtStore.justCreateUsername);
 
-const inputQuery = ref('');
+const inputQuery = ref("");
 
 const fetchLoginUserData = async () => {
-    await loginStore.getUserData();
-    loginUserData.value = loginStore.userData;
+  await loginStore.getUserData();
+  loginUserData.value = loginStore.userData;
 };
 
 const moveJustCreateUserToFirstRow = () => {
-    if(infiniteAcctData.value && infiniteAcctData.value.length){
-        const index = acctMgmtStore.allUserAccountList.findIndex(user => user.username === acctMgmtStore.justCreateUsername);
-        if (index !== -1) {
-            const [justCreateUser] = acctMgmtStore.allUserAccountList[index];
-            infiniteAcctData.value.unshift(justCreateUser);
-        }
+  if (infiniteAcctData.value && infiniteAcctData.value.length) {
+    const index = acctMgmtStore.allUserAccountList.findIndex(
+      (user) => user.username === acctMgmtStore.justCreateUsername,
+    );
+    if (index !== -1) {
+      const [justCreateUser] = acctMgmtStore.allUserAccountList[index];
+      infiniteAcctData.value.unshift(justCreateUser);
     }
+  }
 };
 
 const accountSearchResults = computed(() => {
-    if(!inputQuery.value) {
-        return infiniteAcctData.value;
-    }
-    return acctMgmtStore.allUserAccountList.filter (user => user.username.includes(inputQuery.value));
+  if (!inputQuery.value) {
+    return infiniteAcctData.value;
+  }
+  return acctMgmtStore.allUserAccountList.filter((user) =>
+    user.username.includes(inputQuery.value),
+  );
 });
 
 const onCreateNewClick = () => {
-    acctMgmtStore.clearCurrentViewingUser();
-    modalStore.openModal(MODAL_CREATE_NEW);
+  acctMgmtStore.clearCurrentViewingUser();
+  modalStore.openModal(MODAL_CREATE_NEW);
 };
 
-
 const onAcctDoubleClick = (username) => {
-    acctMgmtStore.setCurrentViewingUser(username);
-    modalStore.openModal(MODAL_ACCT_INFO);
-}
+  acctMgmtStore.setCurrentViewingUser(username);
+  modalStore.openModal(MODAL_ACCT_INFO);
+};
 
 const handleDeleteMouseOver = (username) => {
-    acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
+  acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
 };
 
 const handleDeleteMouseOut = (username) => {
-    acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
-    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+  acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
+  acctMgmtStore.changeIsRowHoveredByUser(username, false);
 };
 
 const handleRowMouseOver = (username) => {
-    acctMgmtStore.changeIsRowHoveredByUser(username, true);
+  acctMgmtStore.changeIsRowHoveredByUser(username, true);
 };
 
 const handleRowMouseOut = (username) => {
-    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+  acctMgmtStore.changeIsRowHoveredByUser(username, false);
 };
 
-
 const handleEditMouseOver = (username) => {
-    acctMgmtStore.changeIsEditHoveredByUser(username, true);
+  acctMgmtStore.changeIsEditHoveredByUser(username, true);
 };
 
 const handleEditMouseOut = (username) => {
-    acctMgmtStore.changeIsEditHoveredByUser(username, false);
-    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+  acctMgmtStore.changeIsEditHoveredByUser(username, false);
+  acctMgmtStore.changeIsRowHoveredByUser(username, false);
 };
 
 const handleDetailMouseOver = (username) => {
-    acctMgmtStore.changeIsDetailHoveredByUser(username, true);
+  acctMgmtStore.changeIsDetailHoveredByUser(username, true);
 };
 
 const handleDetailMouseOut = (username) => {
-    acctMgmtStore.changeIsDetailHoveredByUser(username, false);
-    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+  acctMgmtStore.changeIsDetailHoveredByUser(username, false);
+  acctMgmtStore.changeIsRowHoveredByUser(username, false);
 };
 
-const onEditButtonClick = userNameToEdit => {
-    acctMgmtStore.setCurrentViewingUser(userNameToEdit);
-    modalStore.openModal(MODAL_ACCT_EDIT);
-}
+const onEditButtonClick = (userNameToEdit) => {
+  acctMgmtStore.setCurrentViewingUser(userNameToEdit);
+  modalStore.openModal(MODAL_ACCT_EDIT);
+};
 
 const onDeleteBtnClick = (usernameToDelete) => {
-    acctMgmtStore.setCurrentViewingUser(usernameToDelete);
-    modalStore.openModal(MODAL_DELETE);
+  acctMgmtStore.setCurrentViewingUser(usernameToDelete);
+  modalStore.openModal(MODAL_DELETE);
 };
 
 const getRowClass = (curData) => {
-    return curData?.isRowHovered ? 'bg-[#F1F5F9]' : '';
+  return curData?.isRowHovered ? "bg-[#F1F5F9]" : "";
 };
 
 const onDetailBtnClick = (dataKey) => {
-    acctMgmtStore.setCurrentViewingUser(dataKey);
-    modalStore.openModal(MODAL_ACCT_INFO);
+  acctMgmtStore.setCurrentViewingUser(dataKey);
+  modalStore.openModal(MODAL_ACCT_INFO);
 };
 
-watch(shouldUpdateList, async(newShouldUpdateList) => {
-    if (newShouldUpdateList) {
-        await acctMgmtStore.getAllUserAccounts();
-        moveJustCreateUserToFirstRow();
-    }
-    acctMgmtStore.setShouldUpdateList(false);
+watch(shouldUpdateList, async (newShouldUpdateList) => {
+  if (newShouldUpdateList) {
+    await acctMgmtStore.getAllUserAccounts();
+    moveJustCreateUserToFirstRow();
+  }
+  acctMgmtStore.setShouldUpdateList(false);
 });
 
 const onSearchAccountButtonClick = (inputQueryString) => {
-    inputQuery.value = inputQueryString;
+  inputQuery.value = inputQueryString;
 };
 
-const setIsActiveInput = async(userData, inputIsActiveToSet) => {
-    const userDataToReplace = {
-        username: userData.username,
-        name: userData.name,
-        is_active: inputIsActiveToSet,
-    };
-    await acctMgmtStore.editAccount(userData.username, userDataToReplace);
-    acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
-    toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-}
+const setIsActiveInput = async (userData, inputIsActiveToSet) => {
+  const userDataToReplace = {
+    username: userData.username,
+    name: userData.name,
+    is_active: inputIsActiveToSet,
+  };
+  await acctMgmtStore.editAccount(userData.username, userDataToReplace);
+  acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
+  toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+};
 
-const onAdminInputClick = async(userData, inputIsAdminOn) => {
-    const ADMIN_ROLE_NAME = 'admin';
-    switch(inputIsAdminOn) {
-        case true:
-            await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
-            break;
-        case false:
-            await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
-            break;
-        default:
-            break;
-    }
-    const userDataToReplace = {
-        username: userData.username,
-        name: userData.name,
-        is_admin: inputIsAdminOn,
-    };
+const onAdminInputClick = async (userData, inputIsAdminOn) => {
+  const ADMIN_ROLE_NAME = "admin";
+  switch (inputIsAdminOn) {
+    case true:
+      await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
+      break;
+    case false:
+      await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
+      break;
+    default:
+      break;
+  }
+  const userDataToReplace = {
+    username: userData.username,
+    name: userData.name,
+    is_admin: inputIsAdminOn,
+  };
 
-    acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
-    toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-}
+  acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
+  toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+};
 
 /**
  * Loads more account data when the user scrolls near the bottom.
  * @param {Event} event - The scroll event from the data grid.
  */
 const handleScroll = (event) => {
-    const container = event.target;
-    const smallValue = 3;
+  const container = event.target;
+  const smallValue = 3;
 
-    const isOverScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
-    if(isOverScrollHeight){
-        fetchMoreDataVue3();
-    }
+  const isOverScrollHeight =
+    container.scrollTop + container.clientHeight >=
+    container.scrollHeight - smallValue;
+  if (isOverScrollHeight) {
+    fetchMoreDataVue3();
+  }
 };
 
 const fetchMoreDataVue3 = () => {
-    if(infiniteAcctData.value.length < acctMgmtStore.allUserAccountList.length) {
-        infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
-    }
+  if (infiniteAcctData.value.length < acctMgmtStore.allUserAccountList.length) {
+    infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
+  }
 };
 
 onMounted(async () => {
-    loadingStore.setIsLoading(false);
-    await fetchLoginUserData();
-    await acctMgmtStore.getAllUserAccounts();
+  loadingStore.setIsLoading(false);
+  await fetchLoginUserData();
+  await acctMgmtStore.getAllUserAccounts();
 });
 </script>
 <style>
 /* Center column text so that radio buttons are also centered */
-.header-center .p-column-header-content{
-    justify-content: center;
+.header-center .p-column-header-content {
+  justify-content: center;
 }
 </style>
diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 371fe86..51bcef4 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -1,184 +1,305 @@
 <template>
-    <div id="modal_account_edit_or_create_new" class="w-[640px] bg-[#FFFFFF] rounded
-        shadow-lg flex flex-col">
-        <ModalHeader :headerText="modalTitle"/>
+  <div
+    id="modal_account_edit_or_create_new"
+    class="w-[640px] bg-[#FFFFFF] rounded shadow-lg flex flex-col"
+  >
+    <ModalHeader :headerText="modalTitle" />
 
-        <main class="flex row min-h-[96px] my-[32px] flex-col px-6">
-            <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
-                justify-between">
-                <div class="field-label text-sm flex items-center font-medium  justify-end">
-                    <span class="align-right-span flex w-[122px] justify-end">
-                        {{ i18next.t("AcctMgmt.Account") }}
-                    </span>
-                </div>
-                <div class="input-and-error flex flex-col">
-                    <input id="input_account_field"
-                        class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
-                        v-model="inputUserAccount"
-                        :class="{
-                        'text-[#000000]': isAccountUnique,
-                        'text-[#FF3366]': !isAccountUnique,
-                        'border-[#FF3366]': !isAccountUnique,
-                        }"
-                        :readonly="!isEditable" autocomplete="off"
-                        @dblclick="onInputDoubleClick"
-                    />
-                    <div v-show="!isAccountUnique" class="error-wrapper my-2">
-                        <div class="error-msg-section flex justify-start">
-                        <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
-                        <span class="error-msg-text flex text-[#FF3366] h-[24px]">
-                            {{ i18next.t("AcctMgmt.AccountNotUnique") }}
-                        </span>
-                    </div>
-                </div>
+    <main class="flex row min-h-[96px] my-[32px] flex-col px-6">
+      <div
+        class="input-row w-full flex py-2 h-[40px] mb-4 items-center justify-between"
+      >
+        <div
+          class="field-label text-sm flex items-center font-medium justify-end"
+        >
+          <span class="align-right-span flex w-[122px] justify-end">
+            {{ i18next.t("AcctMgmt.Account") }}
+          </span>
+        </div>
+        <div class="input-and-error flex flex-col">
+          <input
+            id="input_account_field"
+            class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
+            v-model="inputUserAccount"
+            :class="{
+              'text-[#000000]': isAccountUnique,
+              'text-[#FF3366]': !isAccountUnique,
+              'border-[#FF3366]': !isAccountUnique,
+            }"
+            :readonly="!isEditable"
+            autocomplete="off"
+            @dblclick="onInputDoubleClick"
+          />
+          <div v-show="!isAccountUnique" class="error-wrapper my-2">
+            <div class="error-msg-section flex justify-start">
+              <img
+                src="@/assets/icon-alert.svg"
+                alt="!"
+                class="exclamation-img flex mr-2"
+              />
+              <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+                {{ i18next.t("AcctMgmt.AccountNotUnique") }}
+              </span>
             </div>
-            </div>
-            <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
-                justify-between">
-                <div class="field-label text-sm flex items-center font-medium  justify-end">
-                    <span class="align-right-span flex w-[122px] justify-end">
-                        {{ i18next.t("AcctMgmt.FullName") }}
-                    </span>
-                </div>
-                <input id="input_name_field"
-                    class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
-                    v-model="inputName" :readonly="!isEditable" @dblclick="onInputDoubleClick" @focus="onInputNameFocus"
-                    autocomplete="off"
-                    />
-            </div>
-            <div v-show="!isSSO" class="input-row w-full flex py-2 mb-4 items-center
-                justify-between">
-                    <div class="field-label text-sm flex flex-col items-start font-medium  justify-end"
-                        :class="{
-                            'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
-                        }"
-                    > <!-- Layout of Password field changes depending on whether this is the create or edit modal -->
-                        <span class="align-right-span flex h-full w-[122px] justify-end"
-                            :class="{
-                                'pt-[12px]': whichCurrentModal !== MODAL_CREATE_NEW,
-                                'text-top': whichCurrentModal !== MODAL_CREATE_NEW,
-                                'h-[40px]': whichCurrentModal === MODAL_CREATE_NEW,
-                                'items-center': whichCurrentModal === MODAL_CREATE_NEW,
-                            }">
-                            {{ i18next.t("AcctMgmt.Password") }}
-                        </span>
-                        <span v-if="whichCurrentModal === MODAL_CREATE_NEW" class="dummy-cell
-                            flex w-[122px] h-[40px]">
-                        </span>
-                    </div>
-                    <div class="reset-btn-and-input-pwd-and-error flex flex-col"
-                        :class="{'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,}"
-                    >
-                        <div v-if="whichCurrentModal !== MODAL_CREATE_NEW" class="flex account-edit-section justify-start w-[454px]">
-                            <button class="flex w-[85px] h-[40px] reset-btn rounded-full border-[1px] border-[#666666] cursor-pointer
-                                items-center justify-center hover:text-[#0099FF] hover:border-[#0099FF] mb-[20px]"
-                                @click="onResetPwdButtonClick"
-                            >
-                                {{ i18next.t("AcctMgmt.Reset") }}
-                            </button>
-                        </div>
-                        <div v-if="whichCurrentModal === MODAL_CREATE_NEW || isResetPwdSectionShow"
-                            class="w-[454px] flex flex-col input-and-error-msg">
-                            <div class="input-and-eye flex items-center w-full h-[40px] relative border-[1px] rounded"
-                                :class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
-                            >
-                                 <input id="input_first_pwd" class="outline-none p-1 w-[352px]" :type="isPwdEyeOn ? 'text' : 'password'"
-                                    v-model="inputPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
-                                    autocomplete="off" :class="{'color-[#FF3366]': !isPwdLengthValid, 'color-[#64748B]': isPwdLengthValid,}"/>
-                                <img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
-                                    @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
-                                <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer"
-                                @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt="eye"/>
-                            </div>
-                            <div class="error-msg-section flex justify-start mt-4">
-                                <img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
-                                <span class="error-msg-text flex text-[#FF3366] h-[24px]">
-                                    {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-            </div>
-            <div v-show="false" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
-                mb-4 flex items-center"> <!-- 2-by-2 grid; the bottom-left cell is a dummy cell with no content -->
-                <span v-show="false" class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
-                    :class="{
-                        'text-[#000000]': isPwdMatched,
-                        'text-[#FF3366]': !isPwdMatched,
-                    }">
-                    {{ i18next.t("AcctMgmt.ConfirmPassword") }}
-                </span>
-
-                <div v-show="false" class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center
-                    h-[40px] mb-4"
-                    :class="{
-                        'border-[#000000]': isPwdMatched,
-                        'border-[#FF3366]': !isPwdMatched,
-                    }">
-                    <input v-show="false" id="input_second_pwd" class="outline-none p-1 w-[352px]" :type="isPwdConfirmEyeOn ? 'text' : 'password'"
-                        v-model="inputConfirmPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
-                        :class="{
-                        'text-[#000000]': isPwdMatched,
-                        'text-[#FF3366]': !isPwdMatched,
-                    }" autocomplete="off"/>
-                    <img v-if="isPwdConfirmEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
-                        @click="togglePwdConfirmEyeBtn" alt="eye"/>
-                    <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdConfirmEyeBtn" alt="eye"/>
-                </div>
-                <div class="dummy-grid h-[24px]"></div> <!-- Use dummy-grid to maintain the height -->
-                <div class="error-msg-section flex justify-start">
-                    <img v-show="!isPwdMatched" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
-                    <span class="error-msg-text flex text-[#FF3366] h-[24px]">
-                        {{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
-                    </span>
-                </div>
-                <div class="dummy-grid h-[24px]"></div> <!-- Use dummy-grid to maintain the height -->
-                <div class="error-msg-section flex justify-start">
-                    <img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
-                    <span class="error-msg-text flex text-[#FF3366] h-[24px]">
-                        {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
-                    </span>
-                </div>
-            </div>
-            <div v-if="whichCurrentModal === MODAL_CREATE_NEW" class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
-                <div class="dummy field-label flex items-center w-[122px]">
-                </div> <!-- A dummy field is also used here to maintain spacing -->
-                <section id="account_create_checkboxes_section" class="flex flex-col">
-                    <div class="checkbox-and-text flex">
-                        <IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
-                        <span class="flex checkbox-text">
-                            {{ i18next.t("AcctMgmt.SetAsAdmin") }}
-                        </span>
-                    </div>
-                    <div class="checkbox-and-text flex">
-                        <IconChecked  :isChecked="isSetActivedChecked" @click="toggleIsActivated"/>
-                        <span class="flex checkbox-text">
-                            {{ i18next.t("AcctMgmt.ActivateNow") }}
-                        </span>
-                    </div>
-                </section>
-            </div>
-        </main>
-        <footer class="flex row footer justify-end pr-[32px] pb-8">
-            <button class="cancel-btn rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
-                flex justify-center items-center text-[#4E5969] font-medium
-                hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
-                @click="onCancelBtnClick"
+          </div>
+        </div>
+      </div>
+      <div
+        class="input-row w-full flex py-2 h-[40px] mb-4 items-center justify-between"
+      >
+        <div
+          class="field-label text-sm flex items-center font-medium justify-end"
+        >
+          <span class="align-right-span flex w-[122px] justify-end">
+            {{ i18next.t("AcctMgmt.FullName") }}
+          </span>
+        </div>
+        <input
+          id="input_name_field"
+          class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
+          v-model="inputName"
+          :readonly="!isEditable"
+          @dblclick="onInputDoubleClick"
+          @focus="onInputNameFocus"
+          autocomplete="off"
+        />
+      </div>
+      <div
+        v-show="!isSSO"
+        class="input-row w-full flex py-2 mb-4 items-center justify-between"
+      >
+        <div
+          class="field-label text-sm flex flex-col items-start font-medium justify-end"
+          :class="{
+            'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
+          }"
+        >
+          <!-- Layout of Password field changes depending on whether this is the create or edit modal -->
+          <span
+            class="align-right-span flex h-full w-[122px] justify-end"
+            :class="{
+              'pt-[12px]': whichCurrentModal !== MODAL_CREATE_NEW,
+              'text-top': whichCurrentModal !== MODAL_CREATE_NEW,
+              'h-[40px]': whichCurrentModal === MODAL_CREATE_NEW,
+              'items-center': whichCurrentModal === MODAL_CREATE_NEW,
+            }"
+          >
+            {{ i18next.t("AcctMgmt.Password") }}
+          </span>
+          <span
+            v-if="whichCurrentModal === MODAL_CREATE_NEW"
+            class="dummy-cell flex w-[122px] h-[40px]"
+          >
+          </span>
+        </div>
+        <div
+          class="reset-btn-and-input-pwd-and-error flex flex-col"
+          :class="{ 'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW }"
+        >
+          <div
+            v-if="whichCurrentModal !== MODAL_CREATE_NEW"
+            class="flex account-edit-section justify-start w-[454px]"
+          >
+            <button
+              class="flex w-[85px] h-[40px] reset-btn rounded-full border-[1px] border-[#666666] cursor-pointer items-center justify-center hover:text-[#0099FF] hover:border-[#0099FF] mb-[20px]"
+              @click="onResetPwdButtonClick"
             >
-                {{ i18next.t("Global.Cancel") }}
+              {{ i18next.t("AcctMgmt.Reset") }}
             </button>
-            <button class="confirm-btn rounded-full w-[92px] h-10 px-2.5 py-6
-                flex justify-center items-center text-[#ffffff] font-medium  ml-[16px]"
-                @click="onConfirmBtnClick" :disabled="isConfirmDisabled"
+          </div>
+          <div
+            v-if="
+              whichCurrentModal === MODAL_CREATE_NEW || isResetPwdSectionShow
+            "
+            class="w-[454px] flex flex-col input-and-error-msg"
+          >
+            <div
+              class="input-and-eye flex items-center w-full h-[40px] relative border-[1px] rounded"
+              :class="{
+                'border-[#FF3366]': !isPwdLengthValid,
+                'border-[#64748B]': isPwdLengthValid,
+              }"
+            >
+              <input
+                id="input_first_pwd"
+                class="outline-none p-1 w-[352px]"
+                :type="isPwdEyeOn ? 'text' : 'password'"
+                v-model="inputPwd"
+                :readonly="!isEditable"
+                @dblclick="onInputDoubleClick"
+                autocomplete="off"
                 :class="{
-                    'bg-[#0099FF]': !isConfirmDisabled,
-                    'bg-[#E2E8F0]': isConfirmDisabled,
+                  'color-[#FF3366]': !isPwdLengthValid,
+                  'color-[#64748B]': isPwdLengthValid,
                 }"
-            >
-                {{ i18next.t("Global.Confirm") }}
-            </button>
-        </footer>
-    </div>
+              />
+              <img
+                id="eye_button"
+                v-if="isPwdEyeOn"
+                src="@/assets/icon-eye-open.svg"
+                class="absolute right-[8px] cursor-pointer"
+                @mousedown="togglePwdEyeBtn(true)"
+                @mouseup="togglePwdEyeBtn(false)"
+                alt=""
+              />
+              <img
+                v-else
+                src="@/assets/icon-eye-hide.svg"
+                class="absolute right-[8px] cursor-pointer"
+                @mousedown="togglePwdEyeBtn(true)"
+                @mouseup="togglePwdEyeBtn(false)"
+                alt="eye"
+              />
+            </div>
+            <div class="error-msg-section flex justify-start mt-4">
+              <img
+                v-show="!isPwdLengthValid"
+                src="@/assets/icon-alert.svg"
+                alt="!"
+                class="exclamation-img flex mr-2"
+              />
+              <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+                {{
+                  isPwdLengthValid
+                    ? ""
+                    : i18next.t("AcctMgmt.PwdLengthNotEnough")
+                }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-show="false"
+        id="confirm_pwd_row"
+        class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4 mb-4 flex items-center"
+      >
+        <!-- 2-by-2 grid; the bottom-left cell is a dummy cell with no content -->
+        <span
+          v-show="false"
+          class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
+          :class="{
+            'text-[#000000]': isPwdMatched,
+            'text-[#FF3366]': !isPwdMatched,
+          }"
+        >
+          {{ i18next.t("AcctMgmt.ConfirmPassword") }}
+        </span>
+
+        <div
+          v-show="false"
+          class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center h-[40px] mb-4"
+          :class="{
+            'border-[#000000]': isPwdMatched,
+            'border-[#FF3366]': !isPwdMatched,
+          }"
+        >
+          <input
+            v-show="false"
+            id="input_second_pwd"
+            class="outline-none p-1 w-[352px]"
+            :type="isPwdConfirmEyeOn ? 'text' : 'password'"
+            v-model="inputConfirmPwd"
+            :readonly="!isEditable"
+            @dblclick="onInputDoubleClick"
+            :class="{
+              'text-[#000000]': isPwdMatched,
+              'text-[#FF3366]': !isPwdMatched,
+            }"
+            autocomplete="off"
+          />
+          <img
+            v-if="isPwdConfirmEyeOn"
+            src="@/assets/icon-eye-open.svg"
+            class="absolute right-[8px] cursor-pointer"
+            @click="togglePwdConfirmEyeBtn"
+            alt="eye"
+          />
+          <img
+            v-else
+            src="@/assets/icon-eye-hide.svg"
+            class="absolute right-[8px] cursor-pointer"
+            @click="togglePwdConfirmEyeBtn"
+            alt="eye"
+          />
+        </div>
+        <div class="dummy-grid h-[24px]"></div>
+        <!-- Use dummy-grid to maintain the height -->
+        <div class="error-msg-section flex justify-start">
+          <img
+            v-show="!isPwdMatched"
+            src="@/assets/icon-alert.svg"
+            alt="!"
+            class="exclamation-img flex mr-2"
+          />
+          <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+            {{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
+          </span>
+        </div>
+        <div class="dummy-grid h-[24px]"></div>
+        <!-- Use dummy-grid to maintain the height -->
+        <div class="error-msg-section flex justify-start">
+          <img
+            v-show="!isPwdLengthValid"
+            src="@/assets/icon-alert.svg"
+            alt="!"
+            class="exclamation-img flex mr-2"
+          />
+          <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+            {{
+              isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough")
+            }}
+          </span>
+        </div>
+      </div>
+      <div
+        v-if="whichCurrentModal === MODAL_CREATE_NEW"
+        class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center"
+      >
+        <div class="dummy field-label flex items-center w-[122px]"></div>
+        <!-- A dummy field is also used here to maintain spacing -->
+        <section id="account_create_checkboxes_section" class="flex flex-col">
+          <div class="checkbox-and-text flex">
+            <IconChecked
+              :isChecked="isSetAsAdminChecked"
+              @click="toggleIsAdmin"
+            />
+            <span class="flex checkbox-text">
+              {{ i18next.t("AcctMgmt.SetAsAdmin") }}
+            </span>
+          </div>
+          <div class="checkbox-and-text flex">
+            <IconChecked
+              :isChecked="isSetActivedChecked"
+              @click="toggleIsActivated"
+            />
+            <span class="flex checkbox-text">
+              {{ i18next.t("AcctMgmt.ActivateNow") }}
+            </span>
+          </div>
+        </section>
+      </div>
+    </main>
+    <footer class="flex row footer justify-end pr-[32px] pb-8">
+      <button
+        class="cancel-btn rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B] flex justify-center items-center text-[#4E5969] font-medium hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
+        @click="onCancelBtnClick"
+      >
+        {{ i18next.t("Global.Cancel") }}
+      </button>
+      <button
+        class="confirm-btn rounded-full w-[92px] h-10 px-2.5 py-6 flex justify-center items-center text-[#ffffff] font-medium ml-[16px]"
+        @click="onConfirmBtnClick"
+        :disabled="isConfirmDisabled"
+        :class="{
+          'bg-[#0099FF]': !isConfirmDisabled,
+          'bg-[#E2E8F0]': isConfirmDisabled,
+        }"
+      >
+        {{ i18next.t("Global.Confirm") }}
+      </button>
+    </footer>
+  </div>
 </template>
 
 <script setup>
@@ -192,15 +313,19 @@
  *   username, name, password fields and validation.
  */
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch } from "vue";
 import i18next from "@/i18n/i18n.js";
-import { useModalStore } from '@/stores/modal';
-import { useRouter } from 'vue-router';
-import { useToast } from 'vue-toast-notification';
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
+import { useModalStore } from "@/stores/modal";
+import { useRouter } from "vue-router";
+import { useToast } from "vue-toast-notification";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
-import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, PWD_VALID_LENGTH } from '@/constants/constants.js';
+import {
+  MODAL_CREATE_NEW,
+  MODAL_ACCT_EDIT,
+  PWD_VALID_LENGTH,
+} from "@/constants/constants.js";
 
 const acctMgmtStore = useAcctMgmtStore();
 const modalStore = useModalStore();
@@ -223,157 +348,170 @@ const isSSO = computed(() => acctMgmtStore.currentViewingUser.is_sso);
 const username = computed(() => acctMgmtStore.currentViewingUser.username);
 const name = computed(() => acctMgmtStore.currentViewingUser.name);
 
-const inputUserAccount = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.username);
-const inputName = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.name);
+const inputUserAccount = ref(
+  whichCurrentModal.value === MODAL_CREATE_NEW
+    ? ""
+    : currentViewingUser.value.username,
+);
+const inputName = ref(
+  whichCurrentModal.value === MODAL_CREATE_NEW
+    ? ""
+    : currentViewingUser.value.name,
+);
 const inputPwd = ref("");
 const isAccountUnique = ref(true);
 const isEditable = ref(true);
 
 // Since adding this watch, filling in the password field no longer clears the account or full name fields.
 watch(whichCurrentModal, (newVal) => {
-    if (newVal === MODAL_CREATE_NEW) {
-        inputUserAccount.value = '';
-        inputName.value = '';
-    } else {
-        inputUserAccount.value = currentViewingUser.value.username;
-        inputName.value = currentViewingUser.value.name;
-    }
+  if (newVal === MODAL_CREATE_NEW) {
+    inputUserAccount.value = "";
+    inputName.value = "";
+  } else {
+    inputUserAccount.value = currentViewingUser.value.username;
+    inputName.value = currentViewingUser.value.name;
+  }
 });
 
 const modalTitle = computed(() => {
-    return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
+  return modalStore.whichModal === MODAL_CREATE_NEW
+    ? i18next.t("AcctMgmt.CreateNew")
+    : i18next.t("AcctMgmt.AccountEdit");
 });
 
 const togglePwdEyeBtn = (toBeOpen) => {
-    isPwdEyeOn.value = toBeOpen;
+  isPwdEyeOn.value = toBeOpen;
 };
 
 const validatePwdLength = () => {
-    isPwdLengthValid.value = !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
-}
+  isPwdLengthValid.value =
+    !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
+};
 
 const onInputDoubleClick = () => {
-    // Enable edit mode
-    isEditable.value = true;
-}
+  // Enable edit mode
+  isEditable.value = true;
+};
 
 const onConfirmBtnClick = async () => {
-    // rule for minimum length
-    validatePwdLength();
-    if(!isPwdLengthValid.value) {
+  // rule for minimum length
+  validatePwdLength();
+  if (!isPwdLengthValid.value) {
+    return;
+  }
+
+  // rule for account uniqueness
+  switch (whichCurrentModal.value) {
+    case MODAL_CREATE_NEW:
+      await checkAccountIsUnique();
+      if (!isAccountUnique.value) {
         return;
-    }
+      }
+      await acctMgmtStore.createNewAccount({
+        username: inputUserAccount.value,
+        password: inputPwd.value === undefined ? "" : inputPwd.value,
+        name: inputName.value,
+        is_admin: isSetAsAdminChecked.value,
+        is_active: isSetActivedChecked.value,
+      });
+      await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
+      await modalStore.closeModal();
+      acctMgmtStore.setShouldUpdateList(true);
+      await router.push("/account-admin");
+      break;
+    case MODAL_ACCT_EDIT:
+      await checkAccountIsUnique();
+      if (!isAccountUnique.value) {
+        return;
+      }
+      // Note that the old username and new username can be different
+      // Distinguish between cases with and without a password
+      if (isResetPwdSectionShow.value) {
+        await acctMgmtStore.editAccount(currentViewingUser.value.username, {
+          newUsername: inputUserAccount.value,
+          password: inputPwd.value,
+          name: inputName.value === undefined ? "" : inputName.value,
+          is_active: true,
+        });
+      } else {
+        await acctMgmtStore.editAccount(currentViewingUser.value.username, {
+          newUsername: inputUserAccount.value,
+          name: inputName.value === undefined ? "" : inputName.value,
+          is_active: true,
+        });
+      }
+      await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+      isEditable.value = false;
+      break;
+    default:
+      break;
+  }
+};
 
-    // rule for account uniqueness
-    switch(whichCurrentModal.value) {
-        case MODAL_CREATE_NEW:
-            await checkAccountIsUnique();
-            if(!isAccountUnique.value) {
-                return;
-            }
-            await acctMgmtStore.createNewAccount({
-                username: inputUserAccount.value,
-                password: inputPwd.value === undefined ? '' : inputPwd.value,
-                name: inputName.value,
-                is_admin: isSetAsAdminChecked.value,
-                is_active: isSetActivedChecked.value,
-            });
-            await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
-            await modalStore.closeModal();
-            acctMgmtStore.setShouldUpdateList(true);
-            await router.push('/account-admin');
-        break;
-        case MODAL_ACCT_EDIT:
-            await checkAccountIsUnique();
-            if(!isAccountUnique.value) {
-                return;
-            }
-            // Note that the old username and new username can be different
-            // Distinguish between cases with and without a password
-            if(isResetPwdSectionShow.value) {
-                await acctMgmtStore.editAccount(
-                    currentViewingUser.value.username, {
-                    newUsername: inputUserAccount.value,
-                    password: inputPwd.value,
-                    name: inputName.value === undefined ? '' : inputName.value,
-                    is_active: true,
-                });
-            } else {
-                await acctMgmtStore.editAccount(
-                    currentViewingUser.value.username, {
-                    newUsername: inputUserAccount.value,
-                    name: inputName.value === undefined ? '' : inputName.value,
-                    is_active: true,
-                });
-            }
-            await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-            isEditable.value = false;
-            break;
-        default:
-        break;
-    }
-}
-
-const checkAccountIsUnique = async() => {
-    // If the user has not modified the field, no backend API call is needed
-    if(inputUserAccount.value === username.value) {
-        return true;
-    }
-    const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
-    isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
-    return isAccountUnique.value;
+const checkAccountIsUnique = async () => {
+  // If the user has not modified the field, no backend API call is needed
+  if (inputUserAccount.value === username.value) {
+    return true;
+  }
+  const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(
+    inputUserAccount.value,
+  );
+  isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
+  return isAccountUnique.value;
 };
 
 const toggleIsAdmin = () => {
-    if(isEditable){
-        isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
-    }
-}
+  if (isEditable.value) {
+    isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
+  }
+};
 
 const toggleIsActivated = () => {
-    if(isEditable){
-        isSetActivedChecked.value = !isSetActivedChecked.value;
-    }
-}
+  if (isEditable.value) {
+    isSetActivedChecked.value = !isSetActivedChecked.value;
+  }
+};
 
 const onInputNameFocus = () => {
-    if(isConfirmDisabled.value){
-        isConfirmDisabled.value = false;
-    }
-}
+  if (isConfirmDisabled.value) {
+    isConfirmDisabled.value = false;
+  }
+};
 
 const onResetPwdButtonClick = () => {
-    isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
-    // Must clear the password input field
-    inputPwd.value = '';
-}
+  isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
+  // Must clear the password input field
+  inputPwd.value = "";
+};
 
 watch(
-    [inputPwd, inputUserAccount, inputName],
-    ([newPwd, newAccount, newName]) => {
-        // Enable the confirm button when all fields are non-empty
-        if(newAccount.length > 0 && newName.length > 0) {
-            isConfirmDisabled.value = false;
-        }
-        if(whichCurrentModal.value !== MODAL_CREATE_NEW) {
-            if(isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
-                isConfirmDisabled.value = true;
-            }
-        }else {
-            if(newPwd.length < PWD_VALID_LENGTH) {
-                isConfirmDisabled.value = true;
-            }
-        }
+  [inputPwd, inputUserAccount, inputName],
+  ([newPwd, newAccount, newName]) => {
+    // Enable the confirm button when all fields are non-empty
+    if (newAccount.length > 0 && newName.length > 0) {
+      isConfirmDisabled.value = false;
     }
+    if (whichCurrentModal.value !== MODAL_CREATE_NEW) {
+      if (isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
+        isConfirmDisabled.value = true;
+      }
+    } else {
+      if (newPwd.length < PWD_VALID_LENGTH) {
+        isConfirmDisabled.value = true;
+      }
+    }
+  },
 );
 
-function onCancelBtnClick(){
-    modalStore.closeModal();
+function onCancelBtnClick() {
+  modalStore.closeModal();
 }
 </script>
 <style>
 #modal_account_edit {
-    background-color: #ffffff;
-    backdrop-filter: opacity(1); /* Prevent child elements from inheriting parent's opacity */
+  background-color: #ffffff;
+  backdrop-filter: opacity(
+    1
+  ); /* Prevent child elements from inheriting parent's opacity */
 }
 </style>
diff --git a/src/views/AccountManagement/ModalAccountInfo.vue b/src/views/AccountManagement/ModalAccountInfo.vue
index 761ba28..a5c6025 100644
--- a/src/views/AccountManagement/ModalAccountInfo.vue
+++ b/src/views/AccountManagement/ModalAccountInfo.vue
@@ -1,25 +1,38 @@
 <template>
-     <div id="modal_account_edit" class="w-[600px] h-[536px] bg-[#FFFFFF] rounded
-        shadow-lg flex flex-col">
-        <ModalHeader :headerText='i18next.t("AcctMgmt.AccountInformation")'/>
-        <main class="flex main-part flex-col px-6 mt-6">
-            <h1 id="acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">{{ name }}</h1>
-            <div class="status-container">
-                <Badge displayText="Admin" :isActivated="is_admin"/>
-                <Badge displayText="Suspended" :isActivated="!is_active"/>
-            </div>
-            <div id="account_visit_info" class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4">
-                Account: <span class="text-[#0099FF]">{{ username }}</span>, total visits <span class="text-[#0099FF]">
-                    {{ visitTime }}
-                </span> times.
-            </div>
-        </main>
-        <main class="flex main-part flex-col px-6 py-4">
-            <ul class="leading-[21px] list-disc list-inside">
-                <li>[2023-01-01 08:30:25] Account created by</li>
-            </ul>
-        </main>
-    </div>
+  <div
+    id="modal_account_edit"
+    class="w-[600px] h-[536px] bg-[#FFFFFF] rounded shadow-lg flex flex-col"
+  >
+    <ModalHeader :headerText="i18next.t('AcctMgmt.AccountInformation')" />
+    <main class="flex main-part flex-col px-6 mt-6">
+      <h1
+        id="acct_info_user_name"
+        class="text-[32px] leading-[64px] font-medium mb-2"
+      >
+        {{ name }}
+      </h1>
+      <div class="status-container">
+        <Badge displayText="Admin" :isActivated="is_admin" />
+        <Badge displayText="Suspended" :isActivated="!is_active" />
+      </div>
+      <div
+        id="account_visit_info"
+        class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4"
+      >
+        Account: <span class="text-[#0099FF]">{{ username }}</span
+        >, total visits
+        <span class="text-[#0099FF]">
+          {{ visitTime }}
+        </span>
+        times.
+      </div>
+    </main>
+    <main class="flex main-part flex-col px-6 py-4">
+      <ul class="leading-[21px] list-disc list-inside">
+        <li>[2023-01-01 08:30:25] Account created by</li>
+      </ul>
+    </main>
+  </div>
 </template>
 
 <script setup>
@@ -34,24 +47,19 @@
  *   status badges, and visit count.
  */
 
-import { onBeforeMount, computed, ref } from 'vue';
-import i18next from '@/i18n/i18n.js';
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
-import ModalHeader from './ModalHeader.vue';
-import Badge from '../../components/Badge.vue';
+import { onBeforeMount, computed, ref } from "vue";
+import i18next from "@/i18n/i18n.js";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
+import ModalHeader from "./ModalHeader.vue";
+import Badge from "../../components/Badge.vue";
 
 const acctMgmtStore = useAcctMgmtStore();
 const visitTime = ref(0);
 const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
-const {
-    username,
-    name,
-    is_admin,
-    is_active,
-} = currentViewingUser.value;
+const { username, name, is_admin, is_active } = currentViewingUser.value;
 
-onBeforeMount(async() => {
-    await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
-    visitTime.value = currentViewingUser.value.detail.visits;
+onBeforeMount(async () => {
+  await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
+  visitTime.value = currentViewingUser.value.detail.visits;
 });
 </script>
diff --git a/src/views/AccountManagement/ModalContainer.vue b/src/views/AccountManagement/ModalContainer.vue
index 6db3843..120e047 100644
--- a/src/views/AccountManagement/ModalContainer.vue
+++ b/src/views/AccountManagement/ModalContainer.vue
@@ -1,45 +1,49 @@
 <template>
-    <div id="modal_container" v-if="modalStore.isModalOpen" class="fixed w-screen h-screen bg-gray-800
-        flex justify-center items-center">
-
-      <div class="flex">
-        <ModalAccountEditCreate v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW "/>
-        <ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO"/>
-        <ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
-      </div>
+  <div
+    id="modal_container"
+    v-if="modalStore.isModalOpen"
+    class="fixed w-screen h-screen bg-gray-800 flex justify-center items-center"
+  >
+    <div class="flex">
+      <ModalAccountEditCreate
+        v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW"
+      />
+      <ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO" />
+      <ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
     </div>
-  </template>
+  </div>
+</template>
 
-  <script setup>
+<script setup>
 // The Lucia project.
 // Copyright 2024-2026 DSP, inc.  All rights reserved.
 // Authors:
 //   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
 //   imacat.yang@dsp.im (imacat), 2023/9/23
-  /**
-   * @module views/AccountManagement/ModalContainer Container
-   *   that renders the appropriate account management modal
-   *   based on the current modal type.
-   */
+/**
+ * @module views/AccountManagement/ModalContainer Container
+ *   that renders the appropriate account management modal
+ *   based on the current modal type.
+ */
 
-  import { computed } from 'vue';
-  import { useModalStore } from '@/stores/modal';
-  import ModalAccountEditCreate from './ModalAccountEditCreate.vue';
-  import ModalAccountInfo from './ModalAccountInfo.vue';
-  import ModalDeleteAlert from './ModalDeleteAlert.vue';
-  import {
-    MODAL_CREATE_NEW,
-    MODAL_ACCT_EDIT,
-    MODAL_ACCT_INFO,
-    MODAL_DELETE,
-  } from "@/constants/constants.js";
+import { computed } from "vue";
+import { useModalStore } from "@/stores/modal";
+import ModalAccountEditCreate from "./ModalAccountEditCreate.vue";
+import ModalAccountInfo from "./ModalAccountInfo.vue";
+import ModalDeleteAlert from "./ModalDeleteAlert.vue";
+import {
+  MODAL_CREATE_NEW,
+  MODAL_ACCT_EDIT,
+  MODAL_ACCT_INFO,
+  MODAL_DELETE,
+} from "@/constants/constants.js";
 
-  const modalStore = useModalStore();
-  const whichModal = computed(() => modalStore.whichModal);
-  </script>
+const modalStore = useModalStore();
+const whichModal = computed(() => modalStore.whichModal);
+</script>
 <style>
 #modal_container {
-    z-index: 9999;
-    background-color: rgba(254,254,254, 0.8);
+  z-index: 9999;
+  background-color: rgba(254, 254, 254, 0.8);
 }
 </style>
diff --git a/src/views/AccountManagement/ModalDeleteAlert.vue b/src/views/AccountManagement/ModalDeleteAlert.vue
index 153458f..44b60de 100644
--- a/src/views/AccountManagement/ModalDeleteAlert.vue
+++ b/src/views/AccountManagement/ModalDeleteAlert.vue
@@ -1,30 +1,49 @@
 <template>
-    <div id="modal_delete_acct_alert" class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]">
-        <div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
-        <main id="delete_acct_modal_main" class="flex flex-col items-center justify-center">
-            <img src="@/assets/icon-large-exclamation.svg" alt="!"  class="flex mt-[36px]">
-            <h1 class="flex mt-4 text-xl font-medium">{{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}</h1>
-            <div class="clauses flex flex-col mt-4 mb-8 px-8">
-                <h2 class="flex leading-[21px]">{{ i18next.t("The") }}&nbsp;<span class="text-[#FF3366]">
-                    {{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
-                    </span>
-                </h2>
-                <h2 class="flex leading-[21px]">{{ i18next.t("AcctMgmt.DeleteSecondClause") }}</h2>
-            </div>
-        </main>
-        <footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
-            <button id="calcel_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
-                bg-[#FF3366] text-[#ffffff]" @click="onNoBtnClick">
-                {{ i18next.t("No") }}
-            </button>
-            <button id="sure_to_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
-                border-2 border-[#FF3366] text-[#FF3366]"
-                @click="onDeleteConfirmBtnClick"
-                >
-                {{ i18next.t("Yes") }}
-            </button>
-        </footer>
-    </div>
+  <div
+    id="modal_delete_acct_alert"
+    class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]"
+  >
+    <div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
+    <main
+      id="delete_acct_modal_main"
+      class="flex flex-col items-center justify-center"
+    >
+      <img
+        src="@/assets/icon-large-exclamation.svg"
+        alt="!"
+        class="flex mt-[36px]"
+      />
+      <h1 class="flex mt-4 text-xl font-medium">
+        {{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}
+      </h1>
+      <div class="clauses flex flex-col mt-4 mb-8 px-8">
+        <h2 class="flex leading-[21px]">
+          {{ i18next.t("The") }}&nbsp;<span class="text-[#FF3366]">
+            {{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
+          </span>
+        </h2>
+        <h2 class="flex leading-[21px]">
+          {{ i18next.t("AcctMgmt.DeleteSecondClause") }}
+        </h2>
+      </div>
+    </main>
+    <footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
+      <button
+        id="calcel_delete_acct_btn"
+        class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] bg-[#FF3366] text-[#ffffff]"
+        @click="onNoBtnClick"
+      >
+        {{ i18next.t("No") }}
+      </button>
+      <button
+        id="sure_to_delete_acct_btn"
+        class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] border-2 border-[#FF3366] text-[#FF3366]"
+        @click="onDeleteConfirmBtnClick"
+      >
+        {{ i18next.t("Yes") }}
+      </button>
+    </footer>
+  </div>
 </template>
 
 <script setup>
@@ -38,11 +57,11 @@
  *   modal for account deletion with yes/no buttons.
  */
 
-import { useModalStore } from '@/stores/modal';
-import { useRouter } from 'vue-router';
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
-import i18next from '@/i18n/i18n.js';
-import { useToast } from 'vue-toast-notification';
+import { useModalStore } from "@/stores/modal";
+import { useRouter } from "vue-router";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
+import i18next from "@/i18n/i18n.js";
+import { useToast } from "vue-toast-notification";
 
 const acctMgmtStore = useAcctMgmtStore();
 const modalStore = useModalStore();
@@ -50,17 +69,19 @@ const toast = useToast();
 const router = useRouter();
 
 /** Confirms account deletion, shows success toast, and navigates to account admin page. */
-const onDeleteConfirmBtnClick = async() => {
-    if(await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){
-        toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
-        modalStore.closeModal();
-        acctMgmtStore.setShouldUpdateList(true);
-        await router.push("/account-admin");
-    }
+const onDeleteConfirmBtnClick = async () => {
+  if (
+    await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)
+  ) {
+    toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
+    modalStore.closeModal();
+    acctMgmtStore.setShouldUpdateList(true);
+    await router.push("/account-admin");
+  }
 };
 
 /** Cancels deletion and closes the modal. */
 const onNoBtnClick = () => {
-    modalStore.closeModal();
+  modalStore.closeModal();
 };
 </script>
diff --git a/src/views/AccountManagement/ModalHeader.vue b/src/views/AccountManagement/ModalHeader.vue
index eaf1594..6527f84 100644
--- a/src/views/AccountManagement/ModalHeader.vue
+++ b/src/views/AccountManagement/ModalHeader.vue
@@ -1,14 +1,19 @@
 <template>
-    <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
-        border-b border-b-[1px] border-[#CBD5E1]
-    ">
-        <h1 class="flex text-base font-bold"> {{ headerText }}</h1>
-        <div class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center">
-            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer absolute"
-                @click="closeModal"
-            />
-        </div>
-    </header>
+  <header
+    class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center border-b border-b-[1px] border-[#CBD5E1]"
+  >
+    <h1 class="flex text-base font-bold">{{ headerText }}</h1>
+    <div
+      class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center"
+    >
+      <img
+        src="@/assets/icon-x.svg"
+        alt="X"
+        class="flex cursor-pointer absolute"
+        @click="closeModal"
+      />
+    </div>
+  </header>
 </template>
 
 <script setup>
@@ -22,13 +27,13 @@
  *   header with title text and close button.
  */
 
-import { useModalStore } from '@/stores/modal';
+import { useModalStore } from "@/stores/modal";
 
 defineProps({
-    headerText: {
-        type: String,
-        required: true,
-    }
+  headerText: {
+    type: String,
+    required: true,
+  },
 });
 
 const modalStore = useModalStore();
diff --git a/src/views/AccountManagement/MyAccount.vue b/src/views/AccountManagement/MyAccount.vue
index c6e4298..aeb470d 100644
--- a/src/views/AccountManagement/MyAccount.vue
+++ b/src/views/AccountManagement/MyAccount.vue
@@ -1,117 +1,187 @@
 <template>
-    <div class="general my-account flex flex-col items-center w-full h-full p-8">
-        <main class="flex main-part flex-col px-8 mt-6 w-[720px]">
-            <h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
-                {{ name }}
-            </h1>
-            <div class="general-status-container">
-                <Badge displayText="Admin" :isActivated="is_admin"/>
-                <Badge displayText="Suspended" :isActivated="!is_active"/>
+  <div class="general my-account flex flex-col items-center w-full h-full p-8">
+    <main class="flex main-part flex-col px-8 mt-6 w-[720px]">
+      <h1
+        id="general_acct_info_user_name"
+        class="text-[32px] leading-[64px] font-medium mb-2"
+      >
+        {{ name }}
+      </h1>
+      <div class="general-status-container">
+        <Badge displayText="Admin" :isActivated="is_admin" />
+        <Badge displayText="Suspended" :isActivated="!is_active" />
+      </div>
+      <div
+        id="general_account_visit_info"
+        class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4 w-full"
+      >
+        Total visits
+        <span class="text-[#0099FF]">
+          {{ visitTime }}
+        </span>
+        times.
+      </div>
+    </main>
+    <main class="flex flex-col pt-6 px-8 w-[720px]">
+      <h1 class="text-[20px] font-medium mb-4">
+        {{ i18next.t("AcctMgmt.UserInfo") }}
+      </h1>
+      <div class="row w-full flex py-2 h-[40px] mb-4 items-center">
+        <div class="field-label text-sm flex items-center font-medium mr-4">
+          <span class="align-right-span flex w-[80px]">
+            {{ i18next.t("AcctMgmt.Account") }}
+          </span>
+        </div>
+        <div class="account flex flex-col">
+          <span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
+          <div v-show="false" class="error-wrapper my-2">
+            <div class="error-msg-section flex justify-start">
+              <img
+                src="@/assets/icon-alert.svg"
+                alt="!"
+                class="exclamation-img flex mr-2"
+              />
+              <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+                {{ i18next.t("AcctMgmt.AccountNotUnique") }}
+              </span>
             </div>
-            <div id="general_account_visit_info" class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4
-                w-full">
-                Total visits <span class="text-[#0099FF]">
-                    {{ visitTime }}
-                </span> times.
+          </div>
+        </div>
+      </div>
+      <div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
+        <div class="field-label text-sm flex font-medium mr-4 box-border">
+          <span class="flex w-[80px]">
+            {{ i18next.t("AcctMgmt.FullName") }}
+          </span>
+        </div>
+        <input
+          v-if="isNameEditable"
+          id="input_name_field"
+          class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
+          v-model="inputName"
+          autocomplete="off"
+        />
+        <div v-else class="not-editable displayable name flex w-[280px]">
+          {{ name }}
+        </div>
+        <div
+          v-if="isNameEditable"
+          class="save-btn-container flex ml-[112px]"
+          @click="onSaveNameClick"
+        >
+          <ButtonFilled :buttonText="i18next.t('Global.Save')" />
+        </div>
+        <div
+          v-if="isNameEditable"
+          class="cancel-btn btn-container flex ml-[8px]"
+          @click="onCancelNameClick"
+        >
+          <Button :buttonText="i18next.t('Global.Cancel')" />
+        </div>
+        <div
+          v-else="isPwdEditable"
+          class="edit-btn btn-container flex ml-[204px]"
+          @click="onEditNameClick"
+        >
+          <Button :buttonText="i18next.t('Global.Edit')" />
+        </div>
+      </div>
+      <div
+        class="row w-full flex py-2 mb-4 border-b border-b-[#CBD5E1] border-b-[1px]"
+      >
+        <div class="field-label flex flex-col text-sm font-medium mr-4">
+          <span class="flex h-[40px] w-[80px] items-center">
+            {{ i18next.t("AcctMgmt.Password") }}
+          </span>
+          <div class="flex dummy-cell"></div>
+        </div>
+        <div class="flex input-and-error-msg flex-col w-[280px]">
+          <div
+            v-if="isPwdEditable"
+            class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
+            :class="{
+              'border-[#FF3366]': !isPwdLengthValid,
+              'border-[#64748B]': isPwdLengthValid,
+            }"
+          >
+            <input
+              class="outline-none p-1 w-[280px]"
+              :type="isPwdEyeOn ? 'text' : 'password'"
+              v-model="inputPwd"
+              autocomplete="off"
+              :class="{
+                'color-[#FF3366]': !isPwdLengthValid,
+                'color-[#64748B]': isPwdLengthValid,
+              }"
+            />
+            <img
+              id="eye_button"
+              v-if="isPwdEyeOn"
+              src="@/assets/icon-eye-open.svg"
+              class="absolute right-[8px] cursor-pointer"
+              @mousedown="togglePwdEyeBtn(true)"
+              @mouseup="togglePwdEyeBtn(false)"
+              alt=""
+            />
+            <img
+              v-else
+              src="@/assets/icon-eye-hide.svg"
+              class="absolute right-[8px] cursor-pointer"
+              @mousedown="togglePwdEyeBtn(true)"
+              @mouseup="togglePwdEyeBtn(false)"
+              alt="eye"
+            />
+          </div>
+          <div class="error-msg-section flex justify-start mt-4">
+            <img
+              v-show="!isPwdLengthValid"
+              src="@/assets/icon-alert.svg"
+              alt="!"
+              class="exclamation-img flex mr-2"
+            />
+            <span
+              class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]"
+            >
+              {{
+                isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough")
+              }}
+            </span>
+          </div>
+        </div>
+        <div class="button-and-dummy-column flex flex-col text-[14px]">
+          <div class="button-group flex w-min-[80px] h-[40px]">
+            <div
+              v-if="isPwdEditable"
+              class="save-btn-container flex ml-[112px]"
+              @click="onSavePwdClick"
+            >
+              <ButtonFilled :buttonText="i18next.t('Global.Save')" />
             </div>
-        </main>
-        <main class="flex flex-col pt-6 px-8 w-[720px]">
-            <h1 class="text-[20px] font-medium mb-4">
-                {{ i18next.t("AcctMgmt.UserInfo") }}
-            </h1>
-            <div class="row w-full flex py-2 h-[40px] mb-4 items-center">
-                <div class="field-label text-sm flex items-center font-medium mr-4">
-                    <span class="align-right-span flex w-[80px]">
-                        {{ i18next.t("AcctMgmt.Account") }}
-                    </span>
-                </div>
-                <div class="account flex flex-col">
-                    <span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
-                    <div v-show="false" class="error-wrapper my-2">
-                        <div class="error-msg-section flex justify-start">
-                            <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
-                            <span class="error-msg-text flex text-[#FF3366] h-[24px]">
-                                {{ i18next.t("AcctMgmt.AccountNotUnique") }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
+            <div
+              v-if="isPwdEditable"
+              class="cancel-btn btn-container flex ml-[8px]"
+              @click="onCancelPwdClick"
+            >
+              <Button :buttonText="i18next.t('Global.Cancel')" />
             </div>
-            <div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
-                <div class="field-label text-sm flex font-medium mr-4 box-border">
-                    <span class="flex w-[80px]">
-                        {{ i18next.t("AcctMgmt.FullName") }}
-                    </span>
-                </div>
-                <input v-if='isNameEditable' id="input_name_field"
-                    class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
-                    v-model="inputName"
-                    autocomplete="off"
-                />
-                <div v-else class="not-editable displayable name flex w-[280px]">
-                    {{ name }}
-                </div>
-                <div v-if='isNameEditable' class="save-btn-container flex  ml-[112px]" @click="onSaveNameClick">
-                    <ButtonFilled :buttonText='i18next.t("Global.Save")' />
-                </div>
-                <div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
-                    <Button :buttonText='i18next.t("Global.Cancel")'/>
-                </div>
-                <div v-else='isPwdEditable' class="edit-btn btn-container flex ml-[204px]" @click="onEditNameClick" >
-                    <Button :buttonText='i18next.t("Global.Edit")'/>
-                </div>
-
+            <div
+              v-else
+              class="reset-btn btn-container flex ml-[460px]"
+              @click="onResetPwdClick"
+            >
+              <Button :buttonText="i18next.t('Global.Reset')" />
             </div>
-            <div class="row w-full flex py-2 mb-4  border-b border-b-[#CBD5E1] border-b-[1px]">
-                <div class="field-label flex flex-col text-sm font-medium mr-4">
-                    <span class="flex h-[40px] w-[80px] items-center">
-                        {{ i18next.t("AcctMgmt.Password") }}
-                    </span>
-                    <div class="flex dummy-cell"></div>
-                </div>
-                <div class="flex input-and-error-msg flex-col w-[280px]">
-                    <div v-if='isPwdEditable' class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
-                        :class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
-                    >
-                        <input class="outline-none p-1 w-[280px]" :type="isPwdEyeOn ? 'text' : 'password'"
-                            v-model="inputPwd"
-                            autocomplete="off" :class="{'color-[#FF3366]': !isPwdLengthValid,
-                            'color-[#64748B]': isPwdLengthValid,}"/>
-                        <img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
-                            @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
-                        <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer"
-                            @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt="eye"/>
-                    </div>
-                    <div class="error-msg-section flex justify-start mt-4">
-                        <img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
-                        <span class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]">
-                            {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
-                        </span>
-                    </div>
-                </div>
-                <div class="button-and-dummy-column flex flex-col text-[14px]">
-                    <div class="button-group flex w-min-[80px] h-[40px]">
-                        <div v-if='isPwdEditable' class="save-btn-container flex  ml-[112px]"
-                          @click="onSavePwdClick">
-                            <ButtonFilled :buttonText='i18next.t("Global.Save")' />
-                        </div>
-                        <div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
-                            <Button :buttonText='i18next.t("Global.Cancel")'/>
-                        </div>
-                        <div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
-                            <Button :buttonText='i18next.t("Global.Reset")'/>
-                        </div>
-                    </div>
-                    <div class="flex dummy-cell h-[40px]"></div>
-                </div>
-            </div>
-        </main>
-        <main class="session flex flex-col pt-6 px-8 w-[720px]">
-            <h1 class="text-[20px] font-medium mb-4">
-                {{ i18next.t("AcctMgmt.Session") }}
-            </h1>
-        </main>
-    </div>
+          </div>
+          <div class="flex dummy-cell h-[40px]"></div>
+        </div>
+      </div>
+    </main>
+    <main class="session flex flex-col pt-6 px-8 w-[720px]">
+      <h1 class="text-[20px] font-medium mb-4">
+        {{ i18next.t("AcctMgmt.Session") }}
+      </h1>
+    </main>
+  </div>
 </template>
 
 <script setup>
@@ -125,16 +195,16 @@
  *   viewing and editing the current user's name and password.
  */
 
-import { onMounted, computed, ref } from 'vue';
-import i18next from '@/i18n/i18n.js';
-import { useLoginStore } from '@/stores/login';
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
-import Badge from '../../components/Badge.vue';
-import { useLoadingStore } from '@/stores/loading';
-import Button from '@/components/Button.vue';
-import ButtonFilled from '@/components/ButtonFilled.vue';
-import { useToast } from 'vue-toast-notification';
-import { PWD_VALID_LENGTH } from '@/constants/constants.js';
+import { onMounted, computed, ref } from "vue";
+import i18next from "@/i18n/i18n.js";
+import { useLoginStore } from "@/stores/login";
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
+import Badge from "../../components/Badge.vue";
+import { useLoadingStore } from "@/stores/loading";
+import Button from "@/components/Button.vue";
+import ButtonFilled from "@/components/ButtonFilled.vue";
+import { useToast } from "vue-toast-notification";
+import { PWD_VALID_LENGTH } from "@/constants/constants.js";
 
 const loadingStore = useLoadingStore();
 const loginStore = useLoginStore();
@@ -144,14 +214,10 @@ const toast = useToast();
 const visitTime = ref(0);
 const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
 const name = computed(() => currentViewingUser.value.name);
-const {
-    username,
-    is_admin,
-    is_active,
-} = currentViewingUser.value;
+const { username, is_admin, is_active } = currentViewingUser.value;
 
 const inputName = ref(name.value);
-const inputPwd = ref('');
+const inputPwd = ref("");
 const isNameEditable = ref(false);
 const isPwdEditable = ref(false);
 const isPwdEyeOn = ref(false);
@@ -159,53 +225,53 @@ const isPwdLengthValid = ref(true);
 
 /** Enables the name editing input. */
 const onEditNameClick = () => {
-    isNameEditable.value = true;
+  isNameEditable.value = true;
 };
 
 /** Enables the password editing input. */
 const onResetPwdClick = () => {
-    isPwdEditable.value = true;
+  isPwdEditable.value = true;
 };
 
 /** Validates that the password meets the minimum length requirement. */
 const validatePwdLength = () => {
-    isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
+  isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
 };
 
 /** Saves the edited name to the server and refreshes user data. */
-const onSaveNameClick = async() => {
-    if(inputName.value.length > 0) {
-        await acctMgmtStore.editAccountName(username, inputName.value);
-        await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-        await acctMgmtStore.getUserDetail(username);
-        isNameEditable.value = false;
-        inputName.value = name.value;
-    }
+const onSaveNameClick = async () => {
+  if (inputName.value.length > 0) {
+    await acctMgmtStore.editAccountName(username, inputName.value);
+    await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+    await acctMgmtStore.getUserDetail(username);
+    isNameEditable.value = false;
+    inputName.value = name.value;
+  }
 };
 
 /** Validates and saves the new password. */
-const onSavePwdClick = async() => {
-    validatePwdLength();
-    if (isPwdLengthValid.value) {
-       isPwdEditable.value = false;
-       await acctMgmtStore.editAccountPwd(username, inputPwd.value);
-       await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-       inputPwd.value = '';
-       await acctMgmtStore.getUserDetail(loginStore.userData.username);
-    }
+const onSavePwdClick = async () => {
+  validatePwdLength();
+  if (isPwdLengthValid.value) {
+    isPwdEditable.value = false;
+    await acctMgmtStore.editAccountPwd(username, inputPwd.value);
+    await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+    inputPwd.value = "";
+    await acctMgmtStore.getUserDetail(loginStore.userData.username);
+  }
 };
 
 /** Cancels name editing and restores the original value. */
 const onCancelNameClick = () => {
-    isNameEditable.value = false;
-    inputName.value = name.value;
+  isNameEditable.value = false;
+  inputName.value = name.value;
 };
 
 /** Cancels password editing and clears the input. */
 const onCancelPwdClick = () => {
-    isPwdEditable.value = false;
-    inputPwd.value = '';
-    isPwdLengthValid.value = true;
+  isPwdEditable.value = false;
+  inputPwd.value = "";
+  isPwdLengthValid.value = true;
 };
 
 /**
@@ -213,11 +279,11 @@ const onCancelPwdClick = () => {
  * @param {boolean} toBeOpen - Whether to show the password.
  */
 const togglePwdEyeBtn = (toBeOpen) => {
-    isPwdEyeOn.value = toBeOpen;
+  isPwdEyeOn.value = toBeOpen;
 };
 
-onMounted(async() => {
-    loadingStore.setIsLoading(false);
-    await acctMgmtStore.getUserDetail(loginStore.userData.username);
+onMounted(async () => {
+  loadingStore.setIsLoading(false);
+  await acctMgmtStore.getUserDetail(loginStore.userData.username);
 });
 </script>
diff --git a/src/views/Compare/Dashboard/Compare.vue b/src/views/Compare/Dashboard/Compare.vue
index 82e900f..0d87a9a 100644
--- a/src/views/Compare/Dashboard/Compare.vue
+++ b/src/views/Compare/Dashboard/Compare.vue
@@ -3,99 +3,185 @@
     <div class="h-full relative bg-neutral-50">
       <div class="flex justify-start items-start p-4 h-full">
         <!-- tag -->
-        <aside class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start">
+        <aside
+          class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start"
+        >
           <section class="px-2 space-y-2 w-56 h-full">
             <div>
               <p class="h1">{{ i18next.t("Compare.timeUsage") }}</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
-                <li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}"
-                  @click="handleClick(item.tagId)" class="cursor-pointer hover:text-primary">
+                <li
+                  v-for="(item, index) in timeUsageData"
+                  :key="index"
+                  :class="{ active: isActive === item.tagId }"
+                  @click="handleClick(item.tagId)"
+                  class="cursor-pointer hover:text-primary"
+                >
                   {{ item.label }}
-              </li>
+                </li>
               </ul>
             </div>
             <div>
               <p class="h1">{{ i18next.t("Compare.frequency") }}</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
-                <li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}"
-                  @click="handleClick(item.tagId)" class="cursor-pointer hover:text-primary">
-                    {{ item.label }}
-                  </li>
+                <li
+                  v-for="(item, index) in frequencyData"
+                  :key="index"
+                  :class="{ active: isActive === item.tagId }"
+                  @click="handleClick(item.tagId)"
+                  class="cursor-pointer hover:text-primary"
+                >
+                  {{ item.label }}
+                </li>
               </ul>
             </div>
           </section>
         </aside>
         <!-- graph -->
-        <article class="w-full h-full pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
+        <article
+          class="w-full h-full pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth"
+        >
           <section>
-            <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
-              {{ i18next.t("Compare.schedule") }}
-            </span>
+            <p class="h1 px-4 border-b border-neutral-900">
+              <span class="material-symbols-outlined mr-2 align-middle">
+                {{ i18next.t("Compare.schedule") }}
+              </span>
               {{ i18next.t("Compare.timeUsage") }}
             </p>
             <ul class="list-disc list-inside px-4 pl-7 text-sm">
               <li id="cycleTime" class="scroll-smooth">
-                <span class="inline-block py-4">{{ i18next.t("Compare.cycleEfficiency") }}</span>
+                <span class="inline-block py-4">{{
+                  i18next.t("Compare.cycleEfficiency")
+                }}</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
-                      {{  contentData.avgCycleTime.title }}
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
+                      {{ contentData.avgCycleTime.title }}
                     </span>
-                    <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
+                    <Chart
+                      type="line"
+                      :data="avgCycleTimeData"
+                      :options="avgCycleTimeOptions"
+                      class="h-96"
+                    />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgCycleEfficiency.title }}
-                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
-                        v-tooltip.bottom="tooltip.avgCycleEfficiency">
+                      <span
+                        class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
+                        v-tooltip.bottom="tooltip.avgCycleEfficiency"
+                      >
                         {{ i18next.t("Compare.info") }}
                       </span>
                     </span>
-                    <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
+                    <Chart
+                      type="bar"
+                      :data="avgCycleEfficiencyData"
+                      :options="avgCycleEfficiencyOptions"
+                      class="h-96"
+                    />
                   </li>
                 </ul>
               </li>
               <li id="processingTime">
-                <span class="inline-block py-4 text-sm">{{ i18next.t("Compare.ProcessingTime") }}</span>
+                <span class="inline-block py-4 text-sm">{{
+                  i18next.t("Compare.ProcessingTime")
+                }}</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgProcessTime.title }}
                     </span>
-                    <Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
+                    <Chart
+                      type="line"
+                      :data="avgProcessTimeData"
+                      :options="avgProcessTimeOptions"
+                      class="h-96"
+                    />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgProcessTimeByTask.title }}
                     </span>
-                    <Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions"
+                    <Chart
+                      type="bar"
+                      :data="avgProcessTimeByTaskData"
+                      :options="avgProcessTimeByTaskOptions"
                       class="h-[500px]"
-                      :style="{ height: avgProcessTimeByTaskHeight }"/>
+                      :style="{ height: avgProcessTimeByTaskHeight }"
+                    />
                   </li>
                 </ul>
               </li>
               <li id="waitingTime">
-                <span class="inline-block py-4 text-sm">{{ i18next.t("Compare.WaitingTime") }}</span>
+                <span class="inline-block py-4 text-sm">{{
+                  i18next.t("Compare.WaitingTime")
+                }}</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgWaitingTime.title }}
-                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
-                      v-tooltip.bottom="tooltip.avgWaitingTime">
-                      info
-                    </span></span>
-                    <Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
+                      <span
+                        class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
+                        v-tooltip.bottom="tooltip.avgWaitingTime"
+                      >
+                        info
+                      </span></span
+                    >
+                    <Chart
+                      type="line"
+                      :data="avgWaitingTimeData"
+                      :options="avgWaitingTimeOptions"
+                      class="h-96"
+                    />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgWaitingTimeByEdge.title }}
-                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
-                      v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">{{ i18next.t("Compare.info") }}</span></span>
+                      <span
+                        class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
+                        v-tooltip.bottom="tooltip.avgWaitingTimeByEdge"
+                        >{{ i18next.t("Compare.info") }}</span
+                      ></span
+                    >
                     <div>
-                      <Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData"
-                      :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
+                      <Chart
+                        v-if="avgWaitingTimeByEdgeData !== null"
+                        type="bar"
+                        :data="avgWaitingTimeByEdgeData"
+                        :options="avgWaitingTimeByEdgeOptions"
+                        :style="{ height: avgWaitingTimeByEdgeHeight }"
+                        class="h-[500px]"
+                      />
                       <div v-else class="h-96 bg-neutral-100 m-4 flex">
-                        <p class="h2 text-danger m-auto">{{ i18next.t("Compare.NoWaitingTime") }}</p>
+                        <p class="h2 text-danger m-auto">
+                          {{ i18next.t("Compare.NoWaitingTime") }}
+                        </p>
                       </div>
                     </div>
                   </li>
@@ -104,27 +190,48 @@
             </ul>
           </section>
           <section>
-            <p class="h1 px-4 border-b border-neutral-900 mt-2"><span class="material-symbols-outlined mr-2 align-middle">
-              {{i18next.t("Compare.moving")}}
-            </span>
+            <p class="h1 px-4 border-b border-neutral-900 mt-2">
+              <span class="material-symbols-outlined mr-2 align-middle">
+                {{ i18next.t("Compare.moving") }}
+              </span>
               {{ i18next.t("Compare.frequency") }}
             </p>
             <ul class="list-disc list-inside px-4 pl-7 text-sm">
               <li id="cases">
-                <span class="inline-block py-4">{{ i18next.t("Compare.NumberOfCases") }}</span>
+                <span class="inline-block py-4">{{
+                  i18next.t("Compare.NumberOfCases")
+                }}</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
-                    <FreqChart v-if="compareDashboardData" :chartData="compareDashboardData?.freq?.cases" :content="contentData?.freq" yUnit="count"
-                      pageName='Compare'
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                      >{{ contentData.freq.title }}</span
+                    >
+                    <FreqChart
+                      v-if="compareDashboardData"
+                      :chartData="compareDashboardData?.freq?.cases"
+                      :content="contentData?.freq"
+                      yUnit="count"
+                      pageName="Compare"
                     />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.casesByTask.title }}
                     </span>
-                    <Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :style="{ height: casesByTaskHeight }"
-                    class="h-[500px]"/>
+                    <Chart
+                      type="bar"
+                      :data="casesByTaskData"
+                      :options="casesByTaskOptions"
+                      :style="{ height: casesByTaskHeight }"
+                      class="h-[500px]"
+                    />
                   </li>
                 </ul>
               </li>
@@ -134,11 +241,16 @@
         <!-- Sidebar: State -->
         <div class="bg-transparent z-10">
           <ul class="flex flex-col justify-center items-center">
-            <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9
-            cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
-            :class="{'border-primary': sidebarState}" id="compareState">
-              <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
-              :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+            <li
+              class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
+              @click="sidebarState = !sidebarState"
+              :class="{ 'border-primary': sidebarState }"
+              id="compareState"
+            >
+              <span
+                class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
+                :class="[sidebarState ? 'text-primary' : 'text-neutral-500']"
+              >
                 info
               </span>
             </li>
@@ -160,29 +272,31 @@
  *   charts comparing two datasets.
  */
 
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import moment from 'moment';
-import { useLoadingStore } from '@/stores/loading';
-import { useCompareStore } from '@/stores/compare';
-import SidebarStates from '@/components/Compare/SidebarStates.vue';
-import { setLineChartData } from '@/module/setChartData.js';
-import { simpleTimeLabel, followTimeLabel,
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import moment from "moment";
+import { useLoadingStore } from "@/stores/loading";
+import { useCompareStore } from "@/stores/compare";
+import SidebarStates from "@/components/Compare/SidebarStates.vue";
+import { setLineChartData } from "@/module/setChartData.js";
+import {
+  simpleTimeLabel,
+  followTimeLabel,
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
   getStepSizeOfYTicks,
   getYTicksByIndex,
- } from '@/module/timeLabel.js';
-import i18next from '@/i18n/i18n';
+} from "@/module/timeLabel.js";
+import i18next from "@/i18n/i18n";
 import {
   knownLayoutChartOption,
   knownScaleLineChartOptions,
   knownScaleHorizontalChartOptions,
   knownScaleBarChartOptions,
   GRID_COLOR,
- } from "@/constants/constants.js";
-import FreqChart from '../../Discover/Performance/FreqChart.vue';
+} from "@/constants/constants.js";
+import FreqChart from "../../Discover/Performance/FreqChart.vue";
 
 const route = useRoute();
 
@@ -194,45 +308,69 @@ const { compareDashboardData } = storeToRefs(compareStore);
 
 // Data
 const timeUsageData = [
-  {tagId: '#cycleTime', label: i18next.t("Compare.cycleEfficiency")},
-  {tagId: '#processingTime', label: i18next.t("Compare.ProcessingTime")},
-  {tagId: '#waitingTime', label: i18next.t("Compare.WaitingTime")},
+  { tagId: "#cycleTime", label: i18next.t("Compare.cycleEfficiency") },
+  { tagId: "#processingTime", label: i18next.t("Compare.ProcessingTime") },
+  { tagId: "#waitingTime", label: i18next.t("Compare.WaitingTime") },
 ];
 const frequencyData = [
-  {tagId: '#cases', label: i18next.t("Compare.NumberOfCases")},
+  { tagId: "#cases", label: i18next.t("Compare.NumberOfCases") },
 ];
 const contentData = {
-  avgCycleTime: {title: i18next.t("Compare.avgCycleTimeTitle"), x: i18next.t("Compare.labelDateX"),
-    y: i18next.t("Compare.avgCycleTimeY")},
-  avgCycleEfficiency: {title: i18next.t("Compare.avgCycleEfficiencyTitle"), x: i18next.t("Compare.labelDateX"),
-    y: i18next.t("Compare.avgCycleEfficiencyY")},
-  avgProcessTime: {title: i18next.t("Compare.avgProcessTimeTitle"), x: i18next.t("Compare.labelDateX"),
-    y: i18next.t("Compare.avgProcessTimeY")},
-  avgProcessTimeByTask: {title: i18next.t("Compare.avgProcessTimeByTaskTitle"),
-    x: i18next.t("Compare.avgProcessTimeByTaskX"), y: i18next.t("Compare.labelActivityY")},
-  avgWaitingTime: {title: i18next.t("Compare.avgWaitingTimeTitle"), x: i18next.t("Compare.labelDateX"),
-    y: i18next.t("Compare.avgWaitingTimeY")},
-  avgWaitingTimeByEdge: {title: i18next.t("Compare.avgWaitingTimeByEdgeTitle"),
+  avgCycleTime: {
+    title: i18next.t("Compare.avgCycleTimeTitle"),
+    x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgCycleTimeY"),
+  },
+  avgCycleEfficiency: {
+    title: i18next.t("Compare.avgCycleEfficiencyTitle"),
+    x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgCycleEfficiencyY"),
+  },
+  avgProcessTime: {
+    title: i18next.t("Compare.avgProcessTimeTitle"),
+    x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgProcessTimeY"),
+  },
+  avgProcessTimeByTask: {
+    title: i18next.t("Compare.avgProcessTimeByTaskTitle"),
+    x: i18next.t("Compare.avgProcessTimeByTaskX"),
+    y: i18next.t("Compare.labelActivityY"),
+  },
+  avgWaitingTime: {
+    title: i18next.t("Compare.avgWaitingTimeTitle"),
+    x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgWaitingTimeY"),
+  },
+  avgWaitingTimeByEdge: {
+    title: i18next.t("Compare.avgWaitingTimeByEdgeTitle"),
     x: i18next.t("Compare.avgWaitingTimeByEdgeX"),
-    y: i18next.t("Compare.avgWaitingTimeByEdgeY")},
-  freq: {title: i18next.t("Compare.freqTitle"), x: i18next.t("Compare.labelDateX"), y: i18next.t("Compare.freqY")},
-  casesByTask: {title: i18next.t("Compare.casesByTaskTitle"), x: i18next.t("Compare.casesByTaskX"),
-    y: i18next.t("Compare.labelActivityY")},
+    y: i18next.t("Compare.avgWaitingTimeByEdgeY"),
+  },
+  freq: {
+    title: i18next.t("Compare.freqTitle"),
+    x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.freqY"),
+  },
+  casesByTask: {
+    title: i18next.t("Compare.casesByTaskTitle"),
+    x: i18next.t("Compare.casesByTaskX"),
+    y: i18next.t("Compare.labelActivityY"),
+  },
 };
 const tooltip = {
   avgCycleEfficiency: {
     value: i18next.t("Compare.avgCycleEfficiency"),
-    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    class: "!max-w-[212px] !text-[10px] !opacity-80",
     autoHide: false,
   },
   avgWaitingTime: {
     value: i18next.t("Compare.avgWaitingTime"),
-    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    class: "!max-w-[212px] !text-[10px] !opacity-80",
     autoHide: false,
   },
   avgWaitingTimeByEdge: {
     value: i18next.t("Compare.avgWaitingTimeByEdge"),
-    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    class: "!max-w-[212px] !text-[10px] !opacity-80",
     autoHide: false,
   },
 };
@@ -258,8 +396,8 @@ const horizontalBarHeight = 500;
 const avgProcessTimeByTaskHeight = ref(500);
 const avgWaitingTimeByEdgeHeight = ref(500);
 const casesByTaskHeight = ref(500);
-const colorPrimary = '#0099FF';
-const colorSecondary = '#FFAA44';
+const colorPrimary = "#0099FF";
+const colorSecondary = "#FFAA44";
 const sidebarState = ref(false);
 
 // Methods
@@ -298,7 +436,7 @@ function setXLabelsData(valueData) {
   const numPoints = 12;
   const step = (max - min) / (numPoints - 1);
   const data = [];
-  for(let i = 0; i< numPoints; i++) {
+  for (let i = 0; i < numPoints; i++) {
     const x = min + i * step;
     data.push(x);
   }
@@ -314,11 +452,11 @@ function getHorizontalBarHeight(chartData) {
   const totalBars = chartData.x_axis.labels.length;
   let hBarHeight = horizontalBarHeight;
 
-  if(totalBars > 10){
-    hBarHeight = (totalBars - 10) * 16 * 2 + horizontalBarHeight
-  };
+  if (totalBars > 10) {
+    hBarHeight = (totalBars - 10) * 16 * 2 + horizontalBarHeight;
+  }
 
-  return hBarHeight + 'px'
+  return hBarHeight + "px";
 }
 
 /**
@@ -338,34 +476,51 @@ function getLineChart(chartData, content, yUnit) {
   const labelSecondary = chartData.data[1].label;
   let primeVueSetData = {};
   let primeVueSetOption = {};
-  const getMoment = (time)=> {
-    return moment(time).format('YYYY/M/D hh:mm:ss')
+  const getMoment = (time) => {
+    return moment(time).format("YYYY/M/D hh:mm:ss");
   };
   const getSimpleTimeLabel = simpleTimeLabel;
 
   switch (yUnit) {
-    case 'date':
-      datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
-      chartData.y_axis.max, chartData.y_axis.min);
-      datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false,
-      chartData.y_axis.max, chartData.y_axis.min);
+    case "date":
+      datasetsPrimary = setLineChartData(
+        chartData.data[0].data,
+        chartData.x_axis.max,
+        chartData.x_axis.min,
+        false,
+        chartData.y_axis.max,
+        chartData.y_axis.min,
+      );
+      datasetsSecondary = setLineChartData(
+        chartData.data[1].data,
+        chartData.x_axis.max,
+        chartData.x_axis.min,
+        false,
+        chartData.y_axis.max,
+        chartData.y_axis.min,
+      );
       xLabelData = setXLabelsData(chartData.x_axis);
       break;
-    case 'count':
+    case "count":
       datasetsPrimary = chartData.data[0].data;
       datasetsSecondary = chartData.data[1].data;
-      xLabelData = chartData.data[0].data.map(item => new Date(item.x).getTime());
+      xLabelData = chartData.data[0].data.map((item) =>
+        new Date(item.x).getTime(),
+      );
       break;
   }
 
   const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
   const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xLabelData, formatToSet);
   const customizedScaleOption = getCustomizedScaleOption(
-    knownScaleLineChartOptions, {
+    knownScaleLineChartOptions,
+    {
       customizeOptions: {
-        content, ticksOfXAxis,
-      }
-  });
+        content,
+        ticksOfXAxis,
+      },
+    },
+  );
   primeVueSetData = {
     labels: xLabelData,
     datasets: [
@@ -384,8 +539,8 @@ function getLineChart(chartData, content, yUnit) {
         tension: 0,
         borderColor: colorSecondary,
         pointBackgroundColor: colorSecondary,
-      }
-    ]
+      },
+    ],
   };
   primeVueSetOption = {
     responsive: true,
@@ -395,15 +550,15 @@ function getLineChart(chartData, content, yUnit) {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
-        mode: 'index',
-        titleFont: {weight: 'normal'},
+        mode: "index",
+        titleFont: { weight: "normal" },
         callbacks: {
-          title: function(context) {
+          title: function (context) {
             return `${content.x}: ${getMoment(context[0].parsed.x)}`;
           },
         },
@@ -415,8 +570,8 @@ function getLineChart(chartData, content, yUnit) {
     scales: customizedScaleOption,
   };
   switch (yUnit) {
-    case 'date':
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+    case "date":
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
         const value = getSimpleTimeLabel(context.parsed.y, 2);
 
         switch (context.datasetIndex) {
@@ -428,14 +583,19 @@ function getLineChart(chartData, content, yUnit) {
       };
       primeVueSetOption.scales.x.min = minX;
       primeVueSetOption.scales.x.max = maxX;
-      primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-        const {resultStepSize: YTickStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+      primeVueSetOption.scales.y.ticks.callback = function (
+        value,
+        index,
+        ticks,
+      ) {
+        const { resultStepSize: YTickStepSize, unitToUse } =
+          getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
         return getYTicksByIndex(YTickStepSize, index, unitToUse);
-      }
+      };
       break;
-    case 'count':
+    case "count":
       primeVueSetOption.scales.y.ticks.precision = 0;
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
         const value = context.parsed.y;
 
         switch (context.datasetIndex) {
@@ -459,27 +619,27 @@ function getLineChart(chartData, content, yUnit) {
  * @returns {Array} [chartData, chartOptions] tuple.
  */
 function getBarChart(chartData, content, caller) {
-  const getMoment = (time)=> moment(time).format('YYYY/MM/DD');
+  const getMoment = (time) => moment(time).format("YYYY/MM/DD");
   const labelPrimary = chartData.data[0].label;
   const labelSecondary = chartData.data[1].label;
   let primeVueSetData = {};
   let primeVueSetOption = {};
 
-  const datasetsPrimary = chartData.data[0].data.map(value => {
+  const datasetsPrimary = chartData.data[0].data.map((value) => {
     return {
       x: getMoment(value.x),
-      y: value.y === null ? null : value.y * 100
-    }
+      y: value.y === null ? null : value.y * 100,
+    };
   });
-  const xDataPrimary = datasetsPrimary.map(i => i.x);
-  const yDataPrimary = datasetsPrimary.map(i => i.y);
-  const datasetsSecondary = chartData.data[1].data.map(value => {
+  const xDataPrimary = datasetsPrimary.map((i) => i.x);
+  const yDataPrimary = datasetsPrimary.map((i) => i.y);
+  const datasetsSecondary = chartData.data[1].data.map((value) => {
     return {
       x: getMoment(value.x),
-      y: value.y === null ? null : value.y * 100
-    }
+      y: value.y === null ? null : value.y * 100,
+    };
   });
-  const yDataSecondary = datasetsSecondary.map(i => i.y);
+  const yDataSecondary = datasetsSecondary.map((i) => i.y);
 
   primeVueSetData = {
     labels: xDataPrimary,
@@ -494,7 +654,7 @@ function getBarChart(chartData, content, caller) {
         data: yDataSecondary,
         backgroundColor: colorSecondary,
       },
-    ]
+    ],
   };
   primeVueSetOption = {
     responsive: true,
@@ -502,17 +662,17 @@ function getBarChart(chartData, content, caller) {
     layout: knownLayoutChartOption,
     interaction: {
       intersect: false,
-      mode: 'index',
+      mode: "index",
     },
     plugins: {
       legend: false,
       tooltip: {
-        titleFont: {weight: 'normal'},
+        titleFont: { weight: "normal" },
         callbacks: {
-          title: function(context) {
+          title: function (context) {
             return `${content.x}: ${context[0].label}`;
           },
-          label: function(context) {
+          label: function (context) {
             const value = `${(context.parsed.y * 10).toFixed(2)}%`;
             switch (context.datasetIndex) {
               case 0:
@@ -520,28 +680,31 @@ function getBarChart(chartData, content, caller) {
               case 1:
                 return `${labelSecondary}: ${value}`;
             }
-          }
+          },
         },
       },
       title: {
         display: false,
       },
     },
-    scales: customizeScaleChartOptionTitleByContent(knownScaleBarChartOptions, content),
+    scales: customizeScaleChartOptionTitleByContent(
+      knownScaleBarChartOptions,
+      content,
+    ),
   };
 
   primeVueSetOption.scales = {
     ...primeVueSetOption.scales,
-      x: {
-        ticks: {
-          callback: function(value, index, ticks) {
-            return moment(xDataPrimary[index]).format('YYYY/MM');
-          },
+    x: {
+      ticks: {
+        callback: function (value, index, ticks) {
+          return moment(xDataPrimary[index]).format("YYYY/MM");
         },
+      },
     },
   };
 
-  if(caller === "Cycle Eff") {
+  if (caller === "Cycle Eff") {
     primeVueSetOption.scales.y.reverse = true;
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       return 10 * index;
@@ -554,7 +717,7 @@ function getBarChart(chartData, content, caller) {
     };
   }
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 /**
@@ -578,14 +741,14 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
   const datasetsSecondary = chartData.data[1].data;
   datasetsPrimary.sort((a, b) => b.y - a.y);
   datasetsSecondary.sort((a, b) => {
-      const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
-      const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
-      return indexA - indexB;
+    const indexA = datasetsPrimary.findIndex((item) => item.x === a.x);
+    const indexB = datasetsPrimary.findIndex((item) => item.x === b.x);
+    return indexA - indexB;
   });
 
-  const xLabelData = datasetsPrimary.map(item => item.x);
-  const yDataPrimary = datasetsPrimary.map(item => item.y);
-  const yDataSecondary = datasetsSecondary.map(item => item.y);
+  const xLabelData = datasetsPrimary.map((item) => item.x);
+  const yDataPrimary = datasetsPrimary.map((item) => item.y);
+  const yDataSecondary = datasetsSecondary.map((item) => item.y);
 
   primeVueSetData = {
     labels: xLabelData,
@@ -600,10 +763,10 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
         data: yDataSecondary,
         backgroundColor: colorSecondary,
       },
-    ]
+    ],
   };
   primeVueSetOption = {
-    indexAxis: 'y',
+    indexAxis: "y",
     responsive: true,
     maintainAspectRatio: false,
     layout: {
@@ -611,77 +774,90 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
-        mode: 'index',
-        titleFont: {weight: 'normal'},
-        callbacks: {}
+        mode: "index",
+        titleFont: { weight: "normal" },
+        callbacks: {},
       },
       title: {
         display: false,
       },
     },
-    scales: customizeScaleChartOptionTitleByContent(knownScaleHorizontalChartOptions, null),
+    scales: customizeScaleChartOptionTitleByContent(
+      knownScaleHorizontalChartOptions,
+      null,
+    ),
   };
   switch (xUnit) {
-    case 'date':
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-        const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
-          switch (context.datasetIndex) {
-            case 0:
-              return `${labelPrimary}: ${value}`;
-            case 1:
-              return `${labelSecondary}: ${value}`;
-          }
+    case "date":
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
+        const value =
+          context.parsed.x === null
+            ? "n/a"
+            : getSimpleTimeLabel(context.parsed.x, 2);
+        switch (context.datasetIndex) {
+          case 0:
+            return `${labelPrimary}: ${value}`;
+          case 1:
+            return `${labelSecondary}: ${value}`;
+        }
       };
-      primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
-        return getFollowTimeLabel(value, maxY, 1)
+      primeVueSetOption.scales.x.ticks.callback = function (
+        value,
+        index,
+        ticks,
+      ) {
+        return getFollowTimeLabel(value, maxY, 1);
       };
       break;
-    case 'count':
+    case "count":
     default:
       primeVueSetOption.scales.x.ticks.precision = 0;
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-          const value = context.parsed.x === null ? "n/a" : context.parsed.x;
-          switch (context.datasetIndex) {
-            case 0:
-              return `${labelPrimary}: ${value}`;
-            case 1:
-              return `${labelSecondary}: ${value}`;
-          }
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
+        const value = context.parsed.x === null ? "n/a" : context.parsed.x;
+        switch (context.datasetIndex) {
+          case 0:
+            return `${labelPrimary}: ${value}`;
+          case 1:
+            return `${labelSecondary}: ${value}`;
+        }
       };
       break;
   }
-  if(isSingle) {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+  if (isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
       return `${content.y}: ${context[0].label}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xLabelData[index];
-      if(label) {
-          return label.length > 21 ? `${label.substring(0, 18)}...` : label
-        };
+      if (label) {
+        return label.length > 21 ? `${label.substring(0, 18)}...` : label;
       }
-
-  }else {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+    };
+  } else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
+      return `${content.y}: ${context[0].label.replace(",", " - ")}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xLabelData[index];
       let labelStart = label[0];
       let labelEnd = label[1];
 
-      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-      return labelStart + " - " + labelEnd
+      labelStart =
+        labelStart.length > 10
+          ? `${labelStart.substring(0, 7)}...`
+          : labelStart;
+      labelEnd =
+        labelEnd.length > 10 ? `${labelEnd.substring(0, 7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd;
     };
   }
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 /**
@@ -690,13 +866,15 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
  * @param {object} options - Options containing content and ticksOfXAxis.
  * @returns {object} The customized scale options.
  */
-function getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
-      content,
-      ticksOfXAxis,
-    },
-  }) {
+function getCustomizedScaleOption(
+  whichScaleObj,
+  { customizeOptions: { content, ticksOfXAxis } },
+) {
   let resultScaleObj;
-  resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
+  resultScaleObj = customizeScaleChartOptionTitleByContent(
+    whichScaleObj,
+    content,
+  );
   resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
   return resultScaleObj;
 }
@@ -707,28 +885,28 @@ function getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
  * @param {object} content - Object with x and y axis title text.
  * @returns {object} The scale options with updated titles.
  */
-function customizeScaleChartOptionTitleByContent(whichScaleObj, content){
+function customizeScaleChartOptionTitleByContent(whichScaleObj, content) {
   if (!content) {
     return whichScaleObj;
   }
 
   return {
     ...whichScaleObj,
-      x: {
-        ...whichScaleObj.x,
-        title: {
-          ...whichScaleObj.x.title,
-          text: content.x
-        }
+    x: {
+      ...whichScaleObj.x,
+      title: {
+        ...whichScaleObj.x.title,
+        text: content.x,
       },
-      y: {
-        ...whichScaleObj.y,
-        title: {
-          ...whichScaleObj.y.title,
-          text: content.y
-        }
-      }
-    };
+    },
+    y: {
+      ...whichScaleObj.y,
+      title: {
+        ...whichScaleObj.y.title,
+        text: content.y,
+      },
+    },
+  };
 }
 
 /**
@@ -742,13 +920,13 @@ function customizeScaleChartOptionTicks(scaleObjectToAlter, ticksOfXAxis) {
     ...scaleObjectToAlter,
     x: {
       ...scaleObjectToAlter.x,
-        ticks: {
-          ...scaleObjectToAlter.x.ticks,
-            callback: function(value, index) {
-              return ticksOfXAxis[index];
-            },
+      ticks: {
+        ...scaleObjectToAlter.x.ticks,
+        callback: function (value, index) {
+          return ticksOfXAxis[index];
         },
       },
+    },
   };
 }
 
@@ -769,23 +947,37 @@ function getLineChart0(chartData, content, yUnit) {
   const labelSecondary = chartData.data[1].label;
   let primeVueSetData = {};
   let primeVueSetOption = {};
-  const getMoment = (time)=> {
-    return moment(time).format('YYYY/M/D hh:mm:ss')
+  const getMoment = (time) => {
+    return moment(time).format("YYYY/M/D hh:mm:ss");
   };
   const getSimpleTimeLabel = simpleTimeLabel;
 
   switch (yUnit) {
-    case 'date':
-      datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
-      chartData.y_axis.max, chartData.y_axis.min);
-      datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false,
-      chartData.y_axis.max, chartData.y_axis.min);
+    case "date":
+      datasetsPrimary = setLineChartData(
+        chartData.data[0].data,
+        chartData.x_axis.max,
+        chartData.x_axis.min,
+        false,
+        chartData.y_axis.max,
+        chartData.y_axis.min,
+      );
+      datasetsSecondary = setLineChartData(
+        chartData.data[1].data,
+        chartData.x_axis.max,
+        chartData.x_axis.min,
+        false,
+        chartData.y_axis.max,
+        chartData.y_axis.min,
+      );
       xLabelData = setXLabelsData(chartData.x_axis);
       break;
-    case 'count':
+    case "count":
       datasetsPrimary = chartData.data[0].data;
       datasetsSecondary = chartData.data[1].data;
-      xLabelData = chartData.data[0].data.map(item => new Date(item.x).getTime());
+      xLabelData = chartData.data[0].data.map((item) =>
+        new Date(item.x).getTime(),
+      );
       break;
   }
 
@@ -810,8 +1002,8 @@ function getLineChart0(chartData, content, yUnit) {
         tension: 0,
         borderColor: colorSecondary,
         pointBackgroundColor: colorSecondary,
-      }
-    ]
+      },
+    ],
   };
   primeVueSetOption = {
     responsive: true,
@@ -821,18 +1013,18 @@ function getLineChart0(chartData, content, yUnit) {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
-        mode: 'index',
-        titleFont: {weight: 'normal'},
+        mode: "index",
+        titleFont: { weight: "normal" },
         callbacks: {
-          title: function(context) {
+          title: function (context) {
             return `${content.x}: ${getMoment(context[0].parsed.x)}`;
           },
-          label:function(context) {
+          label: function (context) {
             return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
           },
         },
@@ -841,70 +1033,72 @@ function getLineChart0(chartData, content, yUnit) {
         display: false,
       },
     },
-    scales:  {
+    scales: {
       x: {
         min: minX,
         max: maxX,
-        type: 'time',
+        type: "time",
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
           text: content.x,
         },
         time: {
           displayFormats: {
-            second: 'h:mm:ss',
-            minute: 'M/d h:mm',
-            hour: 'M/d h:mm',
-            day: 'M/d h',
-            month: 'y/M/d',
+            second: "h:mm:ss",
+            minute: "M/d h:mm",
+            hour: "M/d h:mm",
+            day: "M/d h",
+            month: "y/M/d",
           },
-          round: true
+          round: true,
         },
         ticks: {
           padding: 8,
           display: true,
           maxRotation: 0,
-          color: '#64748b',
-          source: 'labels',
-          callback: function(value, index) {
+          color: "#64748b",
+          source: "labels",
+          callback: function (value, index) {
             return ticksOfXAxis[index];
           },
         },
         border: {
-          color: '#64748b',
+          color: "#64748b",
         },
       },
       y: {
         beginAtZero: true,
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
-          text: content.y
+          text: content.y,
         },
         grid: {
-          color: '#64748b',
+          color: "#64748b",
         },
         border: {
           display: false,
         },
         ticks: {
-
-          color: '#64748b',
+          color: "#64748b",
           padding: 8,
           callback: function (value, index, ticks) {
-            const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+            const { resultStepSize, unitToUse } = getStepSizeOfYTicks(
+              ticks[ticks.length - 1].value,
+              ticks.length,
+            );
             return getYTicksByIndex(resultStepSize, index, unitToUse);
           },
-        }
+        },
       },
     },
   };
@@ -920,7 +1114,12 @@ function getLineChart0(chartData, content, yUnit) {
  * @param {string} [xUnit='count'] - The x-axis unit.
  * @returns {Array} [chartData, chartOptions] tuple.
  */
-function getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = 'count') {
+function getCaseByTaskHorizontalBarChart(
+  chartData,
+  content,
+  isSingle,
+  xUnit = "count",
+) {
   const labelPrimary = chartData.data[0].label;
   const labelSecondary = chartData.data[1].label;
   let primeVueSetData = {};
@@ -930,14 +1129,14 @@ function getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = '
   const datasetsSecondary = chartData.data[1].data;
   datasetsPrimary.sort((a, b) => b.y - a.y);
   datasetsSecondary.sort((a, b) => {
-      const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
-      const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
-      return indexA - indexB;
+    const indexA = datasetsPrimary.findIndex((item) => item.x === a.x);
+    const indexB = datasetsPrimary.findIndex((item) => item.x === b.x);
+    return indexA - indexB;
   });
 
-  const xLabelData = datasetsPrimary.map(item => item.x);
-  const yDataPrimary = datasetsPrimary.map(item => item.y);
-  const yDataSecondary = datasetsSecondary.map(item => item.y);
+  const xLabelData = datasetsPrimary.map((item) => item.x);
+  const yDataPrimary = datasetsPrimary.map((item) => item.y);
+  const yDataSecondary = datasetsSecondary.map((item) => item.y);
 
   primeVueSetData = {
     labels: xLabelData,
@@ -952,10 +1151,10 @@ function getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = '
         data: yDataSecondary,
         backgroundColor: colorSecondary,
       },
-    ]
+    ],
   };
   primeVueSetOption = {
-    indexAxis: 'y',
+    indexAxis: "y",
     responsive: true,
     maintainAspectRatio: false,
     layout: {
@@ -963,14 +1162,14 @@ function getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = '
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
-        mode: 'index',
-        titleFont: {weight: 'normal'},
-        callbacks: {}
+        mode: "index",
+        titleFont: { weight: "normal" },
+        callbacks: {},
       },
       title: {
         display: false,
@@ -978,100 +1177,103 @@ function getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = '
     },
     scales: {
       x: {
-          title: {
-            display: true,
-            color: '#334155',
-            font: {
-                size: 12,
-                lineHeight: 2
-            },
-            text: content.x,
+        title: {
+          display: true,
+          color: "#334155",
+          font: {
+            size: 12,
+            lineHeight: 2,
           },
-          ticks: {
-            display: true,
-            maxRotation: 0,
-            color: '#64748b',
-            callback: function(value, index, ticks) {
-              return value;
-            }
-            },
-          grid: {
-          color: '#64748b',
+          text: content.x,
+        },
+        ticks: {
+          display: true,
+          maxRotation: 0,
+          color: "#64748b",
+          callback: function (value, index, ticks) {
+            return value;
+          },
+        },
+        grid: {
+          color: "#64748b",
           tickLength: 0,
-          },
-          border: {
-          display:false,
-          },
+        },
+        border: {
+          display: false,
+        },
       },
       y: {
-          beginAtZero: true,
-          type: 'category',
-          title: {
-            display: true,
-            color: '#334155',
-            font: {
-                size: 12,
-                lineHeight: 2
-            },
-            text: content.y,
+        beginAtZero: true,
+        type: "category",
+        title: {
+          display: true,
+          color: "#334155",
+          font: {
+            size: 12,
+            lineHeight: 2,
           },
-          ticks:{
-          color: '#64748b',
+          text: content.y,
+        },
+        ticks: {
+          color: "#64748b",
           padding: 8,
-          },
-          grid: {
-          display:false,
-          color: '#64748b',
-          },
-          border: {
+        },
+        grid: {
           display: false,
-          },
-      },
+          color: "#64748b",
+        },
+        border: {
+          display: false,
+        },
       },
+    },
   };
   switch (xUnit) {
-    case 'dummy':
-    case 'count':
+    case "dummy":
+    case "count":
     default:
       primeVueSetOption.scales.x.ticks.precision = 0;
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
         const value = context.parsed.x === null ? "n/a" : context.parsed.x;
-          switch (context.datasetIndex) {
-            case 0:
-              return `${labelPrimary}: ${value}`;
-            case 1:
-              return `${labelSecondary}: ${value}`;
-          }
+        switch (context.datasetIndex) {
+          case 0:
+            return `${labelPrimary}: ${value}`;
+          case 1:
+            return `${labelSecondary}: ${value}`;
+        }
       };
       break;
   }
-  if(isSingle) {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+  if (isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
       return `${content.y}: ${context[0].label}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xLabelData[index];
-      if(label) {
-          return label.length > 21 ? `${label.substring(0, 18)}...` : label
-        };
+      if (label) {
+        return label.length > 21 ? `${label.substring(0, 18)}...` : label;
       }
-
-  }else {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+    };
+  } else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
+      return `${content.y}: ${context[0].label.replace(",", " - ")}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xLabelData[index];
       let labelStart = label[0];
       let labelEnd = label[1];
 
-      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-      return labelStart + " - " + labelEnd
+      labelStart =
+        labelStart.length > 10
+          ? `${labelStart.substring(0, 7)}...`
+          : labelStart;
+      labelEnd =
+        labelEnd.length > 10 ? `${labelEnd.substring(0, 7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd;
     };
   }
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 /**
@@ -1082,7 +1284,12 @@ function getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = '
  * @param {string} [xUnit='date'] - The x-axis unit.
  * @returns {Array} [chartData, chartOptions] tuple.
  */
-function getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit="date") {
+function getAvgProcessTimeHorizontalBarChart(
+  chartData,
+  content,
+  isSingle,
+  xUnit = "date",
+) {
   const maxY = chartData.y_axis.max;
   const getSimpleTimeLabel = simpleTimeLabel;
   const getFollowTimeLabel = followTimeLabel;
@@ -1095,14 +1302,14 @@ function getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit
   const datasetsSecondary = chartData.data[1].data;
   datasetsPrimary.sort((a, b) => b.y - a.y);
   datasetsSecondary.sort((a, b) => {
-      const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
-      const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
-      return indexA - indexB;
+    const indexA = datasetsPrimary.findIndex((item) => item.x === a.x);
+    const indexB = datasetsPrimary.findIndex((item) => item.x === b.x);
+    return indexA - indexB;
   });
 
-  const xLabelData = datasetsPrimary.map(item => item.x);
-  const yDataPrimary = datasetsPrimary.map(item => item.y);
-  const yDataSecondary = datasetsSecondary.map(item => item.y);
+  const xLabelData = datasetsPrimary.map((item) => item.x);
+  const yDataPrimary = datasetsPrimary.map((item) => item.y);
+  const yDataSecondary = datasetsSecondary.map((item) => item.y);
 
   primeVueSetData = {
     labels: xLabelData,
@@ -1117,10 +1324,10 @@ function getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit
         data: yDataSecondary,
         backgroundColor: colorSecondary,
       },
-    ]
+    ],
   };
   primeVueSetOption = {
-    indexAxis: 'y',
+    indexAxis: "y",
     responsive: true,
     maintainAspectRatio: false,
     layout: {
@@ -1128,114 +1335,124 @@ function getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
-        mode: 'index',
-        titleFont: {weight: 'normal'},
-        callbacks: {}
+        mode: "index",
+        titleFont: { weight: "normal" },
+        callbacks: {},
       },
       title: {
         display: false,
       },
     },
     scales: {
-    x: {
+      x: {
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
-              size: 12,
-              lineHeight: 2
+            size: 12,
+            lineHeight: 2,
           },
           text: content.x,
         },
         ticks: {
-        display: true,
-        maxRotation: 0,
-        color: '#64748b',
+          display: true,
+          maxRotation: 0,
+          color: "#64748b",
         },
         grid: {
-        color: '#64748b',
-        tickLength: 0,
+          color: "#64748b",
+          tickLength: 0,
         },
         border: {
-        display:false,
+          display: false,
         },
-    },
-    y: {
+      },
+      y: {
         beginAtZero: true,
-        type: 'category',
+        type: "category",
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
-              size: 12,
-              lineHeight: 2
+            size: 12,
+            lineHeight: 2,
           },
-          text: content.y
+          text: content.y,
         },
-        ticks:{
-        color: '#64748b',
-        padding: 8,
+        ticks: {
+          color: "#64748b",
+          padding: 8,
         },
         grid: {
-        display:false,
-        color: '#64748b',
+          display: false,
+          color: "#64748b",
         },
         border: {
-        display: false,
+          display: false,
         },
       },
     },
   };
   switch (xUnit) {
-    case 'dummy':
-    case 'date':
+    case "dummy":
+    case "date":
     default:
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-        const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
-          switch (context.datasetIndex) {
-            case 0:
-              return `${labelPrimary}: ${value}`;
-            case 1:
-              return `${labelSecondary}: ${value}`;
-          }
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
+        const value =
+          context.parsed.x === null
+            ? "n/a"
+            : getSimpleTimeLabel(context.parsed.x, 2);
+        switch (context.datasetIndex) {
+          case 0:
+            return `${labelPrimary}: ${value}`;
+          case 1:
+            return `${labelSecondary}: ${value}`;
+        }
       };
-      primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
-        return getFollowTimeLabel(value, maxY, 1)
+      primeVueSetOption.scales.x.ticks.callback = function (
+        value,
+        index,
+        ticks,
+      ) {
+        return getFollowTimeLabel(value, maxY, 1);
       };
       break;
   }
-  if(isSingle) {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+  if (isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
       return `${content.y}: ${context[0].label}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xLabelData[index];
-      if(label) {
-          return label.length > 21 ? `${label.substring(0, 18)}...` : label
-        };
+      if (label) {
+        return label.length > 21 ? `${label.substring(0, 18)}...` : label;
       }
-
-  }else {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+    };
+  } else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
+      return `${content.y}: ${context[0].label.replace(",", " - ")}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xLabelData[index];
       let labelStart = label[0];
       let labelEnd = label[1];
 
-      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-      return labelStart + " - " + labelEnd
+      labelStart =
+        labelStart.length > 10
+          ? `${labelStart.substring(0, 7)}...`
+          : labelStart;
+      labelEnd =
+        labelEnd.length > 10 ? `${labelEnd.substring(0, 7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd;
     };
   }
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 // Created logic
@@ -1248,48 +1465,86 @@ function getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit
     const primaryId = routeParams.primaryId;
     const secondaryId = routeParams.secondaryId;
     const typeMap = {
-      'log': 'log_id',
-      'filter': 'filter_id'
+      log: "log_id",
+      filter: "filter_id",
     };
     const primaryTypeParam = typeMap[primaryType];
     const secondaryTypeParam = typeMap[secondaryType];
     const queryParams = [
       { [primaryTypeParam]: primaryId },
-      { [secondaryTypeParam]: secondaryId }
+      { [secondaryTypeParam]: secondaryId },
     ];
 
     // Fetch Compare Data
     await compareStore.getCompare(queryParams);
-    avgProcessTimeByTaskHeight.value = getHorizontalBarHeight(compareDashboardData.value.time.avg_process_time_by_task);
-    if(compareDashboardData.value.time.avg_waiting_time_by_edge !== null) {
-      avgWaitingTimeByEdgeHeight.value = getHorizontalBarHeight(compareDashboardData.value.time.avg_waiting_time_by_edge);
-    };
-    casesByTaskHeight.value = getHorizontalBarHeight(compareDashboardData.value.freq.cases_by_task);
+    avgProcessTimeByTaskHeight.value = getHorizontalBarHeight(
+      compareDashboardData.value.time.avg_process_time_by_task,
+    );
+    if (compareDashboardData.value.time.avg_waiting_time_by_edge !== null) {
+      avgWaitingTimeByEdgeHeight.value = getHorizontalBarHeight(
+        compareDashboardData.value.time.avg_waiting_time_by_edge,
+      );
+    }
+    casesByTaskHeight.value = getHorizontalBarHeight(
+      compareDashboardData.value.freq.cases_by_task,
+    );
     // create chart
     [avgCycleTimeData.value, avgCycleTimeOptions.value] = getLineChart(
-      compareDashboardData.value.time.avg_cycle_time, contentData.avgCycleTime, 'date');
-    [avgCycleEfficiencyData.value, avgCycleEfficiencyOptions.value] = getBarChart(
-      compareDashboardData.value.time.avg_cycle_efficiency, contentData.avgCycleEfficiency, "Cycle Eff");
+      compareDashboardData.value.time.avg_cycle_time,
+      contentData.avgCycleTime,
+      "date",
+    );
+    [avgCycleEfficiencyData.value, avgCycleEfficiencyOptions.value] =
+      getBarChart(
+        compareDashboardData.value.time.avg_cycle_efficiency,
+        contentData.avgCycleEfficiency,
+        "Cycle Eff",
+      );
     [avgProcessTimeData.value, avgProcessTimeOptions.value] = getLineChart(
-      compareDashboardData.value.time.avg_process_time, contentData.avgProcessTime, 'date');
-    [avgProcessTimeByTaskData.value, avgProcessTimeByTaskOptions.value] = getAvgProcessTimeHorizontalBarChart(
-      compareDashboardData.value.time.avg_process_time_by_task,
-      contentData.avgProcessTimeByTask, true, 'date');
+      compareDashboardData.value.time.avg_process_time,
+      contentData.avgProcessTime,
+      "date",
+    );
+    [avgProcessTimeByTaskData.value, avgProcessTimeByTaskOptions.value] =
+      getAvgProcessTimeHorizontalBarChart(
+        compareDashboardData.value.time.avg_process_time_by_task,
+        contentData.avgProcessTimeByTask,
+        true,
+        "date",
+      );
     [avgWaitingTimeData.value, avgWaitingTimeOptions.value] = getLineChart(
-      compareDashboardData.value.time.avg_waiting_time, contentData.avgWaitingTime, 'date');
-    if(compareDashboardData.value.time.avg_waiting_time_by_edge !== null) {
-      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = getHorizontalBarChart(
-        compareDashboardData.value.time.avg_waiting_time_by_edge,
-        contentData.avgWaitingTimeByEdge, false, 'date');
+      compareDashboardData.value.time.avg_waiting_time,
+      contentData.avgWaitingTime,
+      "date",
+    );
+    if (compareDashboardData.value.time.avg_waiting_time_by_edge !== null) {
+      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] =
+        getHorizontalBarChart(
+          compareDashboardData.value.time.avg_waiting_time_by_edge,
+          contentData.avgWaitingTimeByEdge,
+          false,
+          "date",
+        );
     } else {
-      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = [null, null]
+      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = [
+        null,
+        null,
+      ];
     }
     [freqData.value, freqOptions.value] = getLineChart(
-      compareDashboardData.value.freq.cases, contentData.freq, 'count');
-    [casesByTaskData.value, casesByTaskOptions.value] = getCaseByTaskHorizontalBarChart(
-      compareDashboardData.value.freq.cases_by_task, contentData.casesByTask, true, 'count');
+      compareDashboardData.value.freq.cases,
+      contentData.freq,
+      "count",
+    );
+    [casesByTaskData.value, casesByTaskOptions.value] =
+      getCaseByTaskHorizontalBarChart(
+        compareDashboardData.value.freq.cases_by_task,
+        contentData.casesByTask,
+        true,
+        "count",
+      );
   } catch (error) {
-    console.error('Failed to initialize compare dashboard:', error);
+    console.error("Failed to initialize compare dashboard:", error);
   }
 })();
 
@@ -1301,6 +1556,6 @@ onMounted(() => {
 <style scoped>
 @reference "../../../assets/tailwind.css";
 .active {
-  @apply text-primary
+  @apply text-primary;
 }
 </style>
diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index a3aa323..88da852 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/src/views/Discover/Map/Map.vue
@@ -1,22 +1,47 @@
 <template>
   <!-- Sidebar: Switch data type -->
-  <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-50':''">
+  <div
+    class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
+    :class="sidebarLeftValue ? 'bg-neutral-50' : ''"
+  >
     <ul class="space-y-4 flex flex-col justify-center items-center">
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
-        hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}" v-tooltip="tooltip.sidebarView">
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
+      <li
+        class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
+        @click="sidebarView = !sidebarView"
+        :class="{ 'border-primary': sidebarView }"
+        v-tooltip="tooltip.sidebarView"
+      >
+        <span
+          class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarView ? 'text-primary' : 'text-neutral-500']"
+        >
           track_changes
         </span>
       </li>
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
-        hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}" v-tooltip="tooltip.sidebarFilter">
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
+      <li
+        class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
+        @click="sidebarFilter = !sidebarFilter"
+        :class="{ 'border-primary': sidebarFilter }"
+        v-tooltip="tooltip.sidebarFilter"
+      >
+        <span
+          class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']"
+          id="iconFilter"
+        >
           tornado
         </span>
       </li>
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50
-        drop-shadow hover:border-primary"  @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}" v-tooltip="tooltip.sidebarTraces">
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
+      <li
+        class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
+        @click="sidebarTraces = !sidebarTraces"
+        :class="{ 'border-primary': sidebarTraces }"
+        v-tooltip="tooltip.sidebarTraces"
+      >
+        <span
+          class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']"
+        >
           rebase
         </span>
       </li>
@@ -29,13 +54,22 @@
   </div>
 
   <!-- Sidebar: State -->
-  <div id='sidebar_state' class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
+  <div
+    id="sidebar_state"
+    class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute"
+  >
     <ul class="flex flex-col justify-center items-center">
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer
-        bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
-        :class="{'border-primary': sidebarState}" id="iconState" v-tooltip.left="tooltip.sidebarState">
-        <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
-          :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+      <li
+        class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
+        @click="sidebarState = !sidebarState"
+        :class="{ 'border-primary': sidebarState }"
+        id="iconState"
+        v-tooltip.left="tooltip.sidebarState"
+      >
+        <span
+          class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
+          :class="[sidebarState ? 'text-primary' : 'text-neutral-500']"
+        >
           info
         </span>
       </li>
@@ -43,13 +77,35 @@
   </div>
 
   <!-- Sidebar Model -->
-  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank"
-    @switch-data-layer-type="switchDataLayerType" ></SidebarView>
-  <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
-  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesViewRef"></SidebarTraces>
-  <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
-    :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
-  @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRefComp"></SidebarFilter>
+  <SidebarView
+    v-model:visible="sidebarView"
+    @switch-map-type="switchMapType"
+    @switch-curve-styles="switchCurveStyles"
+    @switch-rank="switchRank"
+    @switch-data-layer-type="switchDataLayerType"
+  ></SidebarView>
+  <SidebarState
+    v-model:visible="sidebarState"
+    :insights="insights"
+    :stats="stats"
+  ></SidebarState>
+  <SidebarTraces
+    v-model:visible="sidebarTraces"
+    :cases="cases"
+    @switch-Trace-Id="switchTraceId"
+    ref="tracesViewRef"
+  ></SidebarTraces>
+  <SidebarFilter
+    v-model:visible="sidebarFilter"
+    :filterTasks="filterTasks"
+    :filterStartToEnd="filterStartToEnd"
+    :filterEndToStart="filterEndToStart"
+    :filterTimeframe="filterTimeframe"
+    :filterTrace="filterTrace"
+    @submit-all="createCy(mapType)"
+    @switch-Trace-Id="switchTraceId"
+    ref="sidebarFilterRefComp"
+  ></SidebarFilter>
 </template>
 
 <script>
@@ -64,19 +120,19 @@
  *   statistics.
  */
 
-import { useConformanceStore } from '@/stores/conformance';
+import { useConformanceStore } from "@/stores/conformance";
 
 export default {
   async beforeRouteEnter(to, from, next) {
-    const isCheckPage = to.name.includes('Check');
+    const isCheckPage = to.name.includes("Check");
 
     if (isCheckPage) {
       const conformanceStore = useConformanceStore();
       switch (to.params.type) {
-        case 'log':
+        case "log":
           conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
           break;
-        case 'filter':
+        case "filter":
           conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
           break;
       }
@@ -84,32 +140,32 @@ export default {
       to.meta.file = conformanceStore.routeFile;
     }
     next();
-  }
-}
+  },
+};
 </script>
 
 <script setup>
-import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import cytoscapeMap from '@/module/cytoscapeMap.js';
-import { useCytoscapeStore } from '@/stores/cytoscapeStore';
-import { useMapPathStore } from '@/stores/mapPathStore';
-import emitter from '@/utils/emitter';
-import SidebarView from '@/components/Discover/Map/SidebarView.vue';
-import SidebarState from '@/components/Discover/Map/SidebarState.vue';
-import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
-import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
-import ImgCapsule1 from '@/assets/capsule1.svg';
-import ImgCapsule2 from '@/assets/capsule2.svg';
-import ImgCapsule3 from '@/assets/capsule3.svg';
-import ImgCapsule4 from '@/assets/capsule4.svg';
+import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from "vue";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useLoadingStore } from "@/stores/loading";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import cytoscapeMap from "@/module/cytoscapeMap.js";
+import { useCytoscapeStore } from "@/stores/cytoscapeStore";
+import { useMapPathStore } from "@/stores/mapPathStore";
+import emitter from "@/utils/emitter";
+import SidebarView from "@/components/Discover/Map/SidebarView.vue";
+import SidebarState from "@/components/Discover/Map/SidebarState.vue";
+import SidebarTraces from "@/components/Discover/Map/SidebarTraces.vue";
+import SidebarFilter from "@/components/Discover/Map/SidebarFilter.vue";
+import ImgCapsule1 from "@/assets/capsule1.svg";
+import ImgCapsule2 from "@/assets/capsule2.svg";
+import ImgCapsule3 from "@/assets/capsule3.svg";
+import ImgCapsule4 from "@/assets/capsule4.svg";
 
 const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
 
-const props = defineProps(['type', 'checkType', 'checkId', 'checkFileId']);
+const props = defineProps(["type", "checkType", "checkId", "checkFileId"]);
 
 const route = useRoute();
 
@@ -117,10 +173,28 @@ const route = useRoute();
 const loadingStore = useLoadingStore();
 const allMapDataStore = useAllMapDataStore();
 const { isLoading } = storeToRefs(loadingStore);
-const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
-  filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
-  temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
-  postRuleData
+const {
+  processMap,
+  bpmn,
+  stats,
+  insights,
+  traceId,
+  traces,
+  baseTraces,
+  baseTraceId,
+  filterTasks,
+  filterStartToEnd,
+  filterEndToStart,
+  filterTimeframe,
+  filterTrace,
+  temporaryData,
+  isRuleData,
+  ruleData,
+  logId,
+  baseLogId,
+  createFilterId,
+  cases,
+  postRuleData,
 } = storeToRefs(allMapDataStore);
 
 const cytoscapeStore = useCytoscapeStore();
@@ -129,14 +203,14 @@ const mapPathStore = useMapPathStore();
 
 const numberBeforeMapInRoute = computed(() => {
   const path = route.path;
-  const segments = path.split('/');
-  const mapIndex = segments.findIndex(segment => segment.includes('map'));
+  const segments = path.split("/");
+  const mapIndex = segments.findIndex((segment) => segment.includes("map"));
   if (mapIndex > 0) {
     const previousSegment = segments[mapIndex - 1];
     const match = previousSegment.match(/\d+/);
-    return match ? match[0] : 'No number found';
+    return match ? match[0] : "No number found";
   }
-  return 'No map segment found';
+  return "No map segment found";
 });
 
 onBeforeMount(() => {
@@ -157,11 +231,11 @@ const bpmnData = ref({
   edges: [],
 });
 const cytoscapeGraph = ref(null);
-const curveStyle = ref('unbundled-bezier');
-const mapType = ref('processMap');
-const dataLayerType = ref('freq');
-const dataLayerOption = ref('total');
-const rank = ref('LR');
+const curveStyle = ref("unbundled-bezier");
+const mapType = ref("processMap");
+const dataLayerType = ref("freq");
+const dataLayerOption = ref("total");
+const rank = ref("LR");
 const localTraceId = ref(1);
 const sidebarView = ref(false);
 const sidebarState = ref(false);
@@ -173,50 +247,54 @@ const sidebarFilterRefComp = ref(null);
 
 const tooltip = {
   sidebarView: {
-    value: 'Visualization Setting',
-    class: 'ml-1',
+    value: "Visualization Setting",
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
-    }
+      text: "text-[10px] p-1",
+    },
   },
   sidebarTraces: {
-    value: 'Trace',
-    class: 'ml-1',
+    value: "Trace",
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
-    }
+      text: "text-[10px] p-1",
+    },
   },
   sidebarFilter: {
-    value: 'Filter',
-    class: 'ml-1',
+    value: "Filter",
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
-    }
+      text: "text-[10px] p-1",
+    },
   },
   sidebarState: {
-    value: 'Summary',
-    class: 'ml-1',
+    value: "Summary",
+    class: "ml-1",
     pt: {
-      text: 'text-[10px] p-1'
-    }
+      text: "text-[10px] p-1",
+    },
   },
 };
 
 // Computed
 const sidebarLeftValue = computed(() => {
-  return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
+  return (
+    sidebarView.value === true ||
+    sidebarTraces.value === true ||
+    sidebarFilter.value === true
+  );
 });
 
 // Watch
 watch(sidebarView, (newValue) => {
-  if(newValue) {
+  if (newValue) {
     sidebarFilter.value = false;
     sidebarTraces.value = false;
   }
 });
 
 watch(sidebarFilter, (newValue) => {
-  if(newValue) {
+  if (newValue) {
     sidebarView.value = false;
     sidebarState.value = false;
     sidebarTraces.value = false;
@@ -225,7 +303,7 @@ watch(sidebarFilter, (newValue) => {
 });
 
 watch(sidebarTraces, (newValue) => {
-  if(newValue) {
+  if (newValue) {
     sidebarView.value = false;
     sidebarState.value = false;
     sidebarFilter.value = false;
@@ -234,7 +312,7 @@ watch(sidebarTraces, (newValue) => {
 });
 
 watch(sidebarState, (newValue) => {
-  if(newValue) {
+  if (newValue) {
     sidebarFilter.value = false;
     sidebarTraces.value = false;
   }
@@ -273,7 +351,7 @@ async function switchRank(rankValue) {
  * @param {string} type - 'freq' or 'duration'.
  * @param {string} option - The data option (e.g., 'total', 'average').
  */
-async function switchDataLayerType(type, option){
+async function switchDataLayerType(type, option) {
   dataLayerType.value = type;
   dataLayerOption.value = option;
   createCy(mapType.value);
@@ -284,7 +362,7 @@ async function switchDataLayerType(type, option){
  * @param {object} e - Object containing the trace id.
  */
 async function switchTraceId(e) {
-  if(e.id == traceId.value) return;
+  if (e.id == traceId.value) return;
   isLoading.value = true;
   traceId.value = e.id;
   await allMapDataStore.getTraceDetail();
@@ -299,21 +377,21 @@ async function switchTraceId(e) {
 function setNodesData(mapData) {
   const mapTypeVal = mapType.value;
   const logFreq = {
-    "total": "",
-    "rel_freq": "",
-    "average": "",
-    "median": "",
-    "max": "",
-    "min": "",
-    "cases": ""
+    total: "",
+    rel_freq: "",
+    average: "",
+    median: "",
+    max: "",
+    min: "",
+    cases: "",
   };
   const logDuration = {
-    "total": "",
-    "rel_duration": "",
-    "average": "",
-    "median": "",
-    "max": "",
-    "min": "",
+    total: "",
+    rel_duration: "",
+    average: "",
+    median: "",
+    max: "",
+    min: "",
   };
   const gateway = {
     parallel: "+",
@@ -322,63 +400,63 @@ function setNodesData(mapData) {
   };
 
   mapData.nodes = [];
-  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
-  mapSource.vertices.forEach(node => {
+  const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
+  mapSource.vertices.forEach((node) => {
     switch (node.type) {
-      case 'gateway':
+      case "gateway":
         mapData.nodes.push({
-          data:{
-            id:node.id,
-            type:node.type,
-            label:gateway[node.gateway_type],
-            height:60,
-            width:60,
-            backgroundColor:'#FFF',
-            bordercolor:'#003366',
-            shape:"diamond",
-            freq:logFreq,
-            duration:logDuration,
-          }
-        })
+          data: {
+            id: node.id,
+            type: node.type,
+            label: gateway[node.gateway_type],
+            height: 60,
+            width: 60,
+            backgroundColor: "#FFF",
+            bordercolor: "#003366",
+            shape: "diamond",
+            freq: logFreq,
+            duration: logDuration,
+          },
+        });
         break;
-      case 'event':
-        if(node.event_type === 'start') mapData.startId = node.id;
-        else if(node.event_type === 'end') mapData.endId = node.id;
+      case "event":
+        if (node.event_type === "start") mapData.startId = node.id;
+        else if (node.event_type === "end") mapData.endId = node.id;
 
         mapData.nodes.push({
-          data:{
-            id:node.id,
-            type:node.type,
-            label:node.event_type,
+          data: {
+            id: node.id,
+            type: node.type,
+            label: node.event_type,
             height: 48,
             width: 48,
-            backgroundColor:'#FFFFFF',
-            bordercolor:'#0F172A',
-            textColor: '#FF3366',
-            shape:"ellipse",
-            freq:logFreq,
-            duration:logDuration,
-          }
+            backgroundColor: "#FFFFFF",
+            bordercolor: "#0F172A",
+            textColor: "#FF3366",
+            shape: "ellipse",
+            freq: logFreq,
+            duration: logDuration,
+          },
         });
         break;
       default:
         mapData.nodes.push({
-            data:{
-              id:node.id,
-              type:node.type,
-              label:node.label,
-              height: 48,
-              width: 216,
-              textColor: '#0F172A',
-              backgroundColor:'rgba(0, 0, 0, 0)',
-              borderradius: 999,
-              shape:"round-rectangle",
-              freq:node.freq,
-              duration:node.duration,
-              backgroundOpacity: 0,
-              borderOpacity: 0,
-            }
-          })
+          data: {
+            id: node.id,
+            type: node.type,
+            label: node.label,
+            height: 48,
+            width: 216,
+            textColor: "#0F172A",
+            backgroundColor: "rgba(0, 0, 0, 0)",
+            borderradius: 999,
+            shape: "round-rectangle",
+            freq: node.freq,
+            duration: node.duration,
+            backgroundOpacity: 0,
+            borderOpacity: 0,
+          },
+        });
         break;
     }
   });
@@ -391,26 +469,26 @@ function setNodesData(mapData) {
 function setEdgesData(mapData) {
   const mapTypeVal = mapType.value;
   const logDuration = {
-    "total": "",
-    "rel_duration": "",
-    "average": "",
-    "median": "",
-    "max": "",
-    "min": "",
-    "cases": ""
+    total: "",
+    rel_duration: "",
+    average: "",
+    median: "",
+    max: "",
+    min: "",
+    cases: "",
   };
 
   mapData.edges = [];
-  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
-  mapSource.edges.forEach(edge => {
+  const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
+  mapSource.edges.forEach((edge) => {
     mapData.edges.push({
       data: {
-        source:edge.tail,
-        target:edge.head,
-        freq:edge.freq,
-        duration:edge.duration === null ? logDuration : edge.duration,
-        style:'dotted',
-        lineWidth:1,
+        source: edge.tail,
+        target: edge.head,
+        freq: edge.freq,
+        duration: edge.duration === null ? logDuration : edge.duration,
+        style: "dotted",
+        lineWidth: 1,
       },
     });
   });
@@ -421,20 +499,32 @@ function setEdgesData(mapData) {
  * @param {string} type - 'processMap' or 'bpmn'.
  */
 async function createCy(type) {
-  const graphId = document.getElementById('cy');
-  const mapData = type === 'processMap'? processMapData.value: bpmnData.value;
-  const mapSource = type === 'processMap' ? processMap.value : bpmn.value;
+  const graphId = document.getElementById("cy");
+  const mapData = type === "processMap" ? processMapData.value : bpmnData.value;
+  const mapSource = type === "processMap" ? processMap.value : bpmn.value;
 
-  if(mapSource.vertices.length !== 0){
+  if (mapSource.vertices.length !== 0) {
     setNodesData(mapData);
     setEdgesData(mapData);
     setActivityBgImage(mapData);
-    cytoscapeGraph.value = await cytoscapeMap(mapData, dataLayerType.value, dataLayerOption.value, curveStyle.value, rank.value, graphId);
-    const processOrBPMN = mapType.value === 'processMap' ? 'process' : 'bpmn';
-    const curveType = curveStyle.value === 'taxi' ? 'elbow' : 'curved';
-    const directionType = rank.value === 'LR' ? 'horizontal' : 'vertical';
-    await mapPathStore.setCytoscape(cytoscapeGraph.value, processOrBPMN, curveType, directionType);
-  };
+    cytoscapeGraph.value = await cytoscapeMap(
+      mapData,
+      dataLayerType.value,
+      dataLayerOption.value,
+      curveStyle.value,
+      rank.value,
+      graphId,
+    );
+    const processOrBPMN = mapType.value === "processMap" ? "process" : "bpmn";
+    const curveType = curveStyle.value === "taxi" ? "elbow" : "curved";
+    const directionType = rank.value === "LR" ? "horizontal" : "vertical";
+    await mapPathStore.setCytoscape(
+      cytoscapeGraph.value,
+      processOrBPMN,
+      curveType,
+      directionType,
+    );
+  }
 }
 
 /**
@@ -446,19 +536,30 @@ function setActivityBgImage(mapData) {
   const groupSize = Math.floor(nodes.length / ImgCapsules.length);
   let nodeOptionArr = [];
   const leveledGroups = [];
-  const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
-  activityNodeArray.forEach(node => nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]));
+  const activityNodeArray = nodes.filter(
+    (node) => node.data.type === "activity",
+  );
+  activityNodeArray.forEach((node) =>
+    nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]),
+  );
   nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
-  for(let i = 0; i < ImgCapsules.length; i++) {
+  for (let i = 0; i < ImgCapsules.length; i++) {
     const startIdx = i * groupSize;
-    const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
+    const endIdx =
+      i === ImgCapsules.length - 1
+        ? activityNodeArray.length
+        : startIdx + groupSize;
     leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
   }
-  for(let level = 0; level < leveledGroups.length; level++) {
-    leveledGroups[level].forEach(option => {
-      const curNodes = activityNodeArray.filter(activityNode => activityNode.data[dataLayerType.value][dataLayerOption.value] === option);
-      curNodes.forEach(curNode => {
-          curNode.data = {
+  for (let level = 0; level < leveledGroups.length; level++) {
+    leveledGroups[level].forEach((option) => {
+      const curNodes = activityNodeArray.filter(
+        (activityNode) =>
+          activityNode.data[dataLayerType.value][dataLayerOption.value] ===
+          option,
+      );
+      curNodes.forEach((curNode) => {
+        curNode.data = {
           ...curNode.data,
           nodeImageUrl: ImgCapsules[level],
           level,
@@ -473,12 +574,12 @@ function setActivityBgImage(mapData) {
   try {
     const routeParams = route.params;
     const file = route.meta.file;
-    const isCheckPage = route.name.includes('Check');
+    const isCheckPage = route.name.includes("Check");
 
     isLoading.value = true;
     switch (routeParams.type) {
-      case 'log':
-        if(!isCheckPage) {
+      case "log":
+        if (!isCheckPage) {
           logId.value = routeParams.fileId;
           baseLogId.value = routeParams.fileId;
         } else {
@@ -486,15 +587,17 @@ function setActivityBgImage(mapData) {
           baseLogId.value = file.parent.id;
         }
         break;
-      case 'filter':
-        if(!isCheckPage) {
+      case "filter":
+        if (!isCheckPage) {
           createFilterId.value = routeParams.fileId;
         } else {
           createFilterId.value = file.parent.id;
         }
         await allMapDataStore.fetchFunnel(createFilterId.value);
         isRuleData.value = Array.from(temporaryData.value);
-        ruleData.value = isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
+        ruleData.value = isRuleData.value.map((e) =>
+          sidebarFilterRefComp.value.setRule(e),
+        );
         break;
     }
     await allMapDataStore.getAllMapData();
@@ -506,20 +609,20 @@ function setActivityBgImage(mapData) {
     await allMapDataStore.getFilterParams();
     await allMapDataStore.getTraceDetail();
 
-    emitter.on('saveModal', boolean => {
+    emitter.on("saveModal", (boolean) => {
       sidebarView.value = boolean;
       sidebarFilter.value = boolean;
       sidebarTraces.value = boolean;
       sidebarState.value = boolean;
     });
-    emitter.on('leaveFilter', boolean => {
+    emitter.on("leaveFilter", (boolean) => {
       sidebarView.value = boolean;
       sidebarFilter.value = boolean;
       sidebarTraces.value = boolean;
       sidebarState.value = boolean;
     });
   } catch (error) {
-    console.error('Failed to initialize map:', error);
+    console.error("Failed to initialize map:", error);
   } finally {
     isLoading.value = false;
   }
diff --git a/src/views/Discover/Performance/FreqChart.vue b/src/views/Discover/Performance/FreqChart.vue
index 68764b9..7408d5b 100644
--- a/src/views/Discover/Performance/FreqChart.vue
+++ b/src/views/Discover/Performance/FreqChart.vue
@@ -1,5 +1,10 @@
 <template>
-    <Chart type="line" :data="primeVueSetDataState" :options="primeVueSetOptionsState" class="h-96" />
+  <Chart
+    type="line"
+    :data="primeVueSetDataState"
+    :options="primeVueSetOptionsState"
+    class="h-96"
+  />
 </template>
 
 <script setup>
@@ -14,66 +19,66 @@
  *   occurrence data with Chart.js bar charts.
  */
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from "vue";
 import {
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
- } from '@/module/timeLabel.js';
+} from "@/module/timeLabel.js";
 
-const knownScaleLineChartOptions =  {
-x: {
-    type: 'time',
+const knownScaleLineChartOptions = {
+  x: {
+    type: "time",
     title: {
-    display: true,
-    color: '#334155',
-    font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
-    }
+        lineHeight: 2,
+      },
     },
     time: {
-    displayFormats: {
-        second: 'h:mm:ss', // ex: 1:11:11
-        minute: 'M/d h:mm', // ex: 1/1 1:11
-        hour: 'M/d h:mm', // ex: 1/1 1:11
-        day: 'M/d h', // ex: 1/1 1
-        month: 'y/M/d', // ex: 1911/1/1
-    },
+      displayFormats: {
+        second: "h:mm:ss", // ex: 1:11:11
+        minute: "M/d h:mm", // ex: 1/1 1:11
+        hour: "M/d h:mm", // ex: 1/1 1:11
+        day: "M/d h", // ex: 1/1 1
+        month: "y/M/d", // ex: 1911/1/1
+      },
     },
     ticks: {
-    display: true,
-    maxRotation: 0, // Do not rotate labels (range: 0~50)
-    color: '#64748b',
-    source: 'labels', // Dynamically display label count proportionally
+      display: true,
+      maxRotation: 0, // Do not rotate labels (range: 0~50)
+      color: "#64748b",
+      source: "labels", // Dynamically display label count proportionally
     },
     border: {
-    color: '#64748b',
+      color: "#64748b",
     },
     grid: {
-    tickLength: 0, // Prevent grid lines from extending beyond the axis
-    }
-},
-y: {
+      tickLength: 0, // Prevent grid lines from extending beyond the axis
+    },
+  },
+  y: {
     beginAtZero: true, // Scale includes 0
     title: {
-    display: true,
-    color: '#334155',
-    font: {
+      display: true,
+      color: "#334155",
+      font: {
         size: 12,
-        lineHeight: 2
+        lineHeight: 2,
+      },
     },
-    },
-    ticks:{
-    color: '#64748b',
-    padding: 8,
+    ticks: {
+      color: "#64748b",
+      padding: 8,
     },
     grid: {
-    color: '#64748b',
+      color: "#64748b",
     },
     border: {
-    display: false, // Hide the extra border line on the left side
+      display: false, // Hide the extra border line on the left side
     },
-},
+  },
 };
 
 const props = defineProps({
@@ -93,8 +98,8 @@ const props = defineProps({
 
 const primeVueSetDataState = ref(null);
 const primeVueSetOptionsState = ref(null);
-const colorPrimary = ref('#0099FF');
-const colorSecondary = ref('#FFAA44');
+const colorPrimary = ref("#0099FF");
+const colorSecondary = ref("#FFAA44");
 
 /**
  * Compare page and Performance have this same function.
@@ -103,13 +108,15 @@ const colorSecondary = ref('#FFAA44');
  * @param customizeOptions.content
  * @param customizeOptions.ticksOfXAxis
  */
-const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
-      content,
-      ticksOfXAxis,
-    },
-  }) => {
+const getCustomizedScaleOption = (
+  whichScaleObj,
+  { customizeOptions: { content, ticksOfXAxis } },
+) => {
   let resultScaleObj;
-  resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
+  resultScaleObj = customizeScaleChartOptionTitleByContent(
+    whichScaleObj,
+    content,
+  );
   resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
   return resultScaleObj;
 };
@@ -125,14 +132,14 @@ const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
     ...scaleObjectToAlter,
     x: {
       ...scaleObjectToAlter.x,
-        ticks: {
-          ...scaleObjectToAlter.x.ticks,
-            callback: function(value, index) {
-              // Customize x-axis time ticks based on different intervals
-              return ticksOfXAxis[index];
-            },
+      ticks: {
+        ...scaleObjectToAlter.x.ticks,
+        callback: function (value, index) {
+          // Customize x-axis time ticks based on different intervals
+          return ticksOfXAxis[index];
         },
       },
+    },
   };
 };
 
@@ -154,21 +161,21 @@ const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
 
   return {
     ...whichScaleObj,
-      x: {
-        ...whichScaleObj.x,
-        title: {
-          ...whichScaleObj.x.title,
-          text: content.x
-        }
+    x: {
+      ...whichScaleObj.x,
+      title: {
+        ...whichScaleObj.x.title,
+        text: content.x,
       },
-      y: {
-        ...whichScaleObj.y,
-        title: {
-          ...whichScaleObj.y.title,
-          text: content.y
-        }
-      }
-    };
+    },
+    y: {
+      ...whichScaleObj.y,
+      title: {
+        ...whichScaleObj.y.title,
+        text: content.y,
+      },
+    },
+  };
 };
 
 /**
@@ -190,7 +197,7 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
 
   // Consider the dimension of chartData.data
   // When handling the Compare page case
-  if(pageName === "Compare"){
+  if (pageName === "Compare") {
     datasetsPrimary = chartData.data[0].data;
     datasetsSecondary = chartData.data[1].data;
 
@@ -210,9 +217,9 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
         tension: 0, // Bezier curve tension
         borderColor: colorSecondary,
         pointBackgroundColor: colorSecondary,
-      }
+      },
     ];
-    xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
+    xData = chartData.data[0].data.map((item) => new Date(item.x).getTime());
   } else {
     datasets = chartData.data;
     datasetsArr = [
@@ -221,23 +228,25 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
         data: datasets,
         fill: false,
         tension: 0, // Bezier curve tension
-        borderColor: '#0099FF',
-      }
+        borderColor: "#0099FF",
+      },
     ];
-    xData = chartData.data.map(item => new Date(item.x).getTime());
+    xData = chartData.data.map((item) => new Date(item.x).getTime());
   }
 
-
   // Customize X axis ticks due to different differences between min and max of data group
   // Compare page and Performance page share the same logic
   const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
   const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
   const customizedScaleOption = getCustomizedScaleOption(
-    knownScaleLineChartOptions, {
+    knownScaleLineChartOptions,
+    {
       customizeOptions: {
-        content, ticksOfXAxis,
-      }
-  });
+        content,
+        ticksOfXAxis,
+      },
+    },
+  );
 
   primeVueSetData = {
     labels: xData,
@@ -251,20 +260,20 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false, // Legend
       tooltip: {
         displayColors: true,
-        titleFont: {weight: 'normal'},
+        titleFont: { weight: "normal" },
         callbacks: {
-          label: function(tooltipItem) {
-              // Get the data
-              const label = tooltipItem.dataset.label || '';
+          label: function (tooltipItem) {
+            // Get the data
+            const label = tooltipItem.dataset.label || "";
 
-              // Build the tooltip label with dataset color indicator
-              return `${label}: ${tooltipItem.parsed.y}`; // Use Unicode block to represent color
+            // Build the tooltip label with dataset color indicator
+            return `${label}: ${tooltipItem.parsed.y}`; // Use Unicode block to represent color
           },
         },
       },
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index b12a6ec..9216dda 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -3,32 +3,47 @@
     <div class="h-full relative bg-neutral-50">
       <div class="flex justify-start items-start p-4 h-full">
         <!-- tag -->
-        <aside class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start">
+        <aside
+          class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start"
+        >
           <section class="px-2 space-y-2 w-56 h-full">
             <div>
               <p class="h1">Time Usage</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
-                <li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}"
-                  @click="handleClick(item.tagId)" class="cursor-pointer hover:text-primary">
-                    {{ item.label }}
+                <li
+                  v-for="(item, index) in timeUsageData"
+                  :key="index"
+                  :class="{ active: isActive === item.tagId }"
+                  @click="handleClick(item.tagId)"
+                  class="cursor-pointer hover:text-primary"
+                >
+                  {{ item.label }}
                 </li>
               </ul>
             </div>
             <div>
               <p class="h1">Frequency</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
-                <li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}"
-                  @click="handleClick(item.tagId)" class="cursor-pointer hover:text-primary">
-                    {{ item.label }}
-                  </li>
+                <li
+                  v-for="(item, index) in frequencyData"
+                  :key="index"
+                  :class="{ active: isActive === item.tagId }"
+                  @click="handleClick(item.tagId)"
+                  class="cursor-pointer hover:text-primary"
+                >
+                  {{ item.label }}
+                </li>
               </ul>
             </div>
           </section>
         </aside>
         <!-- graph -->
-        <article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
+        <article
+          class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth"
+        >
           <section>
-            <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
+            <p class="h1 px-4 border-b border-neutral-900">
+              <span class="material-symbols-outlined mr-2 align-middle">
                 schedule
               </span>
               Time Usage
@@ -39,62 +54,125 @@
               <li id="cycleTime" class="scroll-smooth">
                 <span class="inline-block py-4">Cycle Time & Efficiency</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgCycleTime.title }}
                     </span>
-                    <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
+                    <Chart
+                      type="line"
+                      :data="avgCycleTimeData"
+                      :options="avgCycleTimeOptions"
+                      class="h-96"
+                    />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgCycleEfficiency.title }}
-                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
-                      v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span>
-                    <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
+                      <span
+                        class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
+                        v-tooltip.bottom="tooltip.avgCycleEfficiency"
+                        >info</span
+                      ></span
+                    >
+                    <Chart
+                      type="bar"
+                      :data="avgCycleEfficiencyData"
+                      :options="avgCycleEfficiencyOptions"
+                      class="h-96"
+                    />
                   </li>
                 </ul>
               </li>
               <li id="processingTime">
                 <span class="inline-block py-4">Processing Time</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgProcessTime.title }}
                     </span>
-                    <Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
+                    <Chart
+                      type="line"
+                      :data="avgProcessTimeData"
+                      :options="avgProcessTimeOptions"
+                      class="h-96"
+                    />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgProcessTimeByTask.title }}
                     </span>
-                    <Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]"
-                      :style="{ height: avgProcessTimeByTaskHeight }"/>
+                    <Chart
+                      type="bar"
+                      :data="avgProcessTimeByTaskData"
+                      :options="avgProcessTimeByTaskOptions"
+                      class="h-[500px]"
+                      :style="{ height: avgProcessTimeByTaskHeight }"
+                    />
                   </li>
                 </ul>
               </li>
               <li id="waitingTime">
                 <span class="inline-block py-4">Waiting Time</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                    >
                       {{ contentData.avgWaitingTime.title }}
-                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
-                        v-tooltip.bottom="tooltip.avgWaitingTime">
+                      <span
+                        class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
+                        v-tooltip.bottom="tooltip.avgWaitingTime"
+                      >
                         info
-                      </span></span>
-                    <Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
+                      </span></span
+                    >
+                    <Chart
+                      type="line"
+                      :data="avgWaitingTimeData"
+                      :options="avgWaitingTimeOptions"
+                      class="h-96"
+                    />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}
-                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
-                        v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">
-                          info
-                        </span>
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                      >{{ contentData.avgWaitingTimeByEdge.title }}
+                      <span
+                        class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
+                        v-tooltip.bottom="tooltip.avgWaitingTimeByEdge"
+                      >
+                        info
                       </span>
+                    </span>
                     <div>
-                      <Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData"
-                        :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }"
-                          class="h-[500px]" />
+                      <Chart
+                        v-if="avgWaitingTimeByEdgeData !== null"
+                        type="bar"
+                        :data="avgWaitingTimeByEdgeData"
+                        :options="avgWaitingTimeByEdgeOptions"
+                        :style="{ height: avgWaitingTimeByEdgeHeight }"
+                        class="h-[500px]"
+                      />
                       <div v-else class="h-96 bg-neutral-100 m-4 flex">
                         <p class="h2 text-danger m-auto">No waiting time.</p>
                       </div>
@@ -105,25 +183,45 @@
             </ul>
           </section>
           <section>
-            <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
+            <p class="h1 px-4 border-b border-neutral-900">
+              <span class="material-symbols-outlined mr-2 align-middle">
                 moving
               </span>
-                Frequency
+              Frequency
             </p>
             <ul class="list-disc list-inside px-4 pl-7 text-sm">
               <li id="cases">
                 <span class="inline-block py-4">Number of Cases</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
-                    <FreqChart v-if="performanceData" :chartData="performanceData?.freq?.cases" :content="contentData?.freq" yUnit="count"
+                  <li
+                    class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                      >{{ contentData.freq.title }}</span
+                    >
+                    <FreqChart
+                      v-if="performanceData"
+                      :chartData="performanceData?.freq?.cases"
+                      :content="contentData?.freq"
+                      yUnit="count"
                       pageName="Performance"
                     />
                   </li>
-                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.casesByTask.title }}</span>
-                    <Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions"
-                    :style="{ height: casesByTaskHeight }" class="h-[500px]"/>
+                  <li
+                    class="bg-neutral-10 p-1 border border-neutral-300 rounded"
+                  >
+                    <span
+                      class="block font-bold text-sm leading-loose text-center my-2"
+                      >{{ contentData.casesByTask.title }}</span
+                    >
+                    <Chart
+                      type="bar"
+                      :data="casesByTaskData"
+                      :options="casesByTaskOptions"
+                      :style="{ height: casesByTaskHeight }"
+                      class="h-[500px]"
+                    />
                   </li>
                 </ul>
               </li>
@@ -148,19 +246,19 @@
  *   charts, frequency data, and statistical summaries.
  */
 
-import { useConformanceStore } from '@/stores/conformance';
+import { useConformanceStore } from "@/stores/conformance";
 
 export default {
   async beforeRouteEnter(to, from, next) {
-    const isCheckPage = to.name.includes('Check');
+    const isCheckPage = to.name.includes("Check");
 
     if (isCheckPage) {
       const conformanceStore = useConformanceStore();
       switch (to.params.type) {
-        case 'log':
+        case "log":
           conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
           break;
-        case 'filter':
+        case "filter":
           conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
           break;
       }
@@ -168,26 +266,28 @@ export default {
       to.meta.file = conformanceStore.routeFile;
     }
     next();
-  }
-}
+  },
+};
 </script>
 <script setup>
-import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import moment from 'moment';
-import { useLoadingStore } from '@/stores/loading';
-import { usePerformanceStore } from '@/stores/performance';
-import StatusBar from '@/components/Discover/StatusBar.vue';
-import { setLineChartData } from '@/module/setChartData.js';
-import { simpleTimeLabel, followTimeLabel,
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import moment from "moment";
+import { useLoadingStore } from "@/stores/loading";
+import { usePerformanceStore } from "@/stores/performance";
+import StatusBar from "@/components/Discover/StatusBar.vue";
+import { setLineChartData } from "@/module/setChartData.js";
+import {
+  simpleTimeLabel,
+  followTimeLabel,
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
   getStepSizeOfYTicks,
   getYTicksByIndex,
- } from '@/module/timeLabel.js';
-import FreqChart from './FreqChart.vue';
-import { PRIME_VUE_TICKS_LIMIT } from '../../../constants/constants.js';
+} from "@/module/timeLabel.js";
+import FreqChart from "./FreqChart.vue";
+import { PRIME_VUE_TICKS_LIMIT } from "../../../constants/constants.js";
 
 const primeVueTicksLimit = PRIME_VUE_TICKS_LIMIT;
 
@@ -201,37 +301,62 @@ const { performanceData } = storeToRefs(performanceStore);
 
 // Data
 const timeUsageData = [
-  {tagId: '#cycleTime', label: 'Cycle Time & Efficiency'},
-  {tagId: '#processingTime', label: 'Processing Time'},
-  {tagId: '#waitingTime', label: 'Waiting Time'},
-];
-const frequencyData = [
-  {tagId: '#cases', label: 'Number of Cases'},
+  { tagId: "#cycleTime", label: "Cycle Time & Efficiency" },
+  { tagId: "#processingTime", label: "Processing Time" },
+  { tagId: "#waitingTime", label: "Waiting Time" },
 ];
+const frequencyData = [{ tagId: "#cases", label: "Number of Cases" }];
 const contentData = {
-  avgCycleTime: {title: 'Average Cycle Time', x: 'Date', y: 'Cycle time'},
-  avgCycleEfficiency: {title: 'Cycle Efficiency', x: 'Date', y: 'Cycle efficiency (%)'},
-  avgProcessTime: {title: 'Average Processing Time', x: 'Date', y: 'Processing time'},
-  avgProcessTimeByTask: {title: 'Average Processing Time by Activity', x: 'Processing time', y: 'Activity'},
-  avgWaitingTime: {title: 'Average Waiting Time', x: 'Date', y: 'Waiting time'},
-  avgWaitingTimeByEdge: {title: 'Average Waiting Time between Activity', x: 'Waiting time', y: 'Activities'},
-  freq: {title: 'New Cases', x: 'Date', y: 'Count'},
-  casesByTask: {title: 'Number of Cases by Activity', x: 'Count', y: 'Activity'},
+  avgCycleTime: { title: "Average Cycle Time", x: "Date", y: "Cycle time" },
+  avgCycleEfficiency: {
+    title: "Cycle Efficiency",
+    x: "Date",
+    y: "Cycle efficiency (%)",
+  },
+  avgProcessTime: {
+    title: "Average Processing Time",
+    x: "Date",
+    y: "Processing time",
+  },
+  avgProcessTimeByTask: {
+    title: "Average Processing Time by Activity",
+    x: "Processing time",
+    y: "Activity",
+  },
+  avgWaitingTime: {
+    title: "Average Waiting Time",
+    x: "Date",
+    y: "Waiting time",
+  },
+  avgWaitingTimeByEdge: {
+    title: "Average Waiting Time between Activity",
+    x: "Waiting time",
+    y: "Activities",
+  },
+  freq: { title: "New Cases", x: "Date", y: "Count" },
+  casesByTask: {
+    title: "Number of Cases by Activity",
+    x: "Count",
+    y: "Activity",
+  },
 };
 const tooltip = {
   avgCycleEfficiency: {
-    value: 'Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.',
-    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    value:
+      "Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.",
+    class: "!max-w-[212px] !text-[10px] !opacity-80",
     autoHide: false,
   },
   avgWaitingTime: {
-    value: 'Average Waiting Time: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
-    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    value:
+      "Average Waiting Time: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.",
+    class: "!max-w-[212px] !text-[10px] !opacity-80",
     autoHide: false,
   },
   avgWaitingTimeByEdge: {
-    value: 'Average Waiting Time Between Activities: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
-    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    value:
+      "Average Waiting Time Between Activities: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.",
+    class: "!max-w-[212px] !text-[10px] !opacity-80",
     autoHide: false,
   },
 };
@@ -294,7 +419,7 @@ function setXLabelsData(valueData) {
   const numPoints = 12;
   const step = (max - min) / (numPoints - 1);
   const data = [];
-  for(let i = 0; i< numPoints; i++) {
+  for (let i = 0; i < numPoints; i++) {
     const x = min + i * step;
     data.push(x);
   }
@@ -310,9 +435,9 @@ function getHorizontalBarHeight(chartData) {
   const totalBars = chartData.data.length;
   let hBarHeight = horizontalBarHeight;
 
-  if(totalBars > 10) hBarHeight = (totalBars - 10) * 16 + horizontalBarHeight;
+  if (totalBars > 10) hBarHeight = (totalBars - 10) * 16 + horizontalBarHeight;
 
-  return hBarHeight + 'px'
+  return hBarHeight + "px";
 }
 
 /**
@@ -322,18 +447,18 @@ function getHorizontalBarHeight(chartData) {
  * @returns {Array} [chartData, chartOptions] tuple.
  */
 function getBarChart(chartData, content) {
-  const getMoment = (time)=> moment(time).format('YYYY/M/D hh:mm:ss');
+  const getMoment = (time) => moment(time).format("YYYY/M/D hh:mm:ss");
   let primeVueSetData = {};
   let primeVueSetOption = {};
 
-  const datasets = chartData.data.map(value => {
+  const datasets = chartData.data.map((value) => {
     return {
       x: getMoment(value.x),
-      y: value.y * 100
-    }
+      y: value.y * 100,
+    };
   });
-  const xData = datasets.map(i => i.x);
-  const yData = datasets.map(i => i.y)
+  const xData = datasets.map((i) => i.x);
+  const yData = datasets.map((i) => i.y);
 
   primeVueSetData = {
     labels: xData,
@@ -341,9 +466,9 @@ function getBarChart(chartData, content) {
       {
         label: content.title,
         data: yData,
-        backgroundColor: '#0099FF'
-      }
-    ]
+        backgroundColor: "#0099FF",
+      },
+    ],
   };
   primeVueSetOption = {
     responsive: true,
@@ -353,20 +478,20 @@ function getBarChart(chartData, content) {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
         displayColors: false,
-        titleFont: {weight: 'normal'},
+        titleFont: { weight: "normal" },
         callbacks: {
-          title: function(context) {
+          title: function (context) {
             return `${content.x}: ${context[0].label}`;
           },
-          label: function(context) {
+          label: function (context) {
             return `${content.y}: ${context.parsed.y.toFixed(2)}`;
-          }
+          },
         },
       },
       title: {
@@ -378,21 +503,21 @@ function getBarChart(chartData, content) {
         title: {
           display: true,
           text: content.x,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
-          }
+            lineHeight: 2,
+          },
         },
         ticks: {
           display: true,
-          color: '#64748b',
-          callback: function(value, index, ticks) {
-            return moment(xData[index]).format('YYYY/MM/DD');
+          color: "#64748b",
+          callback: function (value, index, ticks) {
+            return moment(xData[index]).format("YYYY/MM/DD");
           },
         },
         border: {
-          color: '#64748b',
+          color: "#64748b",
         },
         grid: {
           display: false,
@@ -403,19 +528,18 @@ function getBarChart(chartData, content) {
         title: {
           display: true,
           text: content.y,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
         },
-        ticks:{
-          color: '#64748b',
+        ticks: {
+          color: "#64748b",
           padding: 8,
-
         },
         grid: {
-          color: '#64748b',
+          color: "#64748b",
         },
         border: {
           display: false,
@@ -424,7 +548,7 @@ function getBarChart(chartData, content) {
     },
   };
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 /**
@@ -443,8 +567,8 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
   let primeVueSetOption = {};
 
   chartData.data.sort((a, b) => b.y - a.y);
-  const xData = chartData.data.map(item => item.x);
-  const yData = chartData.data.map(item => item.y);
+  const xData = chartData.data.map((item) => item.x);
+  const yData = chartData.data.map((item) => item.y);
 
   primeVueSetData = {
     labels: xData,
@@ -452,12 +576,12 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
       {
         label: content.title,
         data: yData,
-        backgroundColor: '#0099FF',
-      }
-    ]
+        backgroundColor: "#0099FF",
+      },
+    ],
   };
   primeVueSetOption = {
-    indexAxis: 'y',
+    indexAxis: "y",
     responsive: true,
     maintainAspectRatio: false,
     layout: {
@@ -465,14 +589,14 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
         displayColors: false,
-        titleFont: {weight: 'normal'},
-        callbacks: {}
+        titleFont: { weight: "normal" },
+        callbacks: {},
       },
       title: {
         display: false,
@@ -483,44 +607,43 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
         title: {
           display: true,
           text: content.x,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
-          }
+            lineHeight: 2,
+          },
         },
         ticks: {
           display: true,
           maxRotation: 0,
-          color: '#64748b',
+          color: "#64748b",
         },
         grid: {
-          color: '#64748b',
+          color: "#64748b",
         },
         border: {
-          display:false,
+          display: false,
         },
       },
       y: {
         beginAtZero: true,
-        type: 'category',
+        type: "category",
         title: {
           display: true,
           text: content.y,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
         },
-        ticks:{
-          color: '#64748b',
+        ticks: {
+          color: "#64748b",
           padding: 8,
-
         },
         grid: {
-          display:false,
-          color: '#64748b',
+          display: false,
+          color: "#64748b",
         },
         border: {
           display: false,
@@ -529,46 +652,54 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
     },
   };
   switch (xUnit) {
-    case 'date':
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+    case "date":
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
         return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
       };
-      primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
-        return getFollowTimeLabel(value, maxY, 1)
+      primeVueSetOption.scales.x.ticks.callback = function (
+        value,
+        index,
+        ticks,
+      ) {
+        return getFollowTimeLabel(value, maxY, 1);
       };
       break;
-    case 'count':
+    case "count":
     default:
       primeVueSetOption.scales.x.ticks.precision = 0;
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+      primeVueSetOption.plugins.tooltip.callbacks.label = function (context) {
         return `${content.x}: ${context.parsed.x}`;
-      }
+      };
       break;
   }
-  if(isSingle) {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+  if (isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
       return `${content.y}: ${context[0].label}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xData[index];
-      return label.length > 21 ? `${label.substring(0, 18)}...` : label
+      return label.length > 21 ? `${label.substring(0, 18)}...` : label;
     };
-  }else {
-    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+  } else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function (context) {
+      return `${content.y}: ${context[0].label.replace(",", " - ")}`;
     };
     primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
       const label = xData[index];
       let labelStart = label[0];
       let labelEnd = label[1];
 
-      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-      return labelStart + " - " + labelEnd
+      labelStart =
+        labelStart.length > 10
+          ? `${labelStart.substring(0, 7)}...`
+          : labelStart;
+      labelEnd =
+        labelEnd.length > 10 ? `${labelEnd.substring(0, 7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd;
     };
   }
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 /**
@@ -577,13 +708,15 @@ function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
  * @param {object} options - Options containing content and ticksOfXAxis.
  * @returns {object} The customized scale options.
  */
-function getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
-      content,
-      ticksOfXAxis,
-    },
-  }) {
+function getCustomizedScaleOption(
+  whichScaleObj,
+  { customizeOptions: { content, ticksOfXAxis } },
+) {
   let resultScaleObj;
-  resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
+  resultScaleObj = customizeScaleChartOptionTitleByContent(
+    whichScaleObj,
+    content,
+  );
   resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
   return resultScaleObj;
 }
@@ -594,28 +727,28 @@ function getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
  * @param {object} content - Object with x and y axis title text.
  * @returns {object} The scale options with updated titles.
  */
-function customizeScaleChartOptionTitleByContent(whichScaleObj, content){
+function customizeScaleChartOptionTitleByContent(whichScaleObj, content) {
   if (!content) {
     return whichScaleObj;
   }
 
   return {
     ...whichScaleObj,
-      x: {
-        ...whichScaleObj.x,
-        title: {
-          ...whichScaleObj.x.title,
-          text: content.x
-        }
+    x: {
+      ...whichScaleObj.x,
+      title: {
+        ...whichScaleObj.x.title,
+        text: content.x,
       },
-      y: {
-        ...whichScaleObj.y,
-        title: {
-          ...whichScaleObj.y.title,
-          text: content.y
-        }
-      }
-    };
+    },
+    y: {
+      ...whichScaleObj.y,
+      title: {
+        ...whichScaleObj.y.title,
+        text: content.y,
+      },
+    },
+  };
 }
 
 /**
@@ -629,13 +762,13 @@ function customizeScaleChartOptionTicks(scaleObjectToAlter, ticksOfXAxis) {
     ...scaleObjectToAlter,
     x: {
       ...scaleObjectToAlter.x,
-        ticks: {
-          ...scaleObjectToAlter.x.ticks,
-            callback: function(value, index) {
-              return ticksOfXAxis[index];
-            },
+      ticks: {
+        ...scaleObjectToAlter.x.ticks,
+        callback: function (value, index) {
+          return ticksOfXAxis[index];
         },
       },
+    },
   };
 }
 
@@ -653,11 +786,16 @@ function getExplicitDeclaredLineChart(chartData, content, yUnit) {
   let primeVueSetOption = {};
   const getSimpleTimeLabel = simpleTimeLabel;
 
-  const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
-  chartData.y_axis.min);
+  const datasets = setLineChartData(
+    chartData.data,
+    chartData.x_axis.max,
+    chartData.x_axis.min,
+    false,
+    chartData.y_axis.max,
+    chartData.y_axis.min,
+  );
   const xData = setXLabelsData(chartData.x_axis);
 
-
   const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
   const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
   primeVueSetData = {
@@ -668,9 +806,9 @@ function getExplicitDeclaredLineChart(chartData, content, yUnit) {
         data: datasets,
         fill: false,
         tension: 0,
-        borderColor: '#0099FF',
-      }
-    ]
+        borderColor: "#0099FF",
+      },
+    ],
   };
   primeVueSetOption = {
     responsive: true,
@@ -680,17 +818,17 @@ function getExplicitDeclaredLineChart(chartData, content, yUnit) {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
         displayColors: false,
-        titleFont: {weight: 'normal'},
+        titleFont: { weight: "normal" },
         callbacks: {
-          label: function(context) {
+          label: function (context) {
             return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
-          }
+          },
         },
       },
       title: {
@@ -701,72 +839,74 @@ function getExplicitDeclaredLineChart(chartData, content, yUnit) {
       x: {
         min: minX,
         max: maxX,
-        type: 'time',
+        type: "time",
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
           text: content.x,
         },
         time: {
           displayFormats: {
-            second: 'h:mm:ss',
-            minute: 'M/d h:mm',
-            hour: 'M/d h:mm',
-            day: 'M/d h',
-            month: 'y/M/d',
+            second: "h:mm:ss",
+            minute: "M/d h:mm",
+            hour: "M/d h:mm",
+            day: "M/d h",
+            month: "y/M/d",
           },
-          round: true
+          round: true,
         },
         ticks: {
           maxTicksLimit: primeVueTicksLimit,
           padding: 8,
           display: true,
           maxRotation: 0,
-          color: '#64748b',
-          source: 'labels',
-          callback: function(value, index) {
+          color: "#64748b",
+          source: "labels",
+          callback: function (value, index) {
             return ticksOfXAxis[index];
           },
         },
         border: {
-          color: '#64748b',
+          color: "#64748b",
         },
       },
       y: {
         beginAtZero: true,
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
-          text: content.y
+          text: content.y,
         },
         grid: {
-          color: '#64748b',
+          color: "#64748b",
         },
         border: {
           display: false,
         },
         ticks: {
-
-          color: '#64748b',
+          color: "#64748b",
           padding: 8,
           callback: function (value, index, ticks) {
-            const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+            const { resultStepSize, unitToUse } = getStepSizeOfYTicks(
+              ticks[ticks.length - 1].value,
+              ticks.length,
+            );
             return getYTicksByIndex(resultStepSize, index, unitToUse);
           },
-        }
+        },
       },
     },
   };
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 /**
@@ -777,18 +917,23 @@ function getExplicitDeclaredLineChart(chartData, content, yUnit) {
  * @returns {Array} [chartData, chartOptions] tuple.
  */
 function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
-  const getMoment = (time)=> moment(time).format('YYYY/M/D hh:mm:ss');
+  const getMoment = (time) => moment(time).format("YYYY/M/D hh:mm:ss");
   const minX = chartData.x_axis.min;
   const maxX = chartData.x_axis.max;
   let primeVueSetData = {};
   let primeVueSetOption = {};
   const getSimpleTimeLabel = simpleTimeLabel;
 
-  const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
-  chartData.y_axis.min);
+  const datasets = setLineChartData(
+    chartData.data,
+    chartData.x_axis.max,
+    chartData.x_axis.min,
+    false,
+    chartData.y_axis.max,
+    chartData.y_axis.min,
+  );
   const xData = setXLabelsData(chartData.x_axis);
 
-
   const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
   const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
 
@@ -800,9 +945,9 @@ function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
         data: datasets,
         fill: false,
         tension: 0,
-        borderColor: '#0099FF',
-      }
-    ]
+        borderColor: "#0099FF",
+      },
+    ],
   };
   primeVueSetOption = {
     responsive: true,
@@ -812,18 +957,18 @@ function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
         top: 16,
         left: 8,
         right: 8,
-      }
+      },
     },
     plugins: {
       legend: false,
       tooltip: {
         displayColors: false,
-        titleFont: {weight: 'normal'},
+        titleFont: { weight: "normal" },
         callbacks: {
-          title: function(context) {
+          title: function (context) {
             return `${content.x}: ${getMoment(context[0].parsed.x)}`;
           },
-          label:function(context) {
+          label: function (context) {
             return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
           },
         },
@@ -836,70 +981,72 @@ function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
       x: {
         min: minX,
         max: maxX,
-        type: 'time',
+        type: "time",
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
           text: content.x,
         },
         time: {
           displayFormats: {
-            second: 'h:mm:ss',
-            minute: 'M/d h:mm',
-            hour: 'M/d h:mm',
-            day: 'M/d h',
-            month: 'y/M/d',
+            second: "h:mm:ss",
+            minute: "M/d h:mm",
+            hour: "M/d h:mm",
+            day: "M/d h",
+            month: "y/M/d",
           },
-          round: true
+          round: true,
         },
         ticks: {
           display: true,
           maxRotation: 0,
-          color: '#64748b',
-          source: 'labels',
-          callback: function(value, index) {
+          color: "#64748b",
+          source: "labels",
+          callback: function (value, index) {
             return ticksOfXAxis[index];
           },
         },
         border: {
-          color: '#64748b',
+          color: "#64748b",
         },
       },
       y: {
         beginAtZero: true,
         title: {
           display: true,
-          color: '#334155',
+          color: "#334155",
           font: {
             size: 12,
-            lineHeight: 2
+            lineHeight: 2,
           },
-          text: content.y
+          text: content.y,
         },
         grid: {
-          color: '#64748b',
+          color: "#64748b",
         },
         border: {
           display: false,
         },
         ticks: {
-
-          color: '#64748b',
+          color: "#64748b",
           padding: 8,
           callback: function (value, index, ticks) {
-            const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+            const { resultStepSize, unitToUse } = getStepSizeOfYTicks(
+              ticks[ticks.length - 1].value,
+              ticks.length,
+            );
             return getYTicksByIndex(resultStepSize, index, unitToUse);
           },
-        }
+        },
       },
     },
   };
 
-  return [primeVueSetData, primeVueSetOption]
+  return [primeVueSetData, primeVueSetOption];
 }
 
 // Created logic
@@ -907,12 +1054,12 @@ function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
   isLoading.value = true;
   try {
     const routeParams = route.params;
-    const isCheckPage = route.name.includes('Check');
+    const isCheckPage = route.name.includes("Check");
     const type = routeParams.type;
     const file = route.meta.file;
     let id;
 
-    if(!isCheckPage) {
+    if (!isCheckPage) {
       id = routeParams.fileId;
     } else {
       id = file.parent.id;
@@ -920,36 +1067,74 @@ function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
 
     // Fetch Performance Data
     await performanceStore.getPerformance(type, id);
-    if(!performanceData.value?.time) {
+    if (!performanceData.value?.time) {
       return;
     }
-    avgProcessTimeByTaskHeight.value = getHorizontalBarHeight(performanceData.value.time.avg_process_time_by_task);
-    if(performanceData.value.time.avg_waiting_time_by_edge !== null) {
-      avgWaitingTimeByEdgeHeight.value = getHorizontalBarHeight(performanceData.value.time.avg_waiting_time_by_edge);
+    avgProcessTimeByTaskHeight.value = getHorizontalBarHeight(
+      performanceData.value.time.avg_process_time_by_task,
+    );
+    if (performanceData.value.time.avg_waiting_time_by_edge !== null) {
+      avgWaitingTimeByEdgeHeight.value = getHorizontalBarHeight(
+        performanceData.value.time.avg_waiting_time_by_edge,
+      );
     }
-    casesByTaskHeight.value = getHorizontalBarHeight(performanceData.value.freq.cases_by_task);
+    casesByTaskHeight.value = getHorizontalBarHeight(
+      performanceData.value.freq.cases_by_task,
+    );
     // create chart
-    [avgCycleTimeData.value, avgCycleTimeOptions.value] = getExplicitDeclaredLineChart(performanceData.value.time.avg_cycle_time,
-      contentData.avgCycleTime, 'date');
-    [avgCycleEfficiencyData.value, avgCycleEfficiencyOptions.value] = getBarChart(
-      performanceData.value.time.avg_cycle_efficiency, contentData.avgCycleEfficiency);
-    [avgProcessTimeData.value, avgProcessTimeOptions.value] = getExplicitDeclaredLineChart(performanceData.value.time.avg_process_time,
-      contentData.avgProcessTime, 'date');
-    [avgProcessTimeByTaskData.value, avgProcessTimeByTaskOptions.value] = getHorizontalBarChart(
-      performanceData.value.time.avg_process_time_by_task, contentData.avgProcessTimeByTask, true, 'date');
-    [avgWaitingTimeData.value, avgWaitingTimeOptions.value] = getExplicitDeclaredLineChart(
-      performanceData.value.time.avg_waiting_time, contentData.avgWaitingTime, 'date');
-    if(performanceData.value.time.avg_waiting_time_by_edge !== null) {
-      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = getHorizontalBarChart(
-        performanceData.value.time.avg_waiting_time_by_edge, contentData.avgWaitingTimeByEdge, false, 'date');
+    [avgCycleTimeData.value, avgCycleTimeOptions.value] =
+      getExplicitDeclaredLineChart(
+        performanceData.value.time.avg_cycle_time,
+        contentData.avgCycleTime,
+        "date",
+      );
+    [avgCycleEfficiencyData.value, avgCycleEfficiencyOptions.value] =
+      getBarChart(
+        performanceData.value.time.avg_cycle_efficiency,
+        contentData.avgCycleEfficiency,
+      );
+    [avgProcessTimeData.value, avgProcessTimeOptions.value] =
+      getExplicitDeclaredLineChart(
+        performanceData.value.time.avg_process_time,
+        contentData.avgProcessTime,
+        "date",
+      );
+    [avgProcessTimeByTaskData.value, avgProcessTimeByTaskOptions.value] =
+      getHorizontalBarChart(
+        performanceData.value.time.avg_process_time_by_task,
+        contentData.avgProcessTimeByTask,
+        true,
+        "date",
+      );
+    [avgWaitingTimeData.value, avgWaitingTimeOptions.value] =
+      getExplicitDeclaredLineChart(
+        performanceData.value.time.avg_waiting_time,
+        contentData.avgWaitingTime,
+        "date",
+      );
+    if (performanceData.value.time.avg_waiting_time_by_edge !== null) {
+      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] =
+        getHorizontalBarChart(
+          performanceData.value.time.avg_waiting_time_by_edge,
+          contentData.avgWaitingTimeByEdge,
+          false,
+          "date",
+        );
     } else {
-      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = [null, null]
+      [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = [
+        null,
+        null,
+      ];
     }
 
-    [casesByTaskData.value, casesByTaskOptions.value] = getHorizontalBarChart(performanceData.value.freq.cases_by_task,
-      contentData.casesByTask, true, 'count');
+    [casesByTaskData.value, casesByTaskOptions.value] = getHorizontalBarChart(
+      performanceData.value.freq.cases_by_task,
+      contentData.casesByTask,
+      true,
+      "count",
+    );
   } catch (error) {
-    console.error('Failed to initialize performance:', error);
+    console.error("Failed to initialize performance:", error);
   } finally {
     isLoading.value = false;
   }
@@ -958,6 +1143,6 @@ function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
 <style scoped>
 @reference "../../../assets/tailwind.css";
 .active {
-  @apply text-primary
+  @apply text-primary;
 }
 </style>
diff --git a/src/views/Files/Files.vue b/src/views/Files/Files.vue
index 1dd4c1a..da8a59f 100644
--- a/src/views/Files/Files.vue
+++ b/src/views/Files/Files.vue
@@ -4,91 +4,176 @@
     <div>
       <!-- Performance Comparison -->
       <section v-if="filesTag === 'COMPARE'">
-        <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Performance Comparison</h2>
-        <div class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4">
+        <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">
+          Performance Comparison
+        </h2>
+        <div
+          class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4"
+        >
           <!-- primaryDrag -->
-          <div class="relative w-[216px] min-w-[216px] h-full" id="primaryDragCard">
-            <div v-if="primaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
-              <div class="h-full flex flex-col justify-center items-center gap-4">
+          <div
+            class="relative w-[216px] min-w-[216px] h-full"
+            id="primaryDragCard"
+          >
+            <div
+              v-if="primaryDragData.length === 0"
+              class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute"
+            >
+              <div
+                class="h-full flex flex-col justify-center items-center gap-4"
+              >
                 <p class="text-4xl font-black">1</p>
                 <p class="text-sm font-medium">Drag and drop a file here</p>
               </div>
             </div>
             <draggable
-              v-model="primaryDragData" :group="{name: 'files', pull: false, put: primaryDragData.length < 1 }" item-key="id" class="w-full h-full">
-              <template #item="{element}">
-                <div class="w-full h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
+              v-model="primaryDragData"
+              :group="{
+                name: 'files',
+                pull: false,
+                put: primaryDragData.length < 1,
+              }"
+              item-key="id"
+              class="w-full h-full"
+            >
+              <template #item="{ element }">
+                <div
+                  class="w-full h-full p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
+                  :title="element.name"
+                >
                   <div class="h-full">
-                    <span class="material-symbols-outlined mb-2 !text-[32px] block">
-                      {{element.icon}}
+                    <span
+                      class="material-symbols-outlined mb-2 !text-[32px] block"
+                    >
+                      {{ element.icon }}
                     </span>
-                    <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis  leading-tight">
-                      {{element.name}}
+                    <h3
+                      class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight"
+                    >
+                      {{ element.name }}
                     </h3>
-                    <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden  leading-tight">
-                      {{element.parentLog}}
+                    <p
+                      class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight"
+                    >
+                      {{ element.parentLog }}
                     </p>
                   </div>
                   <p class="text-sm text-neutral-500">
-                    {{element.updated_at}}
+                    {{ element.updated_at }}
                   </p>
                 </div>
               </template>
             </draggable>
             <!-- delete icon -->
-            <span v-show="primaryDragData.length > 0" class="material-symbols-outlined material-fill text-neutral-500 bg-neutral-10 block rounded-full absolute -top-[5%] -right-[5%] z-50 cursor-pointer hover:text-danger" @click="primaryDragDelete">do_not_disturb_on</span>
+            <span
+              v-show="primaryDragData.length > 0"
+              class="material-symbols-outlined material-fill text-neutral-500 bg-neutral-10 block rounded-full absolute -top-[5%] -right-[5%] z-50 cursor-pointer hover:text-danger"
+              @click="primaryDragDelete"
+              >do_not_disturb_on</span
+            >
           </div>
           <!-- secondaryDrag -->
-          <div class="relative w-[216px] min-w-[216px] h-full" id="secondaryDragCard">
-            <div v-show="secondaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
-              <div class="h-full flex flex-col justify-center items-center gap-4">
+          <div
+            class="relative w-[216px] min-w-[216px] h-full"
+            id="secondaryDragCard"
+          >
+            <div
+              v-show="secondaryDragData.length === 0"
+              class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute"
+            >
+              <div
+                class="h-full flex flex-col justify-center items-center gap-4"
+              >
                 <p class="text-4xl font-black">2</p>
                 <p class="text-sm font-medium">Drag and drop a file here</p>
               </div>
             </div>
             <draggable
-              v-model="secondaryDragData" :group="{name: 'files', pull: false, put: secondaryDragData.length < 1 }"  item-key="id" class="w-full h-full">
-              <template #item="{element}">
-                <div class="w-full h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
+              v-model="secondaryDragData"
+              :group="{
+                name: 'files',
+                pull: false,
+                put: secondaryDragData.length < 1,
+              }"
+              item-key="id"
+              class="w-full h-full"
+            >
+              <template #item="{ element }">
+                <div
+                  class="w-full h-full p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
+                  :title="element.name"
+                >
                   <div>
-                    <span class="material-symbols-outlined mb-2 !text-[32px] block">
-                      {{element.icon}}
+                    <span
+                      class="material-symbols-outlined mb-2 !text-[32px] block"
+                    >
+                      {{ element.icon }}
                     </span>
-                    <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight">
-                      {{element.name}}
+                    <h3
+                      class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight"
+                    >
+                      {{ element.name }}
                     </h3>
-                    <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight">
-                      {{element.parentLog}}
+                    <p
+                      class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight"
+                    >
+                      {{ element.parentLog }}
                     </p>
                   </div>
                   <p class="text-sm text-neutral-500">
-                    {{element.updated_at}}
+                    {{ element.updated_at }}
                   </p>
                 </div>
               </template>
             </draggable>
             <!-- delete icon -->
-            <span v-show="secondaryDragData.length > 0" class="material-symbols-outlined material-fill bg-neutral-10 text-neutral-500 block rounded-full absolute -top-[5%] -right-[5%] cursor-pointer hover:text-danger" @click="secondaryDragDelete
-            ">do_not_disturb_on</span>
+            <span
+              v-show="secondaryDragData.length > 0"
+              class="material-symbols-outlined material-fill bg-neutral-10 text-neutral-500 block rounded-full absolute -top-[5%] -right-[5%] cursor-pointer hover:text-danger"
+              @click="secondaryDragDelete"
+              >do_not_disturb_on</span
+            >
           </div>
-          <button class="btn btn-sm" :class="isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton" @click="compareSubmit">Compare</button>
+          <button
+            class="btn btn-sm"
+            :class="isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'"
+            :disabled="isCompareDisabledButton"
+            @click="compareSubmit"
+          >
+            Compare
+          </button>
         </div>
       </section>
       <!-- Recently Used -->
       <section v-else>
-        <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
+        <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">
+          Recently Used
+        </h2>
         <!-- card group, up to six items -->
-        <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[184px] scrollbar pb-4">
+        <ul
+          class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[184px] scrollbar pb-4"
+        >
           <!-- card item v-for -->
-          <li class="w-[216px] min-w-[216px] h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
+          <li
+            class="w-[216px] min-w-[216px] h-full p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
+            v-for="(file, index) in recentlyUsedFiles.slice(0, 6)"
+            :key="file.id"
+            @dblclick="enterDiscover(file)"
+            :title="file.name"
+            @contextmenu="onRightClick($event, file)"
+          >
             <div>
               <span class="material-symbols-outlined mb-2 !text-[32px] block">
                 {{ file.icon }}
               </span>
-              <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight">
+              <h3
+                class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight"
+              >
                 {{ file.name }}
               </h3>
-              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight">
+              <p
+                class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight"
+              >
                 {{ file.parentLog }}
               </p>
             </div>
@@ -104,11 +189,21 @@
       <!-- Compare -->
       <section v-if="filesTag === 'COMPARE'">
         <!-- All Files header -->
-        <div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
+        <div
+          class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500"
+        >
           <h2 class="font-bold">All Files</h2>
           <ul class="flex items-center gap-x-4">
             <li>
-              <Dropdown v-model="gridSort" :options="columnType" optionLabel="name" placeholder="Sort" class="w-full !border-neutral-500" inputClass="!text-sm" @change="getGridSortData($event)"></Dropdown>
+              <Dropdown
+                v-model="gridSort"
+                :options="columnType"
+                optionLabel="name"
+                placeholder="Sort"
+                class="w-full !border-neutral-500"
+                inputClass="!text-sm"
+                @change="getGridSortData($event)"
+              ></Dropdown>
             </li>
             <li>
               <IconGrid class="hover:bg-neutral-50 duration-300"></IconGrid>
@@ -116,20 +211,35 @@
           </ul>
         </div>
         <!-- All Files type of grid -->
-         <ul>
-          <draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4
-            flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" id="compareGridCards">
+        <ul>
+          <draggable
+            tag="ul"
+            :list="compareData"
+            :group="{ name: 'files' }"
+            itemKey="name"
+            class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar"
+            id="compareGridCards"
+          >
             <template #item="{ element, index }">
-              <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300
-                flex flex-col justify-between cursor-pointer" :title="element.name" :id="'compareFile' + index">
+              <li
+                class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
+                :title="element.name"
+                :id="'compareFile' + index"
+              >
                 <div>
-                  <span class="material-symbols-outlined mb-2 !text-[32px] block">
+                  <span
+                    class="material-symbols-outlined mb-2 !text-[32px] block"
+                  >
                     {{ element.icon }}
                   </span>
-                  <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight">
+                  <h3
+                    class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight"
+                  >
                     {{ element.name }}
                   </h3>
-                  <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight">
+                  <p
+                    class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight"
+                  >
                     {{ element.parentLog }}
                   </p>
                 </div>
@@ -144,60 +254,173 @@
       <!-- All & Discover -->
       <section v-else>
         <!-- All Files header -->
-        <div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
+        <div
+          class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500"
+        >
           <h2 class="font-bold">All Files</h2>
           <ul class="flex items-center gap-x-4">
             <li v-show="isActive !== null" class="animate-fadein">
-              <ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
+              <ul
+                class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700"
+              >
+                <li>
+                  <span
+                    class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary"
+                    @click="rename"
+                    >edit_square</span
+                  >
+                </li>
+                <li>
+                  <span
+                    class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary"
+                    @click="download"
+                    >download</span
+                  >
+                </li>
+                <li>
+                  <span
+                    class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary"
+                    @click="deleteFile"
+                    >delete</span
+                  >
+                </li>
               </ul>
             </li>
             <li class="cursor-pointer" @click="switchListOrGrid = false">
-              <IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
+              <IconList
+                class="hover:fill-primary hover:bg-neutral-50 duration-300"
+              ></IconList>
             </li>
             <li class="cursor-pointer" @click="switchListOrGrid = true">
-              <IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
+              <IconGrid
+                class="hover:fill-primary hover:bg-neutral-50 duration-300"
+              ></IconGrid>
             </li>
           </ul>
         </div>
         <!-- All Files type of List -->
         <div v-if="!switchListOrGrid">
-          <DataTable :value="allFiles" dataKey="id" tableClass="w-full text-sm cursor-pointer relative table-fixed"
-            :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu
-            v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable" >
-            <Column field="name" header="Name" bodyClass="font-medium fileName"  sortable></Column>
-            <Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
-            <Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
-            <Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
-            <Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
+          <DataTable
+            :value="allFiles"
+            dataKey="id"
+            tableClass="w-full text-sm cursor-pointer relative table-fixed"
+            :rowClass="setRowClass"
+            breakpoint="0"
+            @row-dblclick="enterDiscover($event.data)"
+            contextmenu
+            v-model:contextMenuSelection="selectedTableFile"
+            @row-contextmenu="onRightClickTable"
+          >
+            <Column
+              field="name"
+              header="Name"
+              bodyClass="font-medium fileName"
+              sortable
+            ></Column>
+            <Column
+              field="parentLog"
+              header="Dependency"
+              bodyClass="text-neutral-500"
+              sortable
+            ></Column>
+            <Column
+              field="fileType"
+              header="File Type"
+              bodyClass="text-neutral-500 fileType"
+              sortable
+            ></Column>
+            <Column
+              field="owner.name"
+              header="Owner"
+              bodyClass="text-neutral-500"
+              sortable
+            ></Column>
+            <Column
+              field="updated_at"
+              header="Last Update"
+              bodyClass="text-neutral-500"
+              sortable
+            ></Column>
             <Column bodyClass="text-neutral-500">
               <template #body="slotProps">
-                <ul class="opacity-0 group-hover:opacity-100  flex justify-end items-center gap-x-2 text-neutral-700">
-                  <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">edit_square</span></li>
-                  <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">download</span></li>
-                  <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, slotProps.data.name, 'list-hover')">delete</span></li>
+                <ul
+                  class="opacity-0 group-hover:opacity-100 flex justify-end items-center gap-x-2 text-neutral-700"
+                >
+                  <li>
+                    <span
+                      class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary"
+                      @click="
+                        rename(
+                          slotProps.data.type,
+                          slotProps.data.id,
+                          'list-hover',
+                          slotProps.data.name,
+                        )
+                      "
+                      >edit_square</span
+                    >
+                  </li>
+                  <li>
+                    <span
+                      class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary"
+                      @click="
+                        download(
+                          slotProps.data.type,
+                          slotProps.data.id,
+                          'list-hover',
+                          slotProps.data.name,
+                        )
+                      "
+                      >download</span
+                    >
+                  </li>
+                  <li>
+                    <span
+                      class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary"
+                      @click="
+                        deleteFile(
+                          slotProps.data.type,
+                          slotProps.data.id,
+                          slotProps.data.name,
+                          'list-hover',
+                        )
+                      "
+                      >delete</span
+                    >
+                  </li>
                 </ul>
               </template>
             </Column>
           </DataTable>
         </div>
         <!-- All Files type of grid -->
-        <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" v-else>
-          <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300
-            flex flex-col justify-between cursor-pointer"
-            v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}"
-            @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)"
-            @click="onGridCardClick(file, index)" :id="'li' + index">
+        <ul
+          class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar"
+          v-else
+        >
+          <li
+            class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
+            v-for="(file, index) in allFiles"
+            :key="file.id"
+            :class="{ 'bg-primary/10 border-primary': isActive === index }"
+            @dblclick="enterDiscover(file)"
+            :title="file.name"
+            @contextmenu="onRightClick($event, file)"
+            @click="onGridCardClick(file, index)"
+            :id="'li' + index"
+          >
             <div>
               <span class="material-symbols-outlined mb-2 !text-[32px] block">
                 {{ file.icon }}
               </span>
-              <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight">
+              <h3
+                class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis leading-tight"
+              >
                 {{ file.name }}
               </h3>
-              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight">
+              <p
+                class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden leading-tight"
+              >
                 {{ file.parentLog }}
               </p>
             </div>
@@ -209,12 +432,23 @@
       </section>
     </div>
     <!-- ContextMenu -->
-    <ContextMenu ref="fileRightMenuRef" :model="items" @hide="selectedFile = null" class="cursor-pointer">
+    <ContextMenu
+      ref="fileRightMenuRef"
+      :model="items"
+      @hide="selectedFile = null"
+      class="cursor-pointer"
+    >
       <template #item="{ item }">
-        <a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
+        <a
+          class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20"
+        >
           <span class="material-symbols-outlined">{{ item.icon }}</span>
-          <span class="ml-2 text-sm inline-flex items-center">{{ item.label }}</span>
-          <span v-if="item.shortcut" class="border border-round p-1">{{ item.shortcut }}</span>
+          <span class="ml-2 text-sm inline-flex items-center">{{
+            item.label
+          }}</span>
+          <span v-if="item.shortcut" class="border border-round p-1">{{
+            item.shortcut
+          }}</span>
         </a>
       </template>
     </ContextMenu>
@@ -225,436 +459,497 @@
 // Copyright 2024-2026 DSP, inc.  All rights reserved.
 // Authors:
 //   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
-  /**
-   * @module views/Files/Files File management page with data
-   *   table listing uploaded files, discover/compare navigation,
-   *   and file operations (rename, delete).
-   */
+/**
+ * @module views/Files/Files File management page with data
+ *   table listing uploaded files, discover/compare navigation,
+ *   and file operations (rename, delete).
+ */
 
-  import { ref, computed, watch, onMounted } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { storeToRefs } from 'pinia';
-  import { useMapCompareStore } from '@/stores/mapCompareStore';
-  import { useLoginStore } from '@/stores/login';
-  import { useFilesStore } from '@/stores/files';
-  import { useAllMapDataStore } from '@/stores/allMapData';
-  import { usePageAdminStore } from '@/stores/pageAdmin';
-  import { useLoadingStore } from '@/stores/loading';
-  import IconDataFormat from '@/components/icons/IconDataFormat.vue';
-  import IconRule from '@/components/icons/IconRule.vue';
-  import IconsFilter from '@/components/icons/IconsFilter.vue';
-  import IconFlowChart from '@/components/icons/IconFlowChart.vue';
-  import IconVector from '@/components/icons/IconVector.vue';
-  import IconList from '@/components/icons/IconList.vue';
-  import IconGrid from '@/components/icons/IconGrid.vue';
-  import { renameModal, deleteFileModal, reallyDeleteInformation } from '@/module/alertModal.js';
+import { ref, computed, watch, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useMapCompareStore } from "@/stores/mapCompareStore";
+import { useLoginStore } from "@/stores/login";
+import { useFilesStore } from "@/stores/files";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { usePageAdminStore } from "@/stores/pageAdmin";
+import { useLoadingStore } from "@/stores/loading";
+import IconDataFormat from "@/components/icons/IconDataFormat.vue";
+import IconRule from "@/components/icons/IconRule.vue";
+import IconsFilter from "@/components/icons/IconsFilter.vue";
+import IconFlowChart from "@/components/icons/IconFlowChart.vue";
+import IconVector from "@/components/icons/IconVector.vue";
+import IconList from "@/components/icons/IconList.vue";
+import IconGrid from "@/components/icons/IconGrid.vue";
+import {
+  renameModal,
+  deleteFileModal,
+  reallyDeleteInformation,
+} from "@/module/alertModal.js";
 
-  const router = useRouter();
+const router = useRouter();
 
-  // Stores
-  const mapCompareStore = useMapCompareStore();
-  const loginStore = useLoginStore();
-  const store = useFilesStore();
-  const allMapDataStore = useAllMapDataStore();
-  const pageAdminStore = usePageAdminStore();
-  const loadingStore = useLoadingStore();
+// Stores
+const mapCompareStore = useMapCompareStore();
+const loginStore = useLoginStore();
+const store = useFilesStore();
+const allMapDataStore = useAllMapDataStore();
+const pageAdminStore = usePageAdminStore();
+const loadingStore = useLoadingStore();
 
-  const { dependentsData, filesTag } = storeToRefs(store);
-  const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
-  const { isLoading } = storeToRefs(loadingStore);
+const { dependentsData, filesTag } = storeToRefs(store);
+const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
+const { isLoading } = storeToRefs(loadingStore);
 
-  // Data
-  const isActive = ref(null);
-  const isHover = ref(null);
-  const switchListOrGrid = ref(false);
-  const selectedTableFile = ref(null);
-  const selectedFile = ref(null);
-  const selectedType = ref(null);
-  const selectedId = ref(null);
-  const selectedName = ref(null);
-  const compareData = ref(null);
-  const primaryDragData = ref([]);
-  const secondaryDragData = ref([]);
-  const gridSort = ref(null);
-  const fileRightMenuRef = ref(null);
+// Data
+const isActive = ref(null);
+const isHover = ref(null);
+const switchListOrGrid = ref(false);
+const selectedTableFile = ref(null);
+const selectedFile = ref(null);
+const selectedType = ref(null);
+const selectedId = ref(null);
+const selectedName = ref(null);
+const compareData = ref(null);
+const primaryDragData = ref([]);
+const secondaryDragData = ref([]);
+const gridSort = ref(null);
+const fileRightMenuRef = ref(null);
 
-  const items = [
-    {
-      label: 'Rename',
-      icon: 'edit_square',
-      command: rename,
-    },
-    {
-      label: 'Download',
-      icon: 'download',
-      command: download,
-    },
-    {
-      separator: true
-    },
-    {
-      label: 'Delete',
-      icon: 'delete',
-      command: deleteFile,
-    },
-  ];
+const items = [
+  {
+    label: "Rename",
+    icon: "edit_square",
+    command: rename,
+  },
+  {
+    label: "Download",
+    icon: "download",
+    command: download,
+  },
+  {
+    separator: true,
+  },
+  {
+    label: "Delete",
+    icon: "delete",
+    command: deleteFile,
+  },
+];
 
-  const columnType = [
-    { name: 'By File Name (A to Z)', code: 'nameAscending'},
-    { name: 'By File Name (Z to A)', code: 'nameDescending'},
-    { name: 'By Dependency (A to Z)', code: 'parentLogAscending'},
-    { name: 'By Dependency (Z to A)', code: 'parentLogDescending'},
-    { name: 'By File Type (A to Z)', code: 'fileAscending'},
-    { name: 'By File Type (Z to A)', code: 'fileDescending'},
-    { name: 'By Last Update (A to Z)', code: 'updatedAscending'},
-    { name: 'By Last Update (Z to A)', code: 'updatedDescending'},
-  ];
+const columnType = [
+  { name: "By File Name (A to Z)", code: "nameAscending" },
+  { name: "By File Name (Z to A)", code: "nameDescending" },
+  { name: "By Dependency (A to Z)", code: "parentLogAscending" },
+  { name: "By Dependency (Z to A)", code: "parentLogDescending" },
+  { name: "By File Type (A to Z)", code: "fileAscending" },
+  { name: "By File Type (Z to A)", code: "fileDescending" },
+  { name: "By Last Update (A to Z)", code: "updatedAscending" },
+  { name: "By Last Update (Z to A)", code: "updatedDescending" },
+];
 
-  // Computed
-  /**
-   * Read allFiles
-   */
-  const allFiles = computed(() => {
-    if(store.allFiles.length !== 0){
-      const sortFiles = Array.from(store.allFiles);
-      sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
-      return sortFiles;
-    }
-  });
+// Computed
+/**
+ * Read allFiles
+ */
+const allFiles = computed(() => {
+  if (store.allFiles.length !== 0) {
+    const sortFiles = Array.from(store.allFiles);
+    sortFiles.sort(
+      (x, y) => new Date(y.updated_base) - new Date(x.updated_base),
+    );
+    return sortFiles;
+  }
+});
 
-  /**
-   * Sorts by time; entries without accessed_at are excluded.
-   */
-  const recentlyUsedFiles = computed(() => {
-    let recentlyUsed = Array.from(store.allFiles);
-    recentlyUsed = recentlyUsed.filter(item => item.accessed_at !== null);
-    recentlyUsed.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
-    return recentlyUsed;
-  });
+/**
+ * Sorts by time; entries without accessed_at are excluded.
+ */
+const recentlyUsedFiles = computed(() => {
+  let recentlyUsed = Array.from(store.allFiles);
+  recentlyUsed = recentlyUsed.filter((item) => item.accessed_at !== null);
+  recentlyUsed.sort(
+    (x, y) => new Date(y.accessed_base) - new Date(x.accessed_base),
+  );
+  return recentlyUsed;
+});
 
-  /**
-   * Compare Submit button disabled
-   */
-  const isCompareDisabledButton = computed(() => {
-    return primaryDragData.value.length === 0 || secondaryDragData.value.length === 0;
-  });
+/**
+ * Compare Submit button disabled
+ */
+const isCompareDisabledButton = computed(() => {
+  return (
+    primaryDragData.value.length === 0 || secondaryDragData.value.length === 0
+  );
+});
 
-  /**
-   * Really deleted information
-   */
-  const reallyDeleteData = computed(() => {
-    let result = [];
-    if(store.allFiles.length !== 0){
-      result = JSON.parse(JSON.stringify(store.allFiles));
-      result = result.filter(file => file.is_deleted === true);
-    }
-    return result;
-  });
+/**
+ * Really deleted information
+ */
+const reallyDeleteData = computed(() => {
+  let result = [];
+  if (store.allFiles.length !== 0) {
+    result = JSON.parse(JSON.stringify(store.allFiles));
+    result = result.filter((file) => file.is_deleted === true);
+  }
+  return result;
+});
 
-  // Watch
-  watch(filesTag, (newValue) => {
-    if(newValue !== 'COMPARE'){
-      primaryDragData.value = [];
-      secondaryDragData.value = [];
-    }
-  });
+// Watch
+watch(filesTag, (newValue) => {
+  if (newValue !== "COMPARE") {
+    primaryDragData.value = [];
+    secondaryDragData.value = [];
+  }
+});
 
-  watch(allFiles, (newValue) => {
-    if(newValue !== null) compareData.value = JSON.parse(JSON.stringify(newValue));
-  });
+watch(allFiles, (newValue) => {
+  if (newValue !== null)
+    compareData.value = JSON.parse(JSON.stringify(newValue));
+});
 
-  watch(reallyDeleteData, (newValue, oldValue) => {
-    if(newValue.length !== 0 && oldValue.length === 0){
+watch(
+  reallyDeleteData,
+  (newValue, oldValue) => {
+    if (newValue.length !== 0 && oldValue.length === 0) {
       showReallyDelete();
     }
-  }, { immediate: true });
+  },
+  { immediate: true },
+);
 
-  // Methods
-  /**
-   * Set Row Style
-   */
-  function setRowClass() {
-    return ['group'];
+// Methods
+/**
+ * Set Row Style
+ */
+function setRowClass() {
+  return ["group"];
+}
+
+/**
+ * Set Compare Row Style
+ */
+function setCompareRowClass() {
+  return ["leading-6"];
+}
+
+/**
+ * Selects a file and navigates to the Discover/Compare/Design page.
+ * @param {object} file - The file details.
+ */
+function enterDiscover(file) {
+  let type;
+  let fileId;
+  let params;
+
+  pageAdminStore.setCurrentMapFile(file.name);
+
+  switch (file.type) {
+    case "log":
+      createFilterId.value = null;
+      baseLogId.value = file.id;
+      fileId = file.id;
+      type = file.type;
+      params = { type: type, fileId: fileId };
+      router.push({ name: "Map", params: params });
+      break;
+    case "filter":
+      createFilterId.value = file.id;
+      baseLogId.value = file.parent.id;
+      fileId = file.id;
+      type = file.type;
+      params = { type: type, fileId: fileId };
+      router.push({ name: "Map", params: params });
+      break;
+    case "log-check":
+    case "filter-check":
+      fileId = file.id;
+      type = file.parent.type;
+      params = { type: type, fileId: fileId };
+      router.push({ name: "CheckConformance", params: params });
+      break;
+    default:
+      break;
   }
+}
 
-  /**
-   * Set Compare Row Style
-   */
-  function setCompareRowClass() {
-    return ['leading-6'];
+/**
+ * Right Click DOM Event
+ * @param {Event} event - The mouse event.
+ * @param {string} file file's name
+ */
+function onRightClick(event, file) {
+  selectedType.value = file.type;
+  selectedId.value = file.id;
+  selectedName.value = file.name;
+  fileRightMenuRef.value.show(event);
+}
+
+/**
+ * Right Click Table DOM Event
+ * @param {Event} event - The right-click event with row data.
+ */
+function onRightClickTable(event) {
+  selectedType.value = event.data.type;
+  selectedId.value = event.data.id;
+  selectedName.value = event.data.name;
+  fileRightMenuRef.value.show(event.originalEvent);
+}
+
+/**
+ * Right Click Grid Card DOM Event
+ * @param {object} file - The file object.
+ * @param {number} index - The file index.
+ */
+function onGridCardClick(file, index) {
+  selectedType.value = file.type;
+  selectedId.value = file.id;
+  selectedName.value = file.name;
+  isActive.value = index;
+}
+
+/**
+ * File's Rename
+ * @param {string} type - The file type.
+ * @param {number} id - The file ID.
+ * @param {string} source - The hover icon source.
+ * @param {string} fileName file's name
+ */
+function rename(type, id, source, fileName) {
+  if (type && id && source === "list-hover") {
+    selectedType.value = type;
+    selectedId.value = id;
+    selectedName.value = fileName;
   }
+  renameModal(
+    store.rename,
+    selectedType.value,
+    selectedId.value,
+    selectedName.value,
+  );
+}
 
-  /**
-   * Selects a file and navigates to the Discover/Compare/Design page.
-   * @param {object} file - The file details.
-   */
-  function enterDiscover(file){
-    let type;
-    let fileId;
-    let params;
-
-    pageAdminStore.setCurrentMapFile(file.name);
-
-    switch (file.type) {
-      case 'log':
-        createFilterId.value = null;
-        baseLogId.value = file.id;
-        fileId = file.id;
-        type = file.type;
-        params = { type: type, fileId: fileId };
-        router.push({name: 'Map', params: params});
-        break;
-      case 'filter':
-        createFilterId.value = file.id;
-        baseLogId.value = file.parent.id;
-        fileId = file.id;
-        type = file.type;
-        params = { type: type, fileId: fileId };
-        router.push({name: 'Map', params: params});
-        break;
-      case 'log-check':
-      case 'filter-check':
-        fileId = file.id;
-        type = file.parent.type;
-        params = { type: type, fileId: fileId };
-        router.push({name: 'CheckConformance', params: params});
-        break;
-      default:
-        break;
-    }
+/**
+ * Delete file
+ * @param {string} type - The file type.
+ * @param {number} id - The file ID.
+ * @param {string} name - The file name.
+ * @param {string} source - The hover icon source.
+ */
+async function deleteFile(type, id, name, source) {
+  let srt = "";
+  let data = [];
+  // Check if the action comes from the hover icon menu
+  if (type && id && name && source === "list-hover") {
+    selectedType.value = type;
+    selectedId.value = id;
+    selectedName.value = name;
   }
-
-  /**
-   * Right Click DOM Event
-   * @param {Event} event - The mouse event.
-   * @param {string} file file's name
-   */
-  function onRightClick(event, file) {
-    selectedType.value = file.type;
-    selectedId.value = file.id;
-    selectedName.value = file.name;
-    fileRightMenuRef.value.show(event);
-  }
-
-  /**
-   * Right Click Table DOM Event
-   * @param {Event} event - The right-click event with row data.
-   */
-  function onRightClickTable(event) {
-    selectedType.value = event.data.type;
-    selectedId.value = event.data.id;
-    selectedName.value = event.data.name;
-    fileRightMenuRef.value.show(event.originalEvent);
-  }
-
-  /**
-   * Right Click Grid Card DOM Event
-   * @param {object} file - The file object.
-   * @param {number} index - The file index.
-   */
-  function onGridCardClick(file, index) {
-    selectedType.value = file.type;
-    selectedId.value = file.id;
-    selectedName.value = file.name;
-    isActive.value = index;
-  }
-
-  /**
-   * File's Rename
-   * @param {string} type - The file type.
-   * @param {number} id - The file ID.
-   * @param {string} source - The hover icon source.
-   * @param {string} fileName file's name
-   */
-  function rename(type, id, source, fileName) {
-    if(type && id && source === 'list-hover') {
-      selectedType.value = type;
-      selectedId.value = id;
-      selectedName.value = fileName;
-    }
-    renameModal(store.rename, selectedType.value, selectedId.value, selectedName.value);
-  }
-
-  /**
-   * Delete file
-   * @param {string} type - The file type.
-   * @param {number} id - The file ID.
-   * @param {string} name - The file name.
-   * @param {string} source - The hover icon source.
-   */
-  async function deleteFile(type, id, name, source) {
-    let srt = '';
-    let data = [];
-    // Check if the action comes from the hover icon menu
-    if(type && id && name && source === 'list-hover') {
-      selectedType.value = type;
-      selectedId.value = id;
-      selectedName.value = name;
-    }
-    // Fetch dependent files
-    await store.getDependents(selectedType.value, selectedId.value);
-    if(dependentsData.value.length !== 0) {
-      data = [...dependentsData.value];
-      data.forEach(i => {
-        switch (i.type) {
-          case 'log-check':
-            i.type = 'rule';
-            break;
-          case 'filter-check':
-            i.type = 'rule';
-            break;
-          default:
-            break;
-        }
-        const content = `<li>[${i.type}] ${i.name}</li>`;
-        srt += content;
-      });
-    }
-    deleteFileModal(srt, selectedType.value, selectedId.value, selectedName.value);
-    srt = '';
-  }
-
-  /**
-   * Shows files deleted by admin or by other accounts.
-   */
-  function showReallyDelete(){
-    let srt = '';
-
-    if(reallyDeleteData.value.length !== 0) {
-      reallyDeleteData.value.forEach(file => {
-        switch (file.type) {
-          case 'log-check':
-          case 'filter-check':
-          default:
-            file.type = 'rule';
-            break;
-        }
-
-        const content = `<li>[${file.type}] ${file.name}</li>`;
-        srt += content;
-      });
-    }
-    reallyDeleteInformation(srt, reallyDeleteData.value);
-    srt = '';
-  }
-
-  /**
-   * Download file as CSV
-   * @param {string} type - The file type.
-   * @param {number} id - The file ID.
-   * @param {string} source - The hover icon source.
-   * @param {string} name - The file name.
-   */
-  function download(type, id, source, name) {
-    if(type && id && source === 'list-hover' && name) {
-      selectedType.value = type;
-      selectedId.value = id;
-      selectedName.value = name;
-    }
-    store.downloadFileCSV(selectedType.value, selectedId.value, selectedName.value);
-  }
-
-  /**
-   * Delete Compare Primary log
-   */
-  function primaryDragDelete() {
-    compareData.value.unshift(primaryDragData.value[0]);
-    primaryDragData.value.length = 0;
-  }
-
-  /**
-   * Delete Compare Secondary log
-   */
-  function secondaryDragDelete() {
-    compareData.value.unshift(secondaryDragData.value[0]);
-    secondaryDragData.value.length = 0;
-  }
-
-  /**
-   * Enter the Compare page
-   */
-  function compareSubmit() {
-    const primaryType = primaryDragData.value[0].type;
-    const secondaryType = secondaryDragData.value[0].type;
-    const primaryId = primaryDragData.value[0].id;
-    const secondaryId = secondaryDragData.value[0].id;
-    const params = { primaryType: primaryType, primaryId: primaryId, secondaryType: secondaryType, secondaryId: secondaryId };
-
-    mapCompareStore.setCompareRouteParam(primaryType, primaryId, secondaryType, secondaryId);
-    router.push({name: 'CompareDashboard', params: params});
-  }
-
-  /**
-   * Filter/sort handler for the grid view template.
-   * @param {event} event choose columnType item
-   */
-  function getGridSortData(event) {
-    const code = event.value.code;
-
-    // Text sorting: convert the name field to lowercase for comparison using localeCompare()
-    switch (code) {
-      case 'nameAscending':
-        compareData.value = compareData.value.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
-        break;
-      case 'nameDescending':
-        compareData.value = compareData.value.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse();
-        break;
-      case 'parentLogAscending':
-        compareData.value = compareData.value.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()));
-        break;
-      case 'parentLogDescending':
-        compareData.value = compareData.value.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse();
-        break;
-      case 'fileAscending':
-        compareData.value = compareData.value.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()));
-        break;
-      case 'fileDescending':
-        compareData.value = compareData.value.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse();
-        break;
-      case 'updatedAscending':
-        compareData.value = compareData.value.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base));
-        break;
-      case 'updatedDescending':
-        compareData.value = compareData.value.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse();
-        break;
-    }
-  }
-
-  // Mounted
-  onMounted(() => {
-    isLoading.value = true;
-    store.fetchAllFiles();
-    window.addEventListener('click', (e) => {
-      const clickedLi = e.target.closest('li');
-      if(!clickedLi || !clickedLi.id.startsWith('li')) isActive.value = null;
+  // Fetch dependent files
+  await store.getDependents(selectedType.value, selectedId.value);
+  if (dependentsData.value.length !== 0) {
+    data = [...dependentsData.value];
+    data.forEach((i) => {
+      switch (i.type) {
+        case "log-check":
+          i.type = "rule";
+          break;
+        case "filter-check":
+          i.type = "rule";
+          break;
+        default:
+          break;
+      }
+      const content = `<li>[${i.type}] ${i.name}</li>`;
+      srt += content;
     });
-    // Add the .scrollbar class to the DataTable tbody
-    const tbodyElement = document.querySelector('.p-datatable-tbody');
-    tbodyElement?.classList.add('scrollbar');
-    isLoading.value = false;
+  }
+  deleteFileModal(
+    srt,
+    selectedType.value,
+    selectedId.value,
+    selectedName.value,
+  );
+  srt = "";
+}
+
+/**
+ * Shows files deleted by admin or by other accounts.
+ */
+function showReallyDelete() {
+  let srt = "";
+
+  if (reallyDeleteData.value.length !== 0) {
+    reallyDeleteData.value.forEach((file) => {
+      switch (file.type) {
+        case "log-check":
+        case "filter-check":
+        default:
+          file.type = "rule";
+          break;
+      }
+
+      const content = `<li>[${file.type}] ${file.name}</li>`;
+      srt += content;
+    });
+  }
+  reallyDeleteInformation(srt, reallyDeleteData.value);
+  srt = "";
+}
+
+/**
+ * Download file as CSV
+ * @param {string} type - The file type.
+ * @param {number} id - The file ID.
+ * @param {string} source - The hover icon source.
+ * @param {string} name - The file name.
+ */
+function download(type, id, source, name) {
+  if (type && id && source === "list-hover" && name) {
+    selectedType.value = type;
+    selectedId.value = id;
+    selectedName.value = name;
+  }
+  store.downloadFileCSV(
+    selectedType.value,
+    selectedId.value,
+    selectedName.value,
+  );
+}
+
+/**
+ * Delete Compare Primary log
+ */
+function primaryDragDelete() {
+  compareData.value.unshift(primaryDragData.value[0]);
+  primaryDragData.value.length = 0;
+}
+
+/**
+ * Delete Compare Secondary log
+ */
+function secondaryDragDelete() {
+  compareData.value.unshift(secondaryDragData.value[0]);
+  secondaryDragData.value.length = 0;
+}
+
+/**
+ * Enter the Compare page
+ */
+function compareSubmit() {
+  const primaryType = primaryDragData.value[0].type;
+  const secondaryType = secondaryDragData.value[0].type;
+  const primaryId = primaryDragData.value[0].id;
+  const secondaryId = secondaryDragData.value[0].id;
+  const params = {
+    primaryType: primaryType,
+    primaryId: primaryId,
+    secondaryType: secondaryType,
+    secondaryId: secondaryId,
+  };
+
+  mapCompareStore.setCompareRouteParam(
+    primaryType,
+    primaryId,
+    secondaryType,
+    secondaryId,
+  );
+  router.push({ name: "CompareDashboard", params: params });
+}
+
+/**
+ * Filter/sort handler for the grid view template.
+ * @param {event} event choose columnType item
+ */
+function getGridSortData(event) {
+  const code = event.value.code;
+
+  // Text sorting: convert the name field to lowercase for comparison using localeCompare()
+  switch (code) {
+    case "nameAscending":
+      compareData.value = compareData.value.sort((a, b) =>
+        a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
+      );
+      break;
+    case "nameDescending":
+      compareData.value = compareData.value
+        .sort((a, b) =>
+          a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
+        )
+        .reverse();
+      break;
+    case "parentLogAscending":
+      compareData.value = compareData.value.sort((a, b) =>
+        a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()),
+      );
+      break;
+    case "parentLogDescending":
+      compareData.value = compareData.value
+        .sort((a, b) =>
+          a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()),
+        )
+        .reverse();
+      break;
+    case "fileAscending":
+      compareData.value = compareData.value.sort((a, b) =>
+        a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()),
+      );
+      break;
+    case "fileDescending":
+      compareData.value = compareData.value
+        .sort((a, b) =>
+          a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()),
+        )
+        .reverse();
+      break;
+    case "updatedAscending":
+      compareData.value = compareData.value.sort(
+        (a, b) => new Date(a.updated_base) - new Date(b.updated_base),
+      );
+      break;
+    case "updatedDescending":
+      compareData.value = compareData.value
+        .sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base))
+        .reverse();
+      break;
+  }
+}
+
+// Mounted
+onMounted(() => {
+  isLoading.value = true;
+  store.fetchAllFiles();
+  window.addEventListener("click", (e) => {
+    const clickedLi = e.target.closest("li");
+    if (!clickedLi || !clickedLi.id.startsWith("li")) isActive.value = null;
   });
+  // Add the .scrollbar class to the DataTable tbody
+  const tbodyElement = document.querySelector(".p-datatable-tbody");
+  tbodyElement?.classList.add("scrollbar");
+  isLoading.value = false;
+});
 </script>
 <style scoped>
 @reference "../../assets/tailwind.css";
 :deep(thead) {
-  @apply sticky top-0 bg-neutral-10 after:border-b after:border-neutral-500 after:w-full after:left-0 after:bottom-0 after:absolute table table-fixed w-full
+  @apply sticky top-0 bg-neutral-10 after:border-b after:border-neutral-500 after:w-full after:left-0 after:bottom-0 after:absolute table table-fixed w-full;
 }
 :deep(tbody) {
-  @apply overflow-y-auto overflow-x-hidden max-h-[calc(100vh_-_480px)] block
+  @apply overflow-y-auto overflow-x-hidden max-h-[calc(100vh_-_480px)] block;
 }
 :deep(table th) {
-  @apply border-b !border-neutral-500 !p-2 text-left font-bold !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
+  @apply border-b !border-neutral-500 !p-2 text-left font-bold !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis;
 }
 :deep(table td) {
-  @apply border-b border-neutral-300 !p-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis
+  @apply border-b border-neutral-300 !p-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis;
 }
 :deep(tbody > tr) {
-  @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none table table-fixed w-full
+  @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none table table-fixed w-full;
 }
 :deep(.p-sortable-column) {
-  @apply focus:!shadow-none !text-neutral-900
+  @apply focus:!shadow-none !text-neutral-900;
 }
 :deep(.p-sortable-column-icon) {
-  @apply !text-[#6c757d]
+  @apply !text-[#6c757d];
 }
 </style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 6b3dc0f..9399fc6 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -3,41 +3,73 @@
     <div class="flex justify-center items-center min-h-full">
       <div class="w-full max-w-md p-8">
         <h2 class="text-center text-2xl mb-4 font-semibold">LOGIN</h2>
-        <form action="#" method="post" class="w-full grid gap-2" @submit.prevent="signIn">
+        <form
+          action="#"
+          method="post"
+          class="w-full grid gap-2"
+          @submit.prevent="signIn"
+        >
           <label for="account" class="relative">
             <p class="text-sm font-normal mb-2">Account</p>
-            <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
-              <IconMember class="h-5 w-5 fill-current"/>
+            <span
+              class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]"
+            >
+              <IconMember class="h-5 w-5 fill-current" />
             </span>
-            <input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none  focus:border-primary focus:ring-1 "
-              :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username"
+            <input
+              type="text"
+              id="account"
+              class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1"
+              :class="{ 'border-danger': isInvalid }"
+              required
+              autofocus
+              v-model.trim="auth.username"
               @change="changeHandler($event)"
-              @focus="onInputAccountFocus"/>
+              @focus="onInputAccountFocus"
+            />
           </label>
           <label for="passwordt" class="relative block">
             <p class="text-sm font-normal mb-2">Password</p>
-            <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
-              <IconLockKey class="h-5 w-5 fill-current"/>
+            <span
+              class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]"
+            >
+              <IconLockKey class="h-5 w-5 fill-current" />
             </span>
-            <input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon"
-              class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none   focus:border-primary focus:ring-1 "
-              :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"
-              @focus="onInputPwdFocus"/>
-            <span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password"
-              @click="showPassword = !showPassword">
-              <IconEyeOpen class="h-5 w-5" v-if="showPassword"/>
-              <IconEyeClose class="h-5 w-5" v-else/>
+            <input
+              :type="showPassword ? 'text' : 'password'"
+              id="password"
+              aria-describedby="password-addon"
+              class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1"
+              :class="{ 'border-danger': isInvalid }"
+              required
+              v-model.trim="auth.password"
+              @change="changeHandler($event)"
+              @focus="onInputPwdFocus"
+            />
+            <span
+              class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer"
+              v-show="auth.password"
+              @click="showPassword = !showPassword"
+            >
+              <IconEyeOpen class="h-5 w-5" v-if="showPassword" />
+              <IconEyeClose class="h-5 w-5" v-else />
             </span>
           </label>
           <p class="my-4 text-danger">
             <span v-show="isInvalid">
-              <IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>
-                Incorrect account or password.
+              <IconWarnTriangle
+                class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"
+              />
+              Incorrect account or password.
             </span>
           </p>
-          <button id="login_btn_main_btn" type="submit" class="w-full btn btn-lg"
+          <button
+            id="login_btn_main_btn"
+            type="submit"
+            class="w-full btn btn-lg"
             :class="isDisabledButton ? 'btn-disable' : 'btn-c-primary'"
-            :disabled="isDisabledButton">
+            :disabled="isDisabledButton"
+          >
             Log in
           </button>
         </form>
@@ -56,15 +88,15 @@
  *   form, password visibility toggle, and return-to URL support.
  */
 
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useLoginStore } from '@/stores/login';
-import IconMember from '@/components/icons/IconMember.vue';
-import IconLockKey from '@/components/icons/IconLockKey.vue';
-import IconEyeOpen from '@/components/icons/IconEyeOpen.vue';
-import IconEyeClose from '@/components/icons/IconEyeClose.vue';
-import IconWarnTriangle from '@/components/icons/IconWarnTriangle.vue';
+import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useLoginStore } from "@/stores/login";
+import IconMember from "@/components/icons/IconMember.vue";
+import IconLockKey from "@/components/icons/IconLockKey.vue";
+import IconEyeOpen from "@/components/icons/IconEyeOpen.vue";
+import IconEyeClose from "@/components/icons/IconEyeClose.vue";
+import IconWarnTriangle from "@/components/icons/IconWarnTriangle.vue";
 
 const route = useRoute();
 
@@ -80,7 +112,9 @@ const isJustFocus = ref(true);
 
 // Computed
 const isDisabledButton = computed(() => {
-  return auth.value.username === '' || auth.value.password === '' || isInvalid.value;
+  return (
+    auth.value.username === "" || auth.value.password === "" || isInvalid.value
+  );
 });
 
 // Methods
@@ -90,39 +124,37 @@ const isDisabledButton = computed(() => {
  */
 function changeHandler(event) {
   const inputValue = event.target.value;
-  if(inputValue !== '') {
+  if (inputValue !== "") {
     isInvalid.value = false;
   }
 }
 
-function onInputAccountFocus(){
-}
+function onInputAccountFocus() {}
 
-function onInputPwdFocus(){
-}
+function onInputPwdFocus() {}
 
 // Created logic
 // Handle the case where a user pastes a page URL into the browser without being logged in
 // btoa: Base64-encode the string
-if(route.query['return-to']) {
-  setRememberedReturnToUrl(route.query['return-to']);
+if (route.query["return-to"]) {
+  setRememberedReturnToUrl(route.query["return-to"]);
 }
 </script>
 
 <style scoped>
-  /* Hide the eyes from a password input in MS Edge */
-  input::-ms-reveal,
-  input::-ms-clear {
-    display: none;
-  }
-  /* Hide the keys from the inputs in safair */
-  input::-webkit-contacts-auto-fill-button,
-  input::-webkit-credentials-auto-fill-button {
-    visibility: hidden;
-    display: none !important;
-    pointer-events: none;
-    height: 0;
-    width: 0;
-    margin: 0;
-  }
+/* Hide the eyes from a password input in MS Edge */
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+/* Hide the keys from the inputs in safair */
+input::-webkit-contacts-auto-fill-button,
+input::-webkit-credentials-auto-fill-button {
+  visibility: hidden;
+  display: none !important;
+  pointer-events: none;
+  height: 0;
+  width: 0;
+  margin: 0;
+}
 </style>
diff --git a/src/views/MemberArea/index.vue b/src/views/MemberArea/index.vue
index 92339d3..3961a5c 100644
--- a/src/views/MemberArea/index.vue
+++ b/src/views/MemberArea/index.vue
@@ -22,9 +22,9 @@
  *   logged-in user's profile information.
  */
 
-import { onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useLoginStore } from '@/stores/login';
+import { onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { useLoginStore } from "@/stores/login";
 
 const store = useLoginStore();
 const { userData } = storeToRefs(store);
diff --git a/src/views/NotFound404.vue b/src/views/NotFound404.vue
index 6ff590f..aef0142 100644
--- a/src/views/NotFound404.vue
+++ b/src/views/NotFound404.vue
@@ -1,14 +1,16 @@
 <template>
   <header id="notfound_404">
-    <Header/>
-    <Navbar/>
+    <Header />
+    <Navbar />
   </header>
   <main>
     <div class="container text-center pt-7 pb-12">
       <h2 class="mb-7">404</h2>
       <p>The page you are looking for does not exist.</p>
       <p class="mb-7">Please check the URL or go back to the Files page.</p>
-      <router-link to="/files" class="btn btn-c-primary btn-lg">Go to Files</router-link>
+      <router-link to="/files" class="btn btn-c-primary btn-lg"
+        >Go to Files</router-link
+      >
     </div>
   </main>
 </template>
diff --git a/src/views/Upload/index.vue b/src/views/Upload/index.vue
index 23b80b7..6a41c33 100644
--- a/src/views/Upload/index.vue
+++ b/src/views/Upload/index.vue
@@ -1,56 +1,100 @@
 <template>
-  <section class="h-screen-main w-full px-4 flex flex-col justify-between items-start">
+  <section
+    class="h-screen-main w-full px-4 flex flex-col justify-between items-start"
+  >
     <!-- Upload Content -->
     <div class="w-full h-[calc(100%_-_64px)]">
       <!-- File name -->
       <!-- cursor-pointer -->
       <div class="h-12 pl-1 border-b border-neutral-300 flex items-center">
-        <InputText type="text" v-model="fileName" id="fileNameInput" class="rounded !border-transparent !font-bold !text-base !py-1 min-w-[1px] w-auto" @input="onInput" @blur="onBlur" maxlength="200" title="Rename"/>
+        <InputText
+          type="text"
+          v-model="fileName"
+          id="fileNameInput"
+          class="rounded !border-transparent !font-bold !text-base !py-1 min-w-[1px] w-auto"
+          @input="onInput"
+          @blur="onBlur"
+          maxlength="200"
+          title="Rename"
+        />
       </div>
       <!-- Upload notification -->
       <div class="flex justify-start items-center space-x-2 ml-2 py-2">
-        <span class="material-symbols-outlined text-neutral-700 cursor-pointer" v-tooltip.right="tooltipUpload">info</span>
+        <span
+          class="material-symbols-outlined text-neutral-700 cursor-pointer"
+          v-tooltip.right="tooltipUpload"
+          >info</span
+        >
         <span class="w-px h-7 bg-neutral-300"></span>
         <!-- Upload text -->
         <div>
           <div v-if="!isDisabled"></div>
-          <div v-else class="flex justify-start items-center space-x-2 duration-700">
+          <div
+            v-else
+            class="flex justify-start items-center space-x-2 duration-700"
+          >
             <p v-if="informData.length !== 0" class="text-primary text-sm">
               Need to select
-              <span v-for="(item, index) in informData" :key="index">{{ item.label }}<span v-if="index !== informData.length - 1">, </span></span>.
+              <span v-for="(item, index) in informData" :key="index"
+                >{{ item.label
+                }}<span v-if="index !== informData.length - 1">, </span></span
+              >.
             </p>
             <div v-if="repeatedData.length !== 0" class="duration-700">
               <p v-if="repeatedData.length === 1" class="text-danger text-sm">
-                {{repeatedData[0].label}} has been assigned.
+                {{ repeatedData[0].label }} has been assigned.
               </p>
               <p v-else class="text-danger text-sm">
-                <span v-for="(item, index) in repeatedData" :key="index">{{ item.label }}<span v-if="index !== repeatedData.length - 1">, </span></span>
+                <span v-for="(item, index) in repeatedData" :key="index"
+                  >{{ item.label
+                  }}<span v-if="index !== repeatedData.length - 1"
+                    >,
+                  </span></span
+                >
                 have been assigned.
               </p>
             </div>
           </div>
         </div>
-        </div>
+      </div>
       <!-- Upload table -->
-      <div class="overflow-y-auto overflow-x-auto scrollbar max-h-[calc(100%_-_94px)]">
-        <table class="text-sm border-separate border-spacing-0 h-full overflow-y-auto overflow-x-auto scrollbar">
-          <caption class="hidden">Upload</caption>
+      <div
+        class="overflow-y-auto overflow-x-auto scrollbar max-h-[calc(100%_-_94px)]"
+      >
+        <table
+          class="text-sm border-separate border-spacing-0 h-full overflow-y-auto overflow-x-auto scrollbar"
+        >
+          <caption class="hidden">
+            Upload
+          </caption>
           <thead class="sticky top-0 bg-neutral-10">
-            <tr class="hidden"><th></th></tr>
-            <tr>
-              <td v-for="(item, index) in uploadDetail?.columns" :key="index" class="border border-neutral-500 p-2 truncate max-w-[198px]">{{ item }}</td>
+            <tr class="hidden">
+              <th></th>
             </tr>
             <tr>
-              <td v-for="(item, index) in uploadDetail?.columns" :key="index" class="px-2 py-1 bg-neutral-300 border border-neutral-500 max-w-[198px]">
+              <td
+                v-for="(item, index) in uploadDetail?.columns"
+                :key="index"
+                class="border border-neutral-500 p-2 truncate max-w-[198px]"
+              >
+                {{ item }}
+              </td>
+            </tr>
+            <tr>
+              <td
+                v-for="(item, index) in uploadDetail?.columns"
+                :key="index"
+                class="px-2 py-1 bg-neutral-300 border border-neutral-500 max-w-[198px]"
+              >
                 <Dropdown
-                v-model="selectedColumns[index]"
-                :options="columnType"
-                optionLabel="name"
-                placeholder=""
-                class="w-[180px] !border-neutral-500 "
-                :data-type="item"
-                :inputId="index.toString()"
-                :inputClass="[selectedColumns[index]?.color, 'text-sm']"
+                  v-model="selectedColumns[index]"
+                  :options="columnType"
+                  optionLabel="name"
+                  placeholder=""
+                  class="w-[180px] !border-neutral-500"
+                  :data-type="item"
+                  :inputId="index.toString()"
+                  :inputClass="[selectedColumns[index]?.color, 'text-sm']"
                 >
                   <template #option="slotProps">
                     <div :class="slotProps.option.color" class="text-sm">
@@ -63,7 +107,13 @@
           </thead>
           <tbody>
             <tr v-for="(item, index) in uploadDetail?.data" :key="index">
-              <td v-for="(itemDetail, key) in item" :key="key" class="border border-neutral-500 p-2 truncate max-w-[198px]">{{ itemDetail }}</td>
+              <td
+                v-for="(itemDetail, key) in item"
+                :key="key"
+                class="border border-neutral-500 p-2 truncate max-w-[198px]"
+              >
+                {{ itemDetail }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -71,10 +121,22 @@
     </div>
     <!-- Upload button -->
     <div class="w-full text-right space-x-4 px-8 py-4">
-      <button type="button" class="btn btn-sm btn-neutral" @click="cancel">Cancel</button>
-      <button type="button" class="btn btn-sm btn-neutral" @click="reset">Reset</button>
-      <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabled" :class="isDisabled ? 'btn-disable' : 'btn-neutral'">Upload</button>
-      </div>
+      <button type="button" class="btn btn-sm btn-neutral" @click="cancel">
+        Cancel
+      </button>
+      <button type="button" class="btn btn-sm btn-neutral" @click="reset">
+        Reset
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm"
+        @click="submit"
+        :disabled="isDisabled"
+        :class="isDisabled ? 'btn-disable' : 'btn-neutral'"
+      >
+        Upload
+      </button>
+    </div>
   </section>
 </template>
 <script>
@@ -90,27 +152,31 @@
  *   upload submission.
  */
 
-import { useFilesStore } from '@/stores/files';
+import { useFilesStore } from "@/stores/files";
 
 export default {
-  beforeRouteEnter(to, from, next){
+  beforeRouteEnter(to, from, next) {
     // An uploadID is required to enter this page
-    next(vm => {
+    next((vm) => {
       const filesStore = useFilesStore();
-      if(filesStore.uploadId === null) {
-        vm.$router.push({name: 'Files', replace: true});
-        vm.$toast.default('Please upload your file.', {position: 'bottom'});
+      if (filesStore.uploadId === null) {
+        vm.$router.push({ name: "Files", replace: true });
+        vm.$toast.default("Please upload your file.", { position: "bottom" });
       }
-    })
+    });
   },
-}
+};
 </script>
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
-import { useRouter } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
-import { uploadFailedFirst, uploadSuccess, uploadConfirm } from '@/module/alertModal.js'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useLoadingStore } from "@/stores/loading";
+import {
+  uploadFailedFirst,
+  uploadSuccess,
+  uploadConfirm,
+} from "@/module/alertModal.js";
 
 const router = useRouter();
 
@@ -128,21 +194,70 @@ const tooltipUpload = {
     4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
     5. Status: Activity status, such as Start or Complete.
     6. Attribute: A property that can be associated with a case to provide additional information about that case.`,
-    // Resource is not available yet
-    // 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
- class: '!max-w-[400px] !text-[10px] !opacity-80',
- autoHide: false,
+  // Resource is not available yet
+  // 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
+  class: "!max-w-[400px] !text-[10px] !opacity-80",
+  autoHide: false,
 };
 
 const columnType = [
-  { name: 'Case ID*', code: 'case_id', color: '!text-secondary', value: '', label: 'Case ID', required: true },
-  { name: 'Timestamp*', code: 'timestamp', color: '!text-secondary', value: '', label: 'Timestamp', required: true },
-  { name: 'Status*', code: 'status', color: '!text-secondary', value: '', label: 'Status', required: true },
-  { name: 'Activity*', code: 'name', color: '!text-secondary', value: '', label: 'Activity', required: true },
-  { name: 'Activity Instance ID*', code: 'instance', color: '!text-secondary', value: '', label: 'Activity Instance ID', required: true },
-  { name: 'Case Attribute', code: 'case_attributes', color: '!text-primary', value: '', label: 'Case Attribute', required: false },
+  {
+    name: "Case ID*",
+    code: "case_id",
+    color: "!text-secondary",
+    value: "",
+    label: "Case ID",
+    required: true,
+  },
+  {
+    name: "Timestamp*",
+    code: "timestamp",
+    color: "!text-secondary",
+    value: "",
+    label: "Timestamp",
+    required: true,
+  },
+  {
+    name: "Status*",
+    code: "status",
+    color: "!text-secondary",
+    value: "",
+    label: "Status",
+    required: true,
+  },
+  {
+    name: "Activity*",
+    code: "name",
+    color: "!text-secondary",
+    value: "",
+    label: "Activity",
+    required: true,
+  },
+  {
+    name: "Activity Instance ID*",
+    code: "instance",
+    color: "!text-secondary",
+    value: "",
+    label: "Activity Instance ID",
+    required: true,
+  },
+  {
+    name: "Case Attribute",
+    code: "case_attributes",
+    color: "!text-primary",
+    value: "",
+    label: "Case Attribute",
+    required: false,
+  },
   // { name: 'Resource', code: '', color: '', value: '', label: 'Resource', required: false }, // Not available yet; may be added in the future
-  { name: 'Not Assigned', code: '', color: '!text-neutral-700', value: '', label: 'Not Assigned', required: false },
+  {
+    name: "Not Assigned",
+    code: "",
+    color: "!text-neutral-700",
+    value: "",
+    label: "Not Assigned",
+    required: false,
+  },
 ];
 
 const selectedColumns = ref([]);
@@ -156,15 +271,23 @@ const isDisabled = computed(() => {
   // 1. Length must match; every column must be assigned
   // 2. Must not be null or undefined
   const hasValue = !selectedColumns.value.includes(undefined);
-  const result = !(selectedColumns.value.length === uploadDetail.value?.columns.length
-    && informData.value.length === 0 && repeatedData.value.length === 0 && hasValue);
+  const result = !(
+    selectedColumns.value.length === uploadDetail.value?.columns.length &&
+    informData.value.length === 0 &&
+    repeatedData.value.length === 0 &&
+    hasValue
+  );
   return result;
 });
 
 // Watch
-watch(selectedColumns, (newVal) => {
-  updateValidationData(newVal);
-}, { deep: true });
+watch(
+  selectedColumns,
+  (newVal) => {
+    updateValidationData(newVal);
+  },
+  { deep: true },
+);
 
 // Methods
 /**
@@ -174,14 +297,14 @@ watch(selectedColumns, (newVal) => {
 function onBlur(e) {
   const baseWidth = 20;
 
-  if(e.target.value === '') {
+  if (e.target.value === "") {
     e.target.value = uploadFileName.value;
     const textWidth = getTextWidth(e.target.value, e.target);
-    e.target.style.width = baseWidth + textWidth + 'px';
-  }else if(e.target.value !== e.target.value.trim()) {
+    e.target.style.width = baseWidth + textWidth + "px";
+  } else if (e.target.value !== e.target.value.trim()) {
     e.target.value = e.target.value.trim();
     const textWidth = getTextWidth(e.target.value, e.target);
-    e.target.style.width = baseWidth + textWidth + 'px';
+    e.target.style.width = baseWidth + textWidth + "px";
   }
 }
 
@@ -193,7 +316,7 @@ function onInput(e) {
   const baseWidth = 20;
   const textWidth = getTextWidth(e.target.value, e.target);
 
-  e.target.style.width = baseWidth + textWidth + 'px';
+  e.target.style.width = baseWidth + textWidth + "px";
 }
 
 /**
@@ -204,12 +327,12 @@ function onInput(e) {
  */
 function getTextWidth(text, e) {
   // Replace spaces with non-breaking spaces
-  const processedText = text.replace(/ /g, '\u00a0');
-  const hiddenSpan = document.createElement('span');
+  const processedText = text.replace(/ /g, "\u00a0");
+  const hiddenSpan = document.createElement("span");
 
   hiddenSpan.innerHTML = processedText;
   hiddenSpan.style.font = window.getComputedStyle(e).font;
-  hiddenSpan.style.visibility = 'hidden';
+  hiddenSpan.style.visibility = "hidden";
   document.body.appendChild(hiddenSpan);
   const width = hiddenSpan.getBoundingClientRect().width;
   document.body.removeChild(hiddenSpan);
@@ -224,28 +347,32 @@ function getTextWidth(text, e) {
 function updateValidationData(data) {
   const nameOccurrences = {};
   const noSortedRepeatedData = []; // Unsorted duplicate selections
-  const selectedData = [] // Already selected data
+  const selectedData = []; // Already selected data
 
   informData.value = []; // Not yet selected data
   repeatedData.value = []; // Duplicate selections
 
-  data.forEach(item => {
+  data.forEach((item) => {
     const { name, code } = item;
 
-    if(nameOccurrences[name]) {
+    if (nameOccurrences[name]) {
       // 'Not Assigned' and 'Case Attribute' are excluded from validation
-      if(!code || code === 'case_attributes') return;
+      if (!code || code === "case_attributes") return;
       nameOccurrences[name]++;
       // Each duplicate option should only appear once
-      if(nameOccurrences[name] === 2){
-        noSortedRepeatedData.push(item)
+      if (nameOccurrences[name] === 2) {
+        noSortedRepeatedData.push(item);
       }
       // Sort according to the dropdown menu order
-      repeatedData.value = columnType.filter(column => noSortedRepeatedData.includes(column));
-    }else {
+      repeatedData.value = columnType.filter((column) =>
+        noSortedRepeatedData.includes(column),
+      );
+    } else {
       nameOccurrences[name] = 1;
       selectedData.push(name);
-      informData.value = columnType.filter(item => item.required ? !selectedData.includes(item.name) : false);
+      informData.value = columnType.filter((item) =>
+        item.required ? !selectedData.includes(item.name) : false,
+      );
     }
   });
 }
@@ -259,19 +386,19 @@ function reset() {
 /** Navigates back to the Files page without uploading. */
 function cancel() {
   // Do not add to browser history
-  router.push({name: 'Files', replace: true});
+  router.push({ name: "Files", replace: true });
 }
 
 /** Submits the column mapping and triggers the second-stage upload. */
 async function submit() {
   // Post API Data
   const fetchData = {
-    timestamp: '',
-    case_id: '',
-    name: '',
-    instance: '',
-    status: '',
-    case_attributes: []
+    timestamp: "",
+    case_id: "",
+    name: "",
+    instance: "",
+    status: "",
+    case_attributes: [],
   };
   // Assign values
   const haveValueData = selectedColumns.value.map((column, i) => {
@@ -280,33 +407,33 @@ async function submit() {
         name: column.name,
         code: column.code,
         color: column.color,
-        value: uploadDetail.value.columns[i]
-      }
+        value: uploadDetail.value.columns[i],
+      };
     }
   });
 
   // Get the desired file name to change
   uploadFileName.value = fileName.value;
   // Set the data for the second-stage upload
-  haveValueData.forEach(column => {
-    if(column !== undefined) {
+  haveValueData.forEach((column) => {
+    if (column !== undefined) {
       switch (column.code) {
-        case 'timestamp':
+        case "timestamp":
           fetchData.timestamp = column.value;
           break;
-        case 'case_id':
+        case "case_id":
           fetchData.case_id = column.value;
           break;
-        case 'name':
+        case "name":
           fetchData.name = column.value;
           break;
-        case 'instance':
+        case "instance":
           fetchData.instance = column.value;
           break;
-        case 'status':
+        case "status":
           fetchData.status = column.value;
           break;
-        case 'case_attributes':
+        case "case_attributes":
           fetchData.case_attributes.push(column.value);
           break;
         default:
@@ -320,19 +447,24 @@ async function submit() {
 // Mounted
 onMounted(async () => {
   // Watch only once
-  const unwatch = watch(fileName, (newValue) => {
+  const unwatch = watch(
+    fileName,
+    (newValue) => {
       if (newValue) {
-        const inputElement = document.getElementById('fileNameInput');
+        const inputElement = document.getElementById("fileNameInput");
         const baseWidth = 20;
         const textWidth = getTextWidth(fileName.value, inputElement);
-        inputElement.style.width = baseWidth + textWidth + 'px';
+        inputElement.style.width = baseWidth + textWidth + "px";
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
   showEdit.value = true;
-  if(uploadId.value) await filesStore.getUploadDetail();
-  selectedColumns.value = Array.from({ length: uploadDetail.value.columns.length }, () => columnType[columnType.length - 1]); // Default to "Not Assigned"
+  if (uploadId.value) await filesStore.getUploadDetail();
+  selectedColumns.value = Array.from(
+    { length: uploadDetail.value.columns.length },
+    () => columnType[columnType.length - 1],
+  ); // Default to "Not Assigned"
   unwatch();
   isLoading.value = false;
 });
diff --git a/tests/components/Badge.test.js b/tests/components/Badge.test.js
index c10b898..17cabf4 100644
--- a/tests/components/Badge.test.js
+++ b/tests/components/Badge.test.js
@@ -3,29 +3,29 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Badge from '@/components/Badge.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Badge from "@/components/Badge.vue";
 
-describe('Badge', () => {
-  it('renders display text', () => {
+describe("Badge", () => {
+  it("renders display text", () => {
     const wrapper = mount(Badge, {
-      props: { isActivated: true, displayText: 'Active' },
+      props: { isActivated: true, displayText: "Active" },
     });
-    expect(wrapper.text()).toBe('Active');
+    expect(wrapper.text()).toBe("Active");
   });
 
-  it('has activated class when isActivated is true', () => {
+  it("has activated class when isActivated is true", () => {
     const wrapper = mount(Badge, {
-      props: { isActivated: true, displayText: 'Active' },
+      props: { isActivated: true, displayText: "Active" },
     });
-    expect(wrapper.classes()).toContain('badge-activated');
+    expect(wrapper.classes()).toContain("badge-activated");
   });
 
-  it('has deactivated class when isActivated is false', () => {
+  it("has deactivated class when isActivated is false", () => {
     const wrapper = mount(Badge, {
-      props: { isActivated: false, displayText: 'Inactive' },
+      props: { isActivated: false, displayText: "Inactive" },
     });
-    expect(wrapper.classes()).toContain('badge-deactivated');
+    expect(wrapper.classes()).toContain("badge-deactivated");
   });
 });
diff --git a/tests/components/Button.test.js b/tests/components/Button.test.js
index 36f508d..6802717 100644
--- a/tests/components/Button.test.js
+++ b/tests/components/Button.test.js
@@ -3,32 +3,32 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Button from '@/components/Button.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Button from "@/components/Button.vue";
 
-describe('Button', () => {
-  it('renders button text', () => {
+describe("Button", () => {
+  it("renders button text", () => {
     const wrapper = mount(Button, {
-      props: { buttonText: 'Click Me' },
+      props: { buttonText: "Click Me" },
     });
-    expect(wrapper.text()).toBe('Click Me');
+    expect(wrapper.text()).toBe("Click Me");
   });
 
-  it('adds ring classes on mousedown', async () => {
+  it("adds ring classes on mousedown", async () => {
     const wrapper = mount(Button, {
-      props: { buttonText: 'Test' },
+      props: { buttonText: "Test" },
     });
-    await wrapper.trigger('mousedown');
-    expect(wrapper.classes()).toContain('ring');
+    await wrapper.trigger("mousedown");
+    expect(wrapper.classes()).toContain("ring");
   });
 
-  it('removes ring classes on mouseup', async () => {
+  it("removes ring classes on mouseup", async () => {
     const wrapper = mount(Button, {
-      props: { buttonText: 'Test' },
+      props: { buttonText: "Test" },
     });
-    await wrapper.trigger('mousedown');
-    await wrapper.trigger('mouseup');
-    expect(wrapper.classes()).not.toContain('ring');
+    await wrapper.trigger("mousedown");
+    await wrapper.trigger("mouseup");
+    expect(wrapper.classes()).not.toContain("ring");
   });
 });
diff --git a/tests/components/ButtonFilled.test.js b/tests/components/ButtonFilled.test.js
index a6f2bf7..27461f8 100644
--- a/tests/components/ButtonFilled.test.js
+++ b/tests/components/ButtonFilled.test.js
@@ -3,32 +3,32 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import ButtonFilled from '@/components/ButtonFilled.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import ButtonFilled from "@/components/ButtonFilled.vue";
 
-describe('ButtonFilled', () => {
-  it('renders button text', () => {
+describe("ButtonFilled", () => {
+  it("renders button text", () => {
     const wrapper = mount(ButtonFilled, {
-      props: { buttonText: 'Save' },
+      props: { buttonText: "Save" },
     });
-    expect(wrapper.text()).toBe('Save');
+    expect(wrapper.text()).toBe("Save");
   });
 
-  it('has filled background class', () => {
+  it("has filled background class", () => {
     const wrapper = mount(ButtonFilled, {
-      props: { buttonText: 'Save' },
+      props: { buttonText: "Save" },
     });
-    expect(wrapper.find('button').exists()).toBe(true);
+    expect(wrapper.find("button").exists()).toBe(true);
   });
 
-  it('adds ring on mousedown and removes on mouseup', async () => {
+  it("adds ring on mousedown and removes on mouseup", async () => {
     const wrapper = mount(ButtonFilled, {
-      props: { buttonText: 'Test' },
+      props: { buttonText: "Test" },
     });
-    await wrapper.trigger('mousedown');
-    expect(wrapper.classes()).toContain('ring');
-    await wrapper.trigger('mouseup');
-    expect(wrapper.classes()).not.toContain('ring');
+    await wrapper.trigger("mousedown");
+    expect(wrapper.classes()).toContain("ring");
+    await wrapper.trigger("mouseup");
+    expect(wrapper.classes()).not.toContain("ring");
   });
 });
diff --git a/tests/components/IconChecked.test.js b/tests/components/IconChecked.test.js
index a29c4a8..e803015 100644
--- a/tests/components/IconChecked.test.js
+++ b/tests/components/IconChecked.test.js
@@ -3,12 +3,12 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import IconChecked from '@/components/icons/IconChecked.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import IconChecked from "@/components/icons/IconChecked.vue";
 
-describe('IconChecked', () => {
-  it('shows gray frame when not checked', () => {
+describe("IconChecked", () => {
+  it("shows gray frame when not checked", () => {
     const wrapper = mount(IconChecked, {
       props: { isChecked: false },
     });
@@ -17,7 +17,7 @@ describe('IconChecked', () => {
     expect(imgs.length).toBe(1);
   });
 
-  it('shows blue frame and check mark when checked', () => {
+  it("shows blue frame and check mark when checked", () => {
     const wrapper = mount(IconChecked, {
       props: { isChecked: true },
     });
@@ -26,7 +26,7 @@ describe('IconChecked', () => {
     expect(imgs.length).toBe(2);
   });
 
-  it('updates rendering when isChecked prop changes', async () => {
+  it("updates rendering when isChecked prop changes", async () => {
     const wrapper = mount(IconChecked, {
       props: { isChecked: false },
     });
diff --git a/tests/components/Loading.test.js b/tests/components/Loading.test.js
index 27a5bdf..cf376e3 100644
--- a/tests/components/Loading.test.js
+++ b/tests/components/Loading.test.js
@@ -3,19 +3,19 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Loading from '@/components/Loading.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Loading from "@/components/Loading.vue";
 
-describe('Loading', () => {
-  it('renders a loader element', () => {
+describe("Loading", () => {
+  it("renders a loader element", () => {
     const wrapper = mount(Loading);
-    expect(wrapper.find('.loader').exists()).toBe(true);
+    expect(wrapper.find(".loader").exists()).toBe(true);
   });
 
-  it('has full-screen overlay classes', () => {
+  it("has full-screen overlay classes", () => {
     const wrapper = mount(Loading);
-    expect(wrapper.classes()).toContain('fixed');
-    expect(wrapper.classes()).toContain('inset-0');
+    expect(wrapper.classes()).toContain("fixed");
+    expect(wrapper.classes()).toContain("inset-0");
   });
 });
diff --git a/tests/components/Login.test.js b/tests/components/Login.test.js
index 13cb115..c0d0d44 100644
--- a/tests/components/Login.test.js
+++ b/tests/components/Login.test.js
@@ -3,11 +3,11 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { setActivePinia, createPinia } from "pinia";
 
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
 
@@ -15,14 +15,14 @@ const mockRoute = vi.hoisted(() => ({
   query: {},
 }));
 
-vi.mock('vue-router', () => ({
+vi.mock("vue-router", () => ({
   useRoute: () => mockRoute,
 }));
 
-import Login from '@/views/Login/Login.vue';
-import { useLoginStore } from '@/stores/login';
+import Login from "@/views/Login/Login.vue";
+import { useLoginStore } from "@/stores/login";
 
-describe('Login', () => {
+describe("Login", () => {
   let pinia;
 
   beforeEach(() => {
@@ -42,62 +42,62 @@ describe('Login', () => {
     });
   };
 
-  it('renders login form', () => {
+  it("renders login form", () => {
     const wrapper = mountLogin();
-    expect(wrapper.find('h2').text()).toBe('LOGIN');
-    expect(wrapper.find('#account').exists()).toBe(true);
-    expect(wrapper.find('#password').exists()).toBe(true);
+    expect(wrapper.find("h2").text()).toBe("LOGIN");
+    expect(wrapper.find("#account").exists()).toBe(true);
+    expect(wrapper.find("#password").exists()).toBe(true);
   });
 
-  it('has disabled login button when fields are empty', () => {
+  it("has disabled login button when fields are empty", () => {
     const wrapper = mountLogin();
-    const btn = wrapper.find('#login_btn_main_btn');
-    expect(btn.attributes('disabled')).toBeDefined();
+    const btn = wrapper.find("#login_btn_main_btn");
+    expect(btn.attributes("disabled")).toBeDefined();
   });
 
-  it('enables login button when both fields have values', async () => {
+  it("enables login button when both fields have values", async () => {
     const wrapper = mountLogin();
     const store = useLoginStore();
-    store.auth.username = 'user';
-    store.auth.password = 'pass';
+    store.auth.username = "user";
+    store.auth.password = "pass";
     await wrapper.vm.$nextTick();
-    const btn = wrapper.find('#login_btn_main_btn');
-    expect(btn.attributes('disabled')).toBeUndefined();
+    const btn = wrapper.find("#login_btn_main_btn");
+    expect(btn.attributes("disabled")).toBeUndefined();
   });
 
-  it('shows error message when isInvalid', async () => {
+  it("shows error message when isInvalid", async () => {
     const wrapper = mountLogin();
     const store = useLoginStore();
     store.isInvalid = true;
     await wrapper.vm.$nextTick();
-    expect(wrapper.text()).toContain('Incorrect account or password');
+    expect(wrapper.text()).toContain("Incorrect account or password");
   });
 
-  it('toggles password visibility', async () => {
+  it("toggles password visibility", async () => {
     const wrapper = mountLogin();
     const store = useLoginStore();
-    store.auth.password = 'secret';
+    store.auth.password = "secret";
     await wrapper.vm.$nextTick();
 
-    const pwdInput = wrapper.find('#password');
-    expect(pwdInput.attributes('type')).toBe('password');
+    const pwdInput = wrapper.find("#password");
+    expect(pwdInput.attributes("type")).toBe("password");
 
     // Click the eye icon to toggle
     const eyeToggle = wrapper.find(
       'label[for="passwordt"] span.cursor-pointer',
     );
     if (eyeToggle.exists()) {
-      await eyeToggle.trigger('click');
+      await eyeToggle.trigger("click");
       await wrapper.vm.$nextTick();
-      expect(pwdInput.attributes('type')).toBe('text');
+      expect(pwdInput.attributes("type")).toBe("text");
     }
   });
 
-  it('stores return-to URL from route query', () => {
+  it("stores return-to URL from route query", () => {
     const wrapper = mountLogin({
-      route: { query: { 'return-to': 'encodedUrl' } },
+      route: { query: { "return-to": "encodedUrl" } },
     });
     const store = useLoginStore();
-    expect(store.rememberedReturnToUrl).toBe('encodedUrl');
+    expect(store.rememberedReturnToUrl).toBe("encodedUrl");
   });
 });
diff --git a/tests/components/ModalHeader.test.js b/tests/components/ModalHeader.test.js
index c87fd4c..b3cee32 100644
--- a/tests/components/ModalHeader.test.js
+++ b/tests/components/ModalHeader.test.js
@@ -3,13 +3,13 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { setActivePinia, createPinia } from 'pinia';
-import ModalHeader from '@/views/AccountManagement/ModalHeader.vue';
-import { useModalStore } from '@/stores/modal';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { setActivePinia, createPinia } from "pinia";
+import ModalHeader from "@/views/AccountManagement/ModalHeader.vue";
+import { useModalStore } from "@/stores/modal";
 
-describe('ModalHeader', () => {
+describe("ModalHeader", () => {
   let pinia;
 
   beforeEach(() => {
@@ -17,35 +17,35 @@ describe('ModalHeader', () => {
     setActivePinia(pinia);
   });
 
-  const mountModalHeader = (headerText = 'Test Header') => {
+  const mountModalHeader = (headerText = "Test Header") => {
     return mount(ModalHeader, {
       props: { headerText },
       global: { plugins: [pinia] },
     });
   };
 
-  it('renders header text from prop', () => {
-    const wrapper = mountModalHeader('Account Info');
-    expect(wrapper.find('h1').text()).toBe('Account Info');
+  it("renders header text from prop", () => {
+    const wrapper = mountModalHeader("Account Info");
+    expect(wrapper.find("h1").text()).toBe("Account Info");
   });
 
-  it('renders close button (X icon)', () => {
+  it("renders close button (X icon)", () => {
     const wrapper = mountModalHeader();
     const img = wrapper.find('img[alt="X"]');
     expect(img.exists()).toBe(true);
   });
 
-  it('calls closeModal when X is clicked', async () => {
+  it("calls closeModal when X is clicked", async () => {
     const wrapper = mountModalHeader();
     const store = useModalStore();
     store.isModalOpen = true;
-    store.whichModal = 'SOME_MODAL';
+    store.whichModal = "SOME_MODAL";
 
     const img = wrapper.find('img[alt="X"]');
-    await img.trigger('click');
+    await img.trigger("click");
 
     // closeModal only sets isModalOpen to false; whichModal is not reset
     expect(store.isModalOpen).toBe(false);
-    expect(store.whichModal).toBe('SOME_MODAL');
+    expect(store.whichModal).toBe("SOME_MODAL");
   });
 });
diff --git a/tests/components/ResultArrow.test.js b/tests/components/ResultArrow.test.js
index eff8c57..bedc3f4 100644
--- a/tests/components/ResultArrow.test.js
+++ b/tests/components/ResultArrow.test.js
@@ -3,42 +3,42 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import ResultArrow from "@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue";
 
-describe('ResultArrow', () => {
-  it('renders list items from data prop', () => {
+describe("ResultArrow", () => {
+  it("renders list items from data prop", () => {
     const wrapper = mount(ResultArrow, {
       props: {
-        data: ['Activity A', 'Activity B', 'Activity C'],
+        data: ["Activity A", "Activity B", "Activity C"],
         select: null,
       },
     });
-    const items = wrapper.findAll('li');
+    const items = wrapper.findAll("li");
     expect(items.length).toBe(3);
-    expect(items[0].text()).toContain('Activity A');
-    expect(items[1].text()).toContain('Activity B');
-    expect(items[2].text()).toContain('Activity C');
+    expect(items[0].text()).toContain("Activity A");
+    expect(items[1].text()).toContain("Activity B");
+    expect(items[2].text()).toContain("Activity C");
   });
 
-  it('renders empty list when data is null', () => {
+  it("renders empty list when data is null", () => {
     const wrapper = mount(ResultArrow, {
       props: { data: null, select: null },
     });
-    const items = wrapper.findAll('li');
+    const items = wrapper.findAll("li");
     expect(items.length).toBe(0);
   });
 
-  it('renders arrow_circle_down icon for each item', () => {
+  it("renders arrow_circle_down icon for each item", () => {
     const wrapper = mount(ResultArrow, {
       props: {
-        data: ['Task 1'],
+        data: ["Task 1"],
         select: null,
       },
     });
-    expect(wrapper.find('span.material-symbols-outlined').text()).toContain(
-      'arrow_circle_down',
+    expect(wrapper.find("span.material-symbols-outlined").text()).toContain(
+      "arrow_circle_down",
     );
   });
 });
diff --git a/tests/components/ResultCheck.test.js b/tests/components/ResultCheck.test.js
index 03d480e..1dc22a7 100644
--- a/tests/components/ResultCheck.test.js
+++ b/tests/components/ResultCheck.test.js
@@ -3,14 +3,14 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import ResultCheck from "@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue";
 
 // Mock $emitter to prevent errors
 const mockEmitter = { on: () => {}, emit: () => {} };
 
-describe('ResultCheck', () => {
+describe("ResultCheck", () => {
   const mountResultCheck = (props = {}) => {
     return mount(ResultCheck, {
       props: {
@@ -26,41 +26,41 @@ describe('ResultCheck', () => {
     });
   };
 
-  it('renders list from select prop on creation', () => {
+  it("renders list from select prop on creation", () => {
     const wrapper = mountResultCheck({
-      select: ['Activity X', 'Activity Y'],
+      select: ["Activity X", "Activity Y"],
     });
-    const items = wrapper.findAll('li');
+    const items = wrapper.findAll("li");
     expect(items.length).toBe(2);
-    expect(items[0].text()).toContain('Activity X');
-    expect(items[1].text()).toContain('Activity Y');
+    expect(items[0].text()).toContain("Activity X");
+    expect(items[1].text()).toContain("Activity Y");
   });
 
-  it('renders empty when select is null', () => {
+  it("renders empty when select is null", () => {
     const wrapper = mountResultCheck({ select: null });
-    const items = wrapper.findAll('li');
+    const items = wrapper.findAll("li");
     expect(items.length).toBe(0);
   });
 
-  it('renders check_circle icon for each item', () => {
-    const wrapper = mountResultCheck({ select: ['Task 1'] });
-    expect(wrapper.find('span.material-symbols-outlined').text()).toContain(
-      'check_circle',
+  it("renders check_circle icon for each item", () => {
+    const wrapper = mountResultCheck({ select: ["Task 1"] });
+    expect(wrapper.find("span.material-symbols-outlined").text()).toContain(
+      "check_circle",
     );
   });
 
-  it('updates list when data prop changes', async () => {
-    const wrapper = mountResultCheck({ select: ['Initial'] });
-    expect(wrapper.findAll('li').length).toBe(1);
+  it("updates list when data prop changes", async () => {
+    const wrapper = mountResultCheck({ select: ["Initial"] });
+    expect(wrapper.findAll("li").length).toBe(1);
 
-    await wrapper.setProps({ data: ['New A', 'New B'] });
-    expect(wrapper.findAll('li').length).toBe(2);
-    expect(wrapper.text()).toContain('New A');
+    await wrapper.setProps({ data: ["New A", "New B"] });
+    expect(wrapper.findAll("li").length).toBe(2);
+    expect(wrapper.text()).toContain("New A");
   });
 
-  it('updates list when select prop changes', async () => {
-    const wrapper = mountResultCheck({ select: ['Old'] });
-    await wrapper.setProps({ select: ['Changed'] });
-    expect(wrapper.text()).toContain('Changed');
+  it("updates list when select prop changes", async () => {
+    const wrapper = mountResultCheck({ select: ["Old"] });
+    await wrapper.setProps({ select: ["Changed"] });
+    expect(wrapper.text()).toContain("Changed");
   });
 });
diff --git a/tests/components/ResultDot.test.js b/tests/components/ResultDot.test.js
index eef2030..0d82faf 100644
--- a/tests/components/ResultDot.test.js
+++ b/tests/components/ResultDot.test.js
@@ -3,14 +3,14 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import ResultDot from "@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue";
 
 // Mock $emitter to prevent errors
 const mockEmitter = { on: () => {}, emit: () => {} };
 
-describe('ResultDot', () => {
+describe("ResultDot", () => {
   const mountResultDot = (props = {}) => {
     return mount(ResultDot, {
       props: {
@@ -26,31 +26,31 @@ describe('ResultDot', () => {
     });
   };
 
-  it('renders list from select prop on creation', () => {
+  it("renders list from select prop on creation", () => {
     const data = [
-      { category: 'Start', task: 'Task A' },
-      { category: 'End', task: 'Task B' },
+      { category: "Start", task: "Task A" },
+      { category: "End", task: "Task B" },
     ];
     const wrapper = mountResultDot({ select: data });
-    const items = wrapper.findAll('li');
+    const items = wrapper.findAll("li");
     expect(items.length).toBe(2);
-    expect(items[0].text()).toContain('Start');
-    expect(items[0].text()).toContain('Task A');
+    expect(items[0].text()).toContain("Start");
+    expect(items[0].text()).toContain("Task A");
   });
 
-  it('renders empty when select is null', () => {
+  it("renders empty when select is null", () => {
     const wrapper = mountResultDot({ select: null });
-    const items = wrapper.findAll('li');
+    const items = wrapper.findAll("li");
     expect(items.length).toBe(0);
   });
 
-  it('updates list when timeResultData prop changes', async () => {
+  it("updates list when timeResultData prop changes", async () => {
     const wrapper = mountResultDot({ select: null });
-    expect(wrapper.findAll('li').length).toBe(0);
+    expect(wrapper.findAll("li").length).toBe(0);
 
-    const newData = [{ category: 'Mid', task: 'Task C' }];
+    const newData = [{ category: "Mid", task: "Task C" }];
     await wrapper.setProps({ timeResultData: newData });
-    expect(wrapper.findAll('li').length).toBe(1);
-    expect(wrapper.text()).toContain('Task C');
+    expect(wrapper.findAll("li").length).toBe(1);
+    expect(wrapper.text()).toContain("Task C");
   });
 });
diff --git a/tests/components/Search.test.js b/tests/components/Search.test.js
index a0f4323..4ed743e 100644
--- a/tests/components/Search.test.js
+++ b/tests/components/Search.test.js
@@ -3,20 +3,20 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Search from '@/components/Search.vue';
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Search from "@/components/Search.vue";
 
-describe('Search', () => {
-  it('renders search form', () => {
+describe("Search", () => {
+  it("renders search form", () => {
     const wrapper = mount(Search);
     expect(wrapper.find('form[role="search"]').exists()).toBe(true);
   });
 
-  it('contains search input', () => {
+  it("contains search input", () => {
     const wrapper = mount(Search);
     const input = wrapper.find('input[type="search"]');
     expect(input.exists()).toBe(true);
-    expect(input.attributes('placeholder')).toBe('Search Activity');
+    expect(input.attributes("placeholder")).toBe("Search Activity");
   });
 });
diff --git a/tests/router/routerGuard.test.js b/tests/router/routerGuard.test.js
index 3e24c28..60ae2f1 100644
--- a/tests/router/routerGuard.test.js
+++ b/tests/router/routerGuard.test.js
@@ -3,15 +3,15 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/06
 
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach } from "vitest";
 
-describe('router beforeEach guard logic', () => {
+describe("router beforeEach guard logic", () => {
   beforeEach(() => {
     // Clear cookies
-    document.cookie.split(';').forEach((c) => {
-      const name = c.split('=')[0].trim();
+    document.cookie.split(";").forEach((c) => {
+      const name = c.split("=")[0].trim();
       if (name) {
-        document.cookie = name + '=; Max-Age=-99999999; path=/';
+        document.cookie = name + "=; Max-Age=-99999999; path=/";
       }
     });
   });
@@ -19,26 +19,26 @@ describe('router beforeEach guard logic', () => {
   // Simulate the guard logic from router/index.ts
   function runGuard(to) {
     const isLoggedIn = document.cookie
-      .split(';')
-      .some((c) => c.trim().startsWith('isLuciaLoggedIn='));
+      .split(";")
+      .some((c) => c.trim().startsWith("isLuciaLoggedIn="));
 
-    if (to.name === 'Login') {
-      if (isLoggedIn) return { name: 'Files' };
+    if (to.name === "Login") {
+      if (isLoggedIn) return { name: "Files" };
     }
     return undefined;
   }
 
-  it('redirects logged-in user from Login to Files', () => {
-    document.cookie = 'isLuciaLoggedIn=true';
-    expect(runGuard({ name: 'Login' })).toEqual({ name: 'Files' });
+  it("redirects logged-in user from Login to Files", () => {
+    document.cookie = "isLuciaLoggedIn=true";
+    expect(runGuard({ name: "Login" })).toEqual({ name: "Files" });
   });
 
-  it('allows unauthenticated user to visit Login', () => {
-    expect(runGuard({ name: 'Login' })).toBeUndefined();
+  it("allows unauthenticated user to visit Login", () => {
+    expect(runGuard({ name: "Login" })).toBeUndefined();
   });
 
-  it('does not interfere with non-Login routes', () => {
-    document.cookie = 'isLuciaLoggedIn=true';
-    expect(runGuard({ name: 'Files' })).toBeUndefined();
+  it("does not interfere with non-Login routes", () => {
+    document.cookie = "isLuciaLoggedIn=true";
+    expect(runGuard({ name: "Files" })).toBeUndefined();
   });
 });
diff --git a/tests/stores/acctMgmt.test.js b/tests/stores/acctMgmt.test.js
index cf73fc2..2b810fa 100644
--- a/tests/stores/acctMgmt.test.js
+++ b/tests/stores/acctMgmt.test.js
@@ -3,27 +3,30 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
 
 const { mockGet, mockPost, mockPut, mockDelete } = vi.hoisted(() => ({
-  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(), mockDelete: vi.fn(),
+  mockGet: vi.fn(),
+  mockPost: vi.fn(),
+  mockPut: vi.fn(),
+  mockDelete: vi.fn(),
 }));
-vi.mock('@/api/client.js', () => ({
+vi.mock("@/api/client.js", () => ({
   default: { get: mockGet, post: mockPost, put: mockPut, delete: mockDelete },
 }));
 
 // Mock login store to avoid its side effects
-vi.mock('@/stores/login', () => {
-  const { defineStore } = require('pinia');
+vi.mock("@/stores/login", () => {
+  const { defineStore } = require("pinia");
   return {
-    useLoginStore: defineStore('loginStore', {
+    useLoginStore: defineStore("loginStore", {
       state: () => ({
-        userData: { username: 'currentUser', name: 'Current' },
+        userData: { username: "currentUser", name: "Current" },
       }),
       actions: {
         getUserData: vi.fn(),
@@ -32,9 +35,9 @@ vi.mock('@/stores/login', () => {
   };
 });
 
-import { useAcctMgmtStore } from '@/stores/acctMgmt';
+import { useAcctMgmtStore } from "@/stores/acctMgmt";
 
-describe('acctMgmtStore', () => {
+describe("acctMgmtStore", () => {
   let store;
 
   beforeEach(() => {
@@ -43,24 +46,24 @@ describe('acctMgmtStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.allUserAccountList).toEqual([]);
     expect(store.isAcctMenuOpen).toBe(false);
   });
 
-  describe('menu actions', () => {
-    it('openAcctMenu sets true', () => {
+  describe("menu actions", () => {
+    it("openAcctMenu sets true", () => {
       store.openAcctMenu();
       expect(store.isAcctMenuOpen).toBe(true);
     });
 
-    it('closeAcctMenu sets false', () => {
+    it("closeAcctMenu sets false", () => {
       store.openAcctMenu();
       store.closeAcctMenu();
       expect(store.isAcctMenuOpen).toBe(false);
     });
 
-    it('toggleIsAcctMenuOpen toggles', () => {
+    it("toggleIsAcctMenuOpen toggles", () => {
       store.toggleIsAcctMenuOpen();
       expect(store.isAcctMenuOpen).toBe(true);
       store.toggleIsAcctMenuOpen();
@@ -68,157 +71,149 @@ describe('acctMgmtStore', () => {
     });
   });
 
-  describe('setCurrentViewingUser', () => {
-    it('finds user by username', () => {
+  describe("setCurrentViewingUser", () => {
+    it("finds user by username", () => {
       store.allUserAccountList = [
-        { username: 'alice', name: 'Alice', detail: {} },
-        { username: 'bob', name: 'Bob', detail: {} },
+        { username: "alice", name: "Alice", detail: {} },
+        { username: "bob", name: "Bob", detail: {} },
       ];
-      store.setCurrentViewingUser('bob');
-      expect(store.currentViewingUser.name).toBe('Bob');
+      store.setCurrentViewingUser("bob");
+      expect(store.currentViewingUser.name).toBe("Bob");
     });
   });
 
-  describe('clearCurrentViewingUser', () => {
-    it('resets to empty user', () => {
-      store.currentViewingUser = { username: 'test', detail: {} };
+  describe("clearCurrentViewingUser", () => {
+    it("resets to empty user", () => {
+      store.currentViewingUser = { username: "test", detail: {} };
       store.clearCurrentViewingUser();
-      expect(store.currentViewingUser.username).toBe('');
+      expect(store.currentViewingUser.username).toBe("");
     });
   });
 
-  describe('createNewAccount', () => {
-    it('posts to /api/users and sets flag on success', async () => {
+  describe("createNewAccount", () => {
+    it("posts to /api/users and sets flag on success", async () => {
       mockPost.mockResolvedValue({ status: 200 });
-      const user = { username: 'newuser', password: 'pass' };
+      const user = { username: "newuser", password: "pass" };
 
       await store.createNewAccount(user);
 
-      expect(mockPost).toHaveBeenCalledWith(
-        '/api/users', user,
-      );
+      expect(mockPost).toHaveBeenCalledWith("/api/users", user);
       expect(store.isOneAccountJustCreate).toBe(true);
-      expect(store.justCreateUsername).toBe('newuser');
+      expect(store.justCreateUsername).toBe("newuser");
     });
   });
 
-  describe('deleteAccount', () => {
-    it('returns true on success', async () => {
+  describe("deleteAccount", () => {
+    it("returns true on success", async () => {
       mockDelete.mockResolvedValue({ status: 200 });
 
-      const result = await store.deleteAccount('alice');
+      const result = await store.deleteAccount("alice");
 
-      expect(mockDelete).toHaveBeenCalledWith(
-        '/api/users/alice',
-      );
+      expect(mockDelete).toHaveBeenCalledWith("/api/users/alice");
       expect(result).toBe(true);
     });
 
-    it('encodes special characters in username', async () => {
+    it("encodes special characters in username", async () => {
       mockDelete.mockResolvedValue({ status: 200 });
 
-      await store.deleteAccount('user@domain/name');
+      await store.deleteAccount("user@domain/name");
 
       expect(mockDelete).toHaveBeenCalledWith(
-        '/api/users/user%40domain%2Fname',
+        "/api/users/user%40domain%2Fname",
       );
     });
 
-    it('returns false on error', async () => {
-      mockDelete.mockRejectedValue(new Error('fail'));
+    it("returns false on error", async () => {
+      mockDelete.mockRejectedValue(new Error("fail"));
 
-      const result = await store.deleteAccount('alice');
+      const result = await store.deleteAccount("alice");
 
       expect(result).toBe(false);
     });
   });
 
-  describe('editAccount', () => {
-    it('puts edited data', async () => {
+  describe("editAccount", () => {
+    it("puts edited data", async () => {
       mockPut.mockResolvedValue({ status: 200 });
       const detail = {
-        username: 'alice',
-        password: 'newpw',
-        name: 'Alice',
+        username: "alice",
+        password: "newpw",
+        name: "Alice",
         is_active: true,
       };
 
-      const result = await store.editAccount('alice', detail);
+      const result = await store.editAccount("alice", detail);
 
       expect(mockPut).toHaveBeenCalledWith(
-        '/api/users/alice',
-        expect.objectContaining({ password: 'newpw' }),
+        "/api/users/alice",
+        expect.objectContaining({ password: "newpw" }),
       );
       expect(result).toBe(true);
     });
   });
 
-  describe('addRoleToUser', () => {
-    it('puts role assignment', async () => {
+  describe("addRoleToUser", () => {
+    it("puts role assignment", async () => {
       mockPut.mockResolvedValue({ status: 200 });
 
-      const result = await store.addRoleToUser('alice', 'admin');
+      const result = await store.addRoleToUser("alice", "admin");
 
-      expect(mockPut).toHaveBeenCalledWith(
-        '/api/users/alice/roles/admin',
-      );
+      expect(mockPut).toHaveBeenCalledWith("/api/users/alice/roles/admin");
       expect(result).toBe(true);
     });
 
-    it('encodes special characters in username and role', async () => {
+    it("encodes special characters in username and role", async () => {
       mockPut.mockResolvedValue({ status: 200 });
 
-      await store.addRoleToUser('user@org', 'role/special');
+      await store.addRoleToUser("user@org", "role/special");
 
       expect(mockPut).toHaveBeenCalledWith(
-        '/api/users/user%40org/roles/role%2Fspecial',
+        "/api/users/user%40org/roles/role%2Fspecial",
       );
     });
   });
 
-  describe('deleteRoleToUser', () => {
-    it('deletes role', async () => {
+  describe("deleteRoleToUser", () => {
+    it("deletes role", async () => {
       mockDelete.mockResolvedValue({ status: 200 });
 
-      const result = await store.deleteRoleToUser('alice', 'admin');
+      const result = await store.deleteRoleToUser("alice", "admin");
 
-      expect(mockDelete).toHaveBeenCalledWith(
-        '/api/users/alice/roles/admin',
-      );
+      expect(mockDelete).toHaveBeenCalledWith("/api/users/alice/roles/admin");
       expect(result).toBe(true);
     });
   });
 
-  describe('getUserDetail', () => {
-    it('fetches user and sets admin flag', async () => {
+  describe("getUserDetail", () => {
+    it("fetches user and sets admin flag", async () => {
       mockGet.mockResolvedValue({
         status: 200,
         data: {
-          username: 'alice',
-          roles: [{ code: 'admin' }],
+          username: "alice",
+          roles: [{ code: "admin" }],
         },
       });
 
-      const result = await store.getUserDetail('alice');
+      const result = await store.getUserDetail("alice");
 
       expect(result).toBe(true);
       expect(store.currentViewingUser.is_admin).toBe(true);
     });
 
-    it('returns false on error', async () => {
-      mockGet.mockRejectedValue(new Error('not found'));
+    it("returns false on error", async () => {
+      mockGet.mockRejectedValue(new Error("not found"));
 
-      const result = await store.getUserDetail('ghost');
+      const result = await store.getUserDetail("ghost");
 
       expect(result).toBe(false);
     });
   });
 
-  describe('hover state actions', () => {
+  describe("hover state actions", () => {
     beforeEach(() => {
       store.allUserAccountList = [
         {
-          username: 'alice',
+          username: "alice",
           isDeleteHovered: false,
           isRowHovered: false,
           isEditHovered: false,
@@ -227,45 +222,44 @@ describe('acctMgmtStore', () => {
       ];
     });
 
-    it('changeIsDeleteHoveredByUser', () => {
-      store.changeIsDeleteHoveredByUser('alice', true);
+    it("changeIsDeleteHoveredByUser", () => {
+      store.changeIsDeleteHoveredByUser("alice", true);
       expect(store.allUserAccountList[0].isDeleteHovered).toBe(true);
     });
 
-    it('changeIsRowHoveredByUser', () => {
-      store.changeIsRowHoveredByUser('alice', true);
+    it("changeIsRowHoveredByUser", () => {
+      store.changeIsRowHoveredByUser("alice", true);
       expect(store.allUserAccountList[0].isRowHovered).toBe(true);
     });
 
-    it('changeIsEditHoveredByUser', () => {
-      store.changeIsEditHoveredByUser('alice', true);
+    it("changeIsEditHoveredByUser", () => {
+      store.changeIsEditHoveredByUser("alice", true);
       expect(store.allUserAccountList[0].isEditHovered).toBe(true);
     });
 
-    it('changeIsDetailHoveredByUser', () => {
-      store.changeIsDetailHoveredByUser('alice', true);
+    it("changeIsDetailHoveredByUser", () => {
+      store.changeIsDetailHoveredByUser("alice", true);
       expect(store.allUserAccountList[0].isDetailHovered).toBe(true);
     });
   });
 
-  it('resetJustCreateFlag resets flag', () => {
+  it("resetJustCreateFlag resets flag", () => {
     store.isOneAccountJustCreate = true;
     store.resetJustCreateFlag();
     expect(store.isOneAccountJustCreate).toBe(false);
   });
 
-  it('setShouldUpdateList sets boolean', () => {
+  it("setShouldUpdateList sets boolean", () => {
     store.setShouldUpdateList(true);
     expect(store.shouldUpdateList).toBe(true);
   });
 
-  it('updateSingleAccountPiniaState updates user', () => {
-    store.allUserAccountList = [
-      { username: 'alice', name: 'Old' },
-    ];
+  it("updateSingleAccountPiniaState updates user", () => {
+    store.allUserAccountList = [{ username: "alice", name: "Old" }];
     store.updateSingleAccountPiniaState({
-      username: 'alice', name: 'New',
+      username: "alice",
+      name: "New",
     });
-    expect(store.allUserAccountList[0].name).toBe('New');
+    expect(store.allUserAccountList[0].name).toBe("New");
   });
 });
diff --git a/tests/stores/allMapData.test.js b/tests/stores/allMapData.test.js
index 4e707f2..6075680 100644
--- a/tests/stores/allMapData.test.js
+++ b/tests/stores/allMapData.test.js
@@ -3,23 +3,25 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
 
 const { mockGet, mockPost, mockPut } = vi.hoisted(() => ({
-  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(),
+  mockGet: vi.fn(),
+  mockPost: vi.fn(),
+  mockPut: vi.fn(),
 }));
-vi.mock('@/api/client.js', () => ({
+vi.mock("@/api/client.js", () => ({
   default: { get: mockGet, post: mockPost, put: mockPut },
 }));
 
-import { useAllMapDataStore } from '@/stores/allMapData';
+import { useAllMapDataStore } from "@/stores/allMapData";
 
-describe('allMapDataStore', () => {
+describe("allMapDataStore", () => {
   let store;
 
   beforeEach(() => {
@@ -28,14 +30,14 @@ describe('allMapDataStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.logId).toBeNull();
     expect(store.allProcessMap).toEqual({});
     expect(store.allTrace).toEqual([]);
   });
 
-  describe('getAllMapData', () => {
-    it('fetches log discover data', async () => {
+  describe("getAllMapData", () => {
+    it("fetches log discover data", async () => {
       store.logId = 1;
       const mockData = {
         process_map: { nodes: [] },
@@ -47,14 +49,12 @@ describe('allMapDataStore', () => {
 
       await store.getAllMapData();
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/logs/1/discover',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/logs/1/discover");
       expect(store.allProcessMap).toEqual({ nodes: [] });
       expect(store.allStats).toEqual({ cases: 10 });
     });
 
-    it('fetches temp filter discover data when set', async () => {
+    it("fetches temp filter discover data when set", async () => {
       store.logId = 1;
       store.tempFilterId = 5;
       mockGet.mockResolvedValue({
@@ -68,12 +68,10 @@ describe('allMapDataStore', () => {
 
       await store.getAllMapData();
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/temp-filters/5/discover',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/temp-filters/5/discover");
     });
 
-    it('fetches created filter discover data', async () => {
+    it("fetches created filter discover data", async () => {
       store.logId = 1;
       store.createFilterId = 3;
       mockGet.mockResolvedValue({
@@ -87,31 +85,28 @@ describe('allMapDataStore', () => {
 
       await store.getAllMapData();
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/filters/3/discover',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/filters/3/discover");
     });
 
-    it('does not throw on API failure', async () => {
+    it("does not throw on API failure", async () => {
       store.logId = 1;
-      mockGet.mockRejectedValue(new Error('fail'));
+      mockGet.mockRejectedValue(new Error("fail"));
 
-      await expect(store.getAllMapData())
-        .resolves.not.toThrow();
+      await expect(store.getAllMapData()).resolves.not.toThrow();
     });
   });
 
-  describe('getFilterParams', () => {
-    it('fetches filter params and transforms timeframe', async () => {
+  describe("getFilterParams", () => {
+    it("fetches filter params and transforms timeframe", async () => {
       store.logId = 1;
       const mockData = {
-        tasks: ['A', 'B'],
-        sources: ['A'],
-        sinks: ['B'],
+        tasks: ["A", "B"],
+        sources: ["A"],
+        sinks: ["B"],
         timeframe: {
           x_axis: {
-            min: '2023-01-01T00:00:00Z',
-            max: '2023-12-31T00:00:00Z',
+            min: "2023-01-01T00:00:00Z",
+            max: "2023-12-31T00:00:00Z",
           },
         },
         trace: [],
@@ -121,20 +116,19 @@ describe('allMapDataStore', () => {
 
       await store.getFilterParams();
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/filters/params?log_id=1',
-      );
-      expect(store.allFilterTask).toEqual(['A', 'B']);
+      expect(mockGet).toHaveBeenCalledWith("/api/filters/params?log_id=1");
+      expect(store.allFilterTask).toEqual(["A", "B"]);
       // Check that min_base and max_base are stored
-      expect(store.allFilterTimeframe.x_axis.min_base)
-        .toBe('2023-01-01T00:00:00Z');
+      expect(store.allFilterTimeframe.x_axis.min_base).toBe(
+        "2023-01-01T00:00:00Z",
+      );
     });
   });
 
-  describe('checkHasResult', () => {
-    it('posts rule data and stores result', async () => {
+  describe("checkHasResult", () => {
+    it("posts rule data and stores result", async () => {
       store.logId = 1;
-      store.postRuleData = [{ type: 'task' }];
+      store.postRuleData = [{ type: "task" }];
       mockPost.mockResolvedValue({
         data: { result: true },
       });
@@ -142,15 +136,15 @@ describe('allMapDataStore', () => {
       await store.checkHasResult();
 
       expect(mockPost).toHaveBeenCalledWith(
-        '/api/filters/has-result?log_id=1',
-        [{ type: 'task' }],
+        "/api/filters/has-result?log_id=1",
+        [{ type: "task" }],
       );
       expect(store.hasResultRule).toBe(true);
     });
   });
 
-  describe('addTempFilterId', () => {
-    it('creates temp filter and stores id', async () => {
+  describe("addTempFilterId", () => {
+    it("creates temp filter and stores id", async () => {
       store.logId = 1;
       store.postRuleData = [];
       mockPost.mockResolvedValue({ data: { id: 77 } });
@@ -161,44 +155,43 @@ describe('allMapDataStore', () => {
     });
   });
 
-  describe('addFilterId', () => {
-    it('creates filter and clears temp id', async () => {
+  describe("addFilterId", () => {
+    it("creates filter and clears temp id", async () => {
       store.logId = 1;
       store.tempFilterId = 77;
-      store.postRuleData = [{ type: 'rule' }];
+      store.postRuleData = [{ type: "rule" }];
       mockPost.mockResolvedValue({ data: { id: 88 } });
 
-      await store.addFilterId('myFilter');
+      await store.addFilterId("myFilter");
 
-      expect(mockPost).toHaveBeenCalledWith(
-        '/api/filters?log_id=1',
-        { name: 'myFilter', rules: [{ type: 'rule' }] },
-      );
+      expect(mockPost).toHaveBeenCalledWith("/api/filters?log_id=1", {
+        name: "myFilter",
+        rules: [{ type: "rule" }],
+      });
       expect(store.createFilterId).toBe(88);
       expect(store.tempFilterId).toBeNull();
     });
   });
 
-  describe('updateFilter', () => {
-    it('updates filter and clears temp id', async () => {
+  describe("updateFilter", () => {
+    it("updates filter and clears temp id", async () => {
       store.createFilterId = 88;
       store.tempFilterId = 77;
-      store.postRuleData = [{ type: 'updated' }];
+      store.postRuleData = [{ type: "updated" }];
       mockPut.mockResolvedValue({ status: 200 });
 
       await store.updateFilter();
 
-      expect(mockPut).toHaveBeenCalledWith(
-        '/api/filters/88',
-        [{ type: 'updated' }],
-      );
+      expect(mockPut).toHaveBeenCalledWith("/api/filters/88", [
+        { type: "updated" },
+      ]);
       expect(store.isUpdateFilter).toBe(true);
       expect(store.tempFilterId).toBeNull();
     });
   });
 
-  describe('getAllTrace', () => {
-    it('does not crash when baseLogId is falsy', async () => {
+  describe("getAllTrace", () => {
+    it("does not crash when baseLogId is falsy", async () => {
       store.logId = 1;
       store.baseLogId = null;
       mockGet.mockResolvedValue({ data: [{ id: 1 }] });
@@ -211,37 +204,37 @@ describe('allMapDataStore', () => {
     });
   });
 
-  describe('getters', () => {
-    it('traces getter sorts by id', () => {
+  describe("getters", () => {
+    it("traces getter sorts by id", () => {
       store.allTrace = [
-        { id: 3, name: 'C' },
-        { id: 1, name: 'A' },
-        { id: 2, name: 'B' },
+        { id: 3, name: "C" },
+        { id: 1, name: "A" },
+        { id: 2, name: "B" },
       ];
-      expect(store.traces.map(t => t.id)).toEqual([1, 2, 3]);
+      expect(store.traces.map((t) => t.id)).toEqual([1, 2, 3]);
     });
 
-    it('processMap getter returns state', () => {
+    it("processMap getter returns state", () => {
       store.allProcessMap = { nodes: [1, 2] };
       expect(store.processMap).toEqual({ nodes: [1, 2] });
     });
 
-    it('BaseInfiniteFirstCases returns allBaseCase when baseInfiniteStart is 0', () => {
+    it("BaseInfiniteFirstCases returns allBaseCase when baseInfiniteStart is 0", () => {
       store.baseInfiniteStart = 0;
       store.allBaseCase = [{ id: 1 }, { id: 2 }];
       expect(store.BaseInfiniteFirstCases).toEqual([{ id: 1 }, { id: 2 }]);
     });
 
-    it('BaseInfiniteFirstCases returns undefined when baseInfiniteStart is not 0', () => {
+    it("BaseInfiniteFirstCases returns undefined when baseInfiniteStart is not 0", () => {
       store.baseInfiniteStart = 5;
       store.allBaseCase = [{ id: 1 }];
       expect(store.BaseInfiniteFirstCases).toBeUndefined();
     });
 
-    it('filterAttrs getter does not corrupt original state on repeated access', () => {
-      const originalDate = '2023-06-15T10:30:00Z';
+    it("filterAttrs getter does not corrupt original state on repeated access", () => {
+      const originalDate = "2023-06-15T10:30:00Z";
       store.allFilterAttrs = [
-        { type: 'date', min: originalDate, max: '2023-12-31T23:59:00Z' },
+        { type: "date", min: originalDate, max: "2023-12-31T23:59:00Z" },
       ];
       // Access the getter once
       store.filterAttrs;
@@ -249,10 +242,8 @@ describe('allMapDataStore', () => {
       expect(store.allFilterAttrs[0].min).toBe(originalDate);
     });
 
-    it('filterAttrs getter returns consistent float values on repeated access', () => {
-      store.allFilterAttrs = [
-        { type: 'float', min: 1.239, max: 5.671 },
-      ];
+    it("filterAttrs getter returns consistent float values on repeated access", () => {
+      store.allFilterAttrs = [{ type: "float", min: 1.239, max: 5.671 }];
       const first = store.filterAttrs;
       const second = store.filterAttrs;
       // min rounds down (ROUND_DOWN=1), max rounds up (ROUND_UP=0)
diff --git a/tests/stores/compare.test.js b/tests/stores/compare.test.js
index 5badec5..a99cd87 100644
--- a/tests/stores/compare.test.js
+++ b/tests/stores/compare.test.js
@@ -3,21 +3,21 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
 
 const { mockGet } = vi.hoisted(() => ({ mockGet: vi.fn() }));
-vi.mock('@/api/client.js', () => ({
+vi.mock("@/api/client.js", () => ({
   default: { get: mockGet },
 }));
 
-import { useCompareStore } from '@/stores/compare';
+import { useCompareStore } from "@/stores/compare";
 
-describe('compareStore', () => {
+describe("compareStore", () => {
   let store;
 
   beforeEach(() => {
@@ -26,83 +26,76 @@ describe('compareStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.allCompareDashboardData).toBeNull();
   });
 
-  it('compareDashboardData getter returns state', () => {
+  it("compareDashboardData getter returns state", () => {
     store.allCompareDashboardData = { time: {} };
     expect(store.compareDashboardData).toEqual({ time: {} });
   });
 
-  describe('getCompare', () => {
-    it('fetches compare data with encoded params', async () => {
-      const params = [{ type: 'log', id: 1 }];
+  describe("getCompare", () => {
+    it("fetches compare data with encoded params", async () => {
+      const params = [{ type: "log", id: 1 }];
       const mockData = { time: {}, freq: {} };
       mockGet.mockResolvedValue({ data: mockData });
 
       await store.getCompare(params);
 
       const encoded = encodeURIComponent(JSON.stringify(params));
-      expect(mockGet).toHaveBeenCalledWith(
-        `/api/compare?datasets=${encoded}`,
-      );
+      expect(mockGet).toHaveBeenCalledWith(`/api/compare?datasets=${encoded}`);
       expect(store.allCompareDashboardData).toEqual(mockData);
     });
 
-    it('does not throw on API failure', async () => {
-      mockGet.mockRejectedValue(new Error('fail'));
+    it("does not throw on API failure", async () => {
+      mockGet.mockRejectedValue(new Error("fail"));
 
-      await expect(store.getCompare([]))
-        .resolves.not.toThrow();
+      await expect(store.getCompare([])).resolves.not.toThrow();
     });
   });
 
-  describe('getStateData', () => {
-    it('fetches log discover stats', async () => {
+  describe("getStateData", () => {
+    it("fetches log discover stats", async () => {
       mockGet.mockResolvedValue({
         data: { stats: { cases: 100 } },
       });
 
-      const result = await store.getStateData('log', 1);
+      const result = await store.getStateData("log", 1);
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/logs/1/discover',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/logs/1/discover");
       expect(result).toEqual({ cases: 100 });
     });
 
-    it('fetches filter discover stats', async () => {
+    it("fetches filter discover stats", async () => {
       mockGet.mockResolvedValue({
         data: { stats: { cases: 50 } },
       });
 
-      const result = await store.getStateData('filter', 3);
+      const result = await store.getStateData("filter", 3);
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/filters/3/discover',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/filters/3/discover");
       expect(result).toEqual({ cases: 50 });
     });
   });
 
-  describe('getFileName', () => {
-    it('finds file name by id', async () => {
+  describe("getFileName", () => {
+    it("finds file name by id", async () => {
       mockGet.mockResolvedValue({
         data: [
-          { id: 1, name: 'file1.csv' },
-          { id: 2, name: 'file2.csv' },
+          { id: 1, name: "file1.csv" },
+          { id: 2, name: "file2.csv" },
         ],
       });
 
       const result = await store.getFileName(1);
 
-      expect(result).toBe('file1.csv');
+      expect(result).toBe("file1.csv");
     });
 
-    it('returns undefined for non-existent id', async () => {
+    it("returns undefined for non-existent id", async () => {
       mockGet.mockResolvedValue({
-        data: [{ id: 1, name: 'file1.csv' }],
+        data: [{ id: 1, name: "file1.csv" }],
       });
 
       const result = await store.getFileName(99);
diff --git a/tests/stores/conformance.test.js b/tests/stores/conformance.test.js
index 203ee3a..898a869 100644
--- a/tests/stores/conformance.test.js
+++ b/tests/stores/conformance.test.js
@@ -3,24 +3,26 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
 
 const { mockGet, mockPost, mockPut } = vi.hoisted(() => ({
-  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(),
+  mockGet: vi.fn(),
+  mockPost: vi.fn(),
+  mockPut: vi.fn(),
 }));
-vi.mock('@/api/client.js', () => ({
+vi.mock("@/api/client.js", () => ({
   default: { get: mockGet, post: mockPost, put: mockPut },
 }));
 
-import apiError from '@/module/apiError.js';
-import { useConformanceStore } from '@/stores/conformance';
+import apiError from "@/module/apiError.js";
+import { useConformanceStore } from "@/stores/conformance";
 
-describe('conformanceStore', () => {
+describe("conformanceStore", () => {
   let store;
 
   beforeEach(() => {
@@ -29,21 +31,21 @@ describe('conformanceStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.conformanceLogId).toBeNull();
     expect(store.conformanceFilterId).toBeNull();
     expect(store.allConformanceTask).toEqual([]);
-    expect(store.selectedRuleType).toBe('Have activity');
+    expect(store.selectedRuleType).toBe("Have activity");
   });
 
-  describe('getConformanceParams', () => {
-    it('fetches log check params when no filter', async () => {
+  describe("getConformanceParams", () => {
+    it("fetches log check params when no filter", async () => {
       store.conformanceLogId = 1;
       store.conformanceFilterId = null;
       const mockData = {
-        tasks: [{ label: 'A' }],
-        sources: ['A'],
-        sinks: ['B'],
+        tasks: [{ label: "A" }],
+        sources: ["A"],
+        sinks: ["B"],
         processing_time: {},
         waiting_time: {},
         cycle_time: {},
@@ -52,14 +54,12 @@ describe('conformanceStore', () => {
 
       await store.getConformanceParams();
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/log-checks/params?log_id=1',
-      );
-      expect(store.allConformanceTask).toEqual([{ label: 'A' }]);
-      expect(store.allCfmSeqStart).toEqual(['A']);
+      expect(mockGet).toHaveBeenCalledWith("/api/log-checks/params?log_id=1");
+      expect(store.allConformanceTask).toEqual([{ label: "A" }]);
+      expect(store.allCfmSeqStart).toEqual(["A"]);
     });
 
-    it('fetches filter check params when filter set', async () => {
+    it("fetches filter check params when filter set", async () => {
       store.conformanceFilterId = 5;
       const mockData = {
         tasks: [],
@@ -74,137 +74,137 @@ describe('conformanceStore', () => {
       await store.getConformanceParams();
 
       expect(mockGet).toHaveBeenCalledWith(
-        '/api/filter-checks/params?filter_id=5',
+        "/api/filter-checks/params?filter_id=5",
       );
     });
   });
 
-  describe('addConformanceCheckId', () => {
-    it('posts to log temp-check and stores id', async () => {
+  describe("addConformanceCheckId", () => {
+    it("posts to log temp-check and stores id", async () => {
       store.conformanceLogId = 1;
       store.conformanceFilterId = null;
       mockPost.mockResolvedValue({ data: { id: 42 } });
 
-      await store.addConformanceCheckId({ rule: 'test' });
+      await store.addConformanceCheckId({ rule: "test" });
 
-      expect(mockPost).toHaveBeenCalledWith(
-        '/api/temp-log-checks?log_id=1',
-        { rule: 'test' },
-      );
+      expect(mockPost).toHaveBeenCalledWith("/api/temp-log-checks?log_id=1", {
+        rule: "test",
+      });
       expect(store.conformanceLogTempCheckId).toBe(42);
     });
 
-    it('posts to filter temp-check when filter set', async () => {
+    it("posts to filter temp-check when filter set", async () => {
       store.conformanceFilterId = 3;
       mockPost.mockResolvedValue({ data: { id: 99 } });
 
-      await store.addConformanceCheckId({ rule: 'test' });
+      await store.addConformanceCheckId({ rule: "test" });
 
       expect(mockPost).toHaveBeenCalledWith(
-        '/api/temp-filter-checks?filter_id=3',
-        { rule: 'test' },
+        "/api/temp-filter-checks?filter_id=3",
+        { rule: "test" },
       );
       expect(store.conformanceFilterTempCheckId).toBe(99);
     });
   });
 
-  describe('getConformanceReport', () => {
-    it('fetches temp log check report', async () => {
+  describe("getConformanceReport", () => {
+    it("fetches temp log check report", async () => {
       store.conformanceLogTempCheckId = 10;
       const mockData = { file: {}, charts: {} };
       mockGet.mockResolvedValue({ data: mockData });
 
       await store.getConformanceReport();
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/temp-log-checks/10',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/temp-log-checks/10");
       expect(store.allConformanceTempReportData).toEqual(mockData);
     });
 
-    it('stores routeFile when getRouteFile=true', async () => {
+    it("stores routeFile when getRouteFile=true", async () => {
       store.conformanceLogTempCheckId = 10;
-      const mockData = { file: { name: 'test.csv' } };
+      const mockData = { file: { name: "test.csv" } };
       mockGet.mockResolvedValue({ data: mockData });
 
       await store.getConformanceReport(true);
 
-      expect(store.allRouteFile).toEqual({ name: 'test.csv' });
+      expect(store.allRouteFile).toEqual({ name: "test.csv" });
       expect(store.allConformanceTempReportData).toBeNull();
     });
   });
 
-  describe('addConformanceCreateCheckId', () => {
-    it('creates log check and clears temp id', async () => {
+  describe("addConformanceCreateCheckId", () => {
+    it("creates log check and clears temp id", async () => {
       store.conformanceLogId = 1;
       store.conformanceFilterId = null;
       store.conformanceLogTempCheckId = 10;
-      store.conformanceRuleData = { type: 'test' };
+      store.conformanceRuleData = { type: "test" };
       mockPost.mockResolvedValue({ data: { id: 100 } });
 
-      await store.addConformanceCreateCheckId('myRule');
+      await store.addConformanceCreateCheckId("myRule");
 
-      expect(mockPost).toHaveBeenCalledWith(
-        '/api/log-checks?log_id=1',
-        { name: 'myRule', rule: { type: 'test' } },
-      );
+      expect(mockPost).toHaveBeenCalledWith("/api/log-checks?log_id=1", {
+        name: "myRule",
+        rule: { type: "test" },
+      });
       expect(store.conformanceLogCreateCheckId).toBe(100);
       expect(store.conformanceLogTempCheckId).toBeNull();
     });
   });
 
-  describe('updateConformance', () => {
-    it('updates existing log check', async () => {
+  describe("updateConformance", () => {
+    it("updates existing log check", async () => {
       store.conformanceLogCreateCheckId = 50;
-      store.conformanceRuleData = { type: 'updated' };
+      store.conformanceRuleData = { type: "updated" };
       mockPut.mockResolvedValue({ status: 200 });
 
       await store.updateConformance();
 
-      expect(mockPut).toHaveBeenCalledWith(
-        '/api/log-checks/50',
-        { type: 'updated' },
-      );
+      expect(mockPut).toHaveBeenCalledWith("/api/log-checks/50", {
+        type: "updated",
+      });
       expect(store.isUpdateConformance).toBe(true);
     });
   });
 
-  it('setConformanceLogCreateCheckId sets value', () => {
-    store.setConformanceLogCreateCheckId('abc');
-    expect(store.conformanceLogCreateCheckId).toBe('abc');
+  it("setConformanceLogCreateCheckId sets value", () => {
+    store.setConformanceLogCreateCheckId("abc");
+    expect(store.conformanceLogCreateCheckId).toBe("abc");
   });
 
-  describe('getters', () => {
-    it('conformanceTask returns labels', () => {
-      store.allConformanceTask = [
-        { label: 'A' }, { label: 'B' },
-      ];
-      expect(store.conformanceTask).toEqual(['A', 'B']);
+  describe("getters", () => {
+    it("conformanceTask returns labels", () => {
+      store.allConformanceTask = [{ label: "A" }, { label: "B" }];
+      expect(store.conformanceTask).toEqual(["A", "B"]);
     });
 
-    it('cases getter formats date attributes with correct minute token', () => {
-      store.allCases = [{
-        started_at: '2023-06-15T10:30:00Z',
-        completed_at: '2023-06-15T11:45:00Z',
-        facets: [],
-        attributes: [{
-          type: 'date',
-          value: '2023-06-15T14:30:00Z',
-        }],
-      }];
+    it("cases getter formats date attributes with correct minute token", () => {
+      store.allCases = [
+        {
+          started_at: "2023-06-15T10:30:00Z",
+          completed_at: "2023-06-15T11:45:00Z",
+          facets: [],
+          attributes: [
+            {
+              type: "date",
+              value: "2023-06-15T14:30:00Z",
+            },
+          ],
+        },
+      ];
       const result = store.cases;
       // The date attribute should show minutes (30), not month (06)
       expect(result[0].attributes[0].value).toMatch(/:30:/);
     });
 
-    it('cases getter does not corrupt original state on repeated access', () => {
-      const originalDate = '2023-06-15T10:30:00Z';
-      store.allCases = [{
-        started_at: originalDate,
-        completed_at: '2023-06-15T11:45:00Z',
-        facets: [],
-        attributes: [],
-      }];
+    it("cases getter does not corrupt original state on repeated access", () => {
+      const originalDate = "2023-06-15T10:30:00Z";
+      store.allCases = [
+        {
+          started_at: originalDate,
+          completed_at: "2023-06-15T11:45:00Z",
+          facets: [],
+          attributes: [],
+        },
+      ];
       store.cases;
       // Original state should still contain the ISO date
       expect(store.allCases[0].started_at).toBe(originalDate);
diff --git a/tests/stores/conformanceInput.test.js b/tests/stores/conformanceInput.test.js
index f69787b..58dd659 100644
--- a/tests/stores/conformanceInput.test.js
+++ b/tests/stores/conformanceInput.test.js
@@ -3,11 +3,11 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { useConformanceInputStore } from '@/stores/conformanceInput';
+import { describe, it, expect, beforeEach } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { useConformanceInputStore } from "@/stores/conformanceInput";
 
-describe('conformanceInputStore', () => {
+describe("conformanceInputStore", () => {
   let store;
 
   beforeEach(() => {
@@ -15,23 +15,23 @@ describe('conformanceInputStore', () => {
     store = useConformanceInputStore();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.inputDataToSave.inputStart).toBeNull();
-    expect(store.activityRadioData.task).toEqual(['', '']);
+    expect(store.activityRadioData.task).toEqual(["", ""]);
   });
 
-  it('setActivityRadioStartEndData sets From', () => {
-    store.setActivityRadioStartEndData('taskA', 'From');
-    expect(store.activityRadioData.task[0]).toBe('taskA');
+  it("setActivityRadioStartEndData sets From", () => {
+    store.setActivityRadioStartEndData("taskA", "From");
+    expect(store.activityRadioData.task[0]).toBe("taskA");
   });
 
-  it('setActivityRadioStartEndData sets To', () => {
-    store.setActivityRadioStartEndData('taskB', 'To');
-    expect(store.activityRadioData.task[1]).toBe('taskB');
+  it("setActivityRadioStartEndData sets To", () => {
+    store.setActivityRadioStartEndData("taskB", "To");
+    expect(store.activityRadioData.task[1]).toBe("taskB");
   });
 
-  it('setActivityRadioStartEndData ignores unknown', () => {
-    store.setActivityRadioStartEndData('taskC', 'Unknown');
-    expect(store.activityRadioData.task).toEqual(['', '']);
+  it("setActivityRadioStartEndData ignores unknown", () => {
+    store.setActivityRadioStartEndData("taskC", "Unknown");
+    expect(store.activityRadioData.task).toEqual(["", ""]);
   });
 });
diff --git a/tests/stores/cytoscapeStore.test.js b/tests/stores/cytoscapeStore.test.js
index 6491c9f..c84ce7c 100644
--- a/tests/stores/cytoscapeStore.test.js
+++ b/tests/stores/cytoscapeStore.test.js
@@ -3,26 +3,32 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { useCytoscapeStore } from '@/stores/cytoscapeStore';
-import { SAVE_KEY_NAME } from '@/constants/constants.js';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { useCytoscapeStore } from "@/stores/cytoscapeStore";
+import { SAVE_KEY_NAME } from "@/constants/constants.js";
 
 // Mock localStorage since jsdom's localStorage is limited
 const localStorageMock = (() => {
   let store = {};
   return {
     getItem: vi.fn((key) => store[key] || null),
-    setItem: vi.fn((key, value) => { store[key] = value; }),
-    removeItem: vi.fn((key) => { delete store[key]; }),
-    clear: vi.fn(() => { store = {}; }),
+    setItem: vi.fn((key, value) => {
+      store[key] = value;
+    }),
+    removeItem: vi.fn((key) => {
+      delete store[key];
+    }),
+    clear: vi.fn(() => {
+      store = {};
+    }),
   };
 })();
-Object.defineProperty(globalThis, 'localStorage', {
+Object.defineProperty(globalThis, "localStorage", {
   value: localStorageMock,
 });
 
-describe('cytoscapeStore', () => {
+describe("cytoscapeStore", () => {
   let store;
 
   beforeEach(() => {
@@ -32,25 +38,25 @@ describe('cytoscapeStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.nodePositions).toEqual({});
-    expect(store.currentGraphId).toBe('');
+    expect(store.currentGraphId).toBe("");
   });
 
-  it('setCurrentGraphId initializes graph structure', () => {
-    store.setCurrentGraphId('graph1');
-    expect(store.currentGraphId).toBe('graph1');
-    expect(store.nodePositions['graph1']).toEqual({
+  it("setCurrentGraphId initializes graph structure", () => {
+    store.setCurrentGraphId("graph1");
+    expect(store.currentGraphId).toBe("graph1");
+    expect(store.nodePositions["graph1"]).toEqual({
       TB: [],
       LR: [],
     });
   });
 
-  it('saveNodePosition adds node and saves to localStorage', () => {
-    store.setCurrentGraphId('graph1');
-    store.saveNodePosition('node1', { x: 10, y: 20 }, 'TB');
-    expect(store.nodePositions['graph1']['TB']).toEqual([
-      { id: 'node1', position: { x: 10, y: 20 } },
+  it("saveNodePosition adds node and saves to localStorage", () => {
+    store.setCurrentGraphId("graph1");
+    store.saveNodePosition("node1", { x: 10, y: 20 }, "TB");
+    expect(store.nodePositions["graph1"]["TB"]).toEqual([
+      { id: "node1", position: { x: 10, y: 20 } },
     ]);
     expect(localStorageMock.setItem).toHaveBeenCalledWith(
       SAVE_KEY_NAME,
@@ -58,26 +64,28 @@ describe('cytoscapeStore', () => {
     );
   });
 
-  it('saveNodePosition updates existing node position', () => {
-    store.setCurrentGraphId('graph1');
-    store.saveNodePosition('node1', { x: 10, y: 20 }, 'TB');
-    store.saveNodePosition('node1', { x: 30, y: 40 }, 'TB');
-    expect(store.nodePositions['graph1']['TB']).toHaveLength(1);
-    expect(store.nodePositions['graph1']['TB'][0].position)
-      .toEqual({ x: 30, y: 40 });
+  it("saveNodePosition updates existing node position", () => {
+    store.setCurrentGraphId("graph1");
+    store.saveNodePosition("node1", { x: 10, y: 20 }, "TB");
+    store.saveNodePosition("node1", { x: 30, y: 40 }, "TB");
+    expect(store.nodePositions["graph1"]["TB"]).toHaveLength(1);
+    expect(store.nodePositions["graph1"]["TB"][0].position).toEqual({
+      x: 30,
+      y: 40,
+    });
   });
 
-  it('loadPositionsFromStorage restores from localStorage', () => {
+  it("loadPositionsFromStorage restores from localStorage", () => {
     const data = {
       graph1: {
-        TB: [{ id: 'n1', position: { x: 5, y: 10 } }],
+        TB: [{ id: "n1", position: { x: 5, y: 10 } }],
       },
     };
     localStorageMock.getItem.mockReturnValue(JSON.stringify(data));
-    store.setCurrentGraphId('graph1');
-    store.loadPositionsFromStorage('TB');
-    expect(store.nodePositions['graph1']['TB']).toEqual([
-      { id: 'n1', position: { x: 5, y: 10 } },
+    store.setCurrentGraphId("graph1");
+    store.loadPositionsFromStorage("TB");
+    expect(store.nodePositions["graph1"]["TB"]).toEqual([
+      { id: "n1", position: { x: 5, y: 10 } },
     ]);
   });
 });
diff --git a/tests/stores/files.test.js b/tests/stores/files.test.js
index 9ac4d21..5356f60 100644
--- a/tests/stores/files.test.js
+++ b/tests/stores/files.test.js
@@ -3,39 +3,42 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/06
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
 // Mock modules that have deep import chains (router, Swal, pinia, toast)
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
-vi.mock('@/module/alertModal.js', () => ({
+vi.mock("@/module/alertModal.js", () => ({
   uploadFailedFirst: vi.fn(),
   uploadFailedSecond: vi.fn(),
   uploadloader: vi.fn(),
   uploadSuccess: vi.fn(),
   deleteSuccess: vi.fn(),
 }));
-vi.mock('sweetalert2', () => ({
+vi.mock("sweetalert2", () => ({
   default: { close: vi.fn(), fire: vi.fn() },
 }));
 // Prevent module-level store init in cytoscapeMap.js (loaded via router → Map.vue)
-vi.mock('@/module/cytoscapeMap.js', () => ({}));
-vi.mock('@/router/index.ts', () => ({
-  default: { push: vi.fn(), currentRoute: { value: { path: '/' } } },
+vi.mock("@/module/cytoscapeMap.js", () => ({}));
+vi.mock("@/router/index.ts", () => ({
+  default: { push: vi.fn(), currentRoute: { value: { path: "/" } } },
 }));
 
 const { mockGet, mockPost, mockPut, mockDelete } = vi.hoisted(() => ({
-  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(), mockDelete: vi.fn(),
+  mockGet: vi.fn(),
+  mockPost: vi.fn(),
+  mockPut: vi.fn(),
+  mockDelete: vi.fn(),
 }));
-vi.mock('@/api/client.js', () => ({
+vi.mock("@/api/client.js", () => ({
   default: { get: mockGet, post: mockPost, put: mockPut, delete: mockDelete },
 }));
 
-import { useFilesStore } from '@/stores/files';
+import { useFilesStore } from "@/stores/files";
 
-describe('filesStore', () => {
+describe("filesStore", () => {
   let store;
 
   beforeEach(() => {
@@ -45,45 +48,45 @@ describe('filesStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
-    expect(store.filesTag).toBe('ALL');
+  it("has correct default state", () => {
+    expect(store.filesTag).toBe("ALL");
     expect(store.httpStatus).toBe(200);
     expect(store.uploadId).toBeNull();
   });
 
-  describe('allFiles getter', () => {
-    it('filters files by current filesTag', () => {
+  describe("allFiles getter", () => {
+    it("filters files by current filesTag", () => {
       store.allEventFiles = [
-        { fileType: 'Log', name: 'a.xes' },
-        { fileType: 'Filter', name: 'b' },
-        { fileType: 'Design', name: 'c' },
+        { fileType: "Log", name: "a.xes" },
+        { fileType: "Filter", name: "b" },
+        { fileType: "Design", name: "c" },
       ];
 
-      store.filesTag = 'COMPARE';
-      expect(store.allFiles.map((f) => f.name)).toEqual(['a.xes', 'b']);
+      store.filesTag = "COMPARE";
+      expect(store.allFiles.map((f) => f.name)).toEqual(["a.xes", "b"]);
 
-      store.filesTag = 'ALL';
+      store.filesTag = "ALL";
       expect(store.allFiles).toHaveLength(3);
     });
   });
 
-  describe('fetchAllFiles', () => {
-    it('fetches and transforms file data', async () => {
+  describe("fetchAllFiles", () => {
+    it("fetches and transforms file data", async () => {
       mockGet.mockResolvedValue({
         data: [
           {
-            type: 'log',
-            name: 'test.xes',
-            owner: { name: 'Alice' },
-            updated_at: '2024-01-15T10:00:00Z',
-            accessed_at: '2024-01-15T11:00:00Z',
+            type: "log",
+            name: "test.xes",
+            owner: { name: "Alice" },
+            updated_at: "2024-01-15T10:00:00Z",
+            accessed_at: "2024-01-15T11:00:00Z",
           },
           {
-            type: 'filter',
-            name: 'filter1',
-            parent: { name: 'test.xes' },
-            owner: { name: 'Bob' },
-            updated_at: '2024-01-16T10:00:00Z',
+            type: "filter",
+            name: "filter1",
+            parent: { name: "test.xes" },
+            owner: { name: "Bob" },
+            updated_at: "2024-01-16T10:00:00Z",
             accessed_at: null,
           },
         ],
@@ -91,36 +94,36 @@ describe('filesStore', () => {
 
       await store.fetchAllFiles();
 
-      expect(mockGet).toHaveBeenCalledWith('/api/files');
+      expect(mockGet).toHaveBeenCalledWith("/api/files");
       expect(store.allEventFiles).toHaveLength(2);
-      expect(store.allEventFiles[0].fileType).toBe('Log');
-      expect(store.allEventFiles[0].icon).toBe('work_history');
-      expect(store.allEventFiles[0].ownerName).toBe('Alice');
-      expect(store.allEventFiles[1].fileType).toBe('Filter');
-      expect(store.allEventFiles[1].parentLog).toBe('test.xes');
+      expect(store.allEventFiles[0].fileType).toBe("Log");
+      expect(store.allEventFiles[0].icon).toBe("work_history");
+      expect(store.allEventFiles[0].ownerName).toBe("Alice");
+      expect(store.allEventFiles[1].fileType).toBe("Filter");
+      expect(store.allEventFiles[1].parentLog).toBe("test.xes");
       expect(store.allEventFiles[1].accessed_at).toBeNull();
     });
 
-    it('does not throw on API failure', async () => {
-      mockGet.mockRejectedValue(new Error('Network error'));
+    it("does not throw on API failure", async () => {
+      mockGet.mockRejectedValue(new Error("Network error"));
       await expect(store.fetchAllFiles()).resolves.toBeUndefined();
     });
 
-    it('maps design files without leaking metadata from previous file items', async () => {
+    it("maps design files without leaking metadata from previous file items", async () => {
       mockGet.mockResolvedValue({
         data: [
           {
-            type: 'log',
-            name: 'order-log',
-            owner: { name: 'Alice' },
-            updated_at: '2024-01-15T10:00:00Z',
+            type: "log",
+            name: "order-log",
+            owner: { name: "Alice" },
+            updated_at: "2024-01-15T10:00:00Z",
             accessed_at: null,
           },
           {
-            type: 'design',
-            name: 'diagram-a',
-            owner: { name: 'Bob' },
-            updated_at: '2024-01-16T10:00:00Z',
+            type: "design",
+            name: "diagram-a",
+            owner: { name: "Bob" },
+            updated_at: "2024-01-16T10:00:00Z",
             accessed_at: null,
           },
         ],
@@ -128,123 +131,121 @@ describe('filesStore', () => {
 
       await store.fetchAllFiles();
 
-      expect(store.allEventFiles[1].icon).toBe('shape_line');
-      expect(store.allEventFiles[1].fileType).toBe('Design');
-      expect(store.allEventFiles[1].parentLog).toBe('diagram-a');
+      expect(store.allEventFiles[1].icon).toBe("shape_line");
+      expect(store.allEventFiles[1].fileType).toBe("Design");
+      expect(store.allEventFiles[1].parentLog).toBe("diagram-a");
     });
   });
 
-  describe('upload', () => {
-    it('uploads file and navigates to Upload page', async () => {
+  describe("upload", () => {
+    it("uploads file and navigates to Upload page", async () => {
       mockPost.mockResolvedValue({ data: { id: 42 } });
       const formData = new FormData();
 
       await store.upload(formData);
 
       expect(mockPost).toHaveBeenCalledWith(
-        '/api/logs/csv-uploads',
+        "/api/logs/csv-uploads",
         formData,
         expect.objectContaining({
-          headers: { 'Content-Type': 'multipart/form-data' },
+          headers: { "Content-Type": "multipart/form-data" },
         }),
       );
       expect(store.uploadId).toBe(42);
-      expect(store.$router.push).toHaveBeenCalledWith({ name: 'Upload' });
+      expect(store.$router.push).toHaveBeenCalledWith({ name: "Upload" });
     });
   });
 
-  describe('getUploadDetail', () => {
-    it('fetches upload preview', async () => {
+  describe("getUploadDetail", () => {
+    it("fetches upload preview", async () => {
       store.uploadId = 10;
       mockGet.mockResolvedValue({
-        data: { preview: { columns: ['a', 'b'] } },
+        data: { preview: { columns: ["a", "b"] } },
       });
 
       await store.getUploadDetail();
 
-      expect(mockGet).toHaveBeenCalledWith('/api/logs/csv-uploads/10');
-      expect(store.allUploadDetail).toEqual({ columns: ['a', 'b'] });
+      expect(mockGet).toHaveBeenCalledWith("/api/logs/csv-uploads/10");
+      expect(store.allUploadDetail).toEqual({ columns: ["a", "b"] });
     });
   });
 
-  describe('rename', () => {
-    it('renames a log file', async () => {
+  describe("rename", () => {
+    it("renames a log file", async () => {
       mockPut.mockResolvedValue({});
       mockGet.mockResolvedValue({ data: [] });
 
-      await store.rename('log', 5, 'new-name');
+      await store.rename("log", 5, "new-name");
 
-      expect(mockPut).toHaveBeenCalledWith('/api/logs/5/name', {
-        name: 'new-name',
+      expect(mockPut).toHaveBeenCalledWith("/api/logs/5/name", {
+        name: "new-name",
       });
     });
   });
 
-  describe('getDependents', () => {
-    it('fetches dependents for a log', async () => {
+  describe("getDependents", () => {
+    it("fetches dependents for a log", async () => {
       mockGet.mockResolvedValue({ data: [{ id: 1 }, { id: 2 }] });
 
-      await store.getDependents('log', 7);
+      await store.getDependents("log", 7);
 
-      expect(mockGet).toHaveBeenCalledWith('/api/logs/7/dependents');
+      expect(mockGet).toHaveBeenCalledWith("/api/logs/7/dependents");
       expect(store.allDependentsData).toEqual([{ id: 1 }, { id: 2 }]);
     });
   });
 
-  describe('deleteFile', () => {
-    it('calls mockDelete before fetchAllFiles', async () => {
+  describe("deleteFile", () => {
+    it("calls mockDelete before fetchAllFiles", async () => {
       const callOrder = [];
       mockDelete.mockImplementation(async () => {
-        callOrder.push('delete');
+        callOrder.push("delete");
         return {};
       });
       mockGet.mockImplementation(async () => {
-        callOrder.push('get');
+        callOrder.push("get");
         return { data: [] };
       });
 
-      await store.deleteFile('log', 1);
+      await store.deleteFile("log", 1);
 
-      expect(mockDelete).toHaveBeenCalledWith('/api/logs/1');
-      expect(callOrder.indexOf('delete')).toBeLessThan(
-        callOrder.indexOf('get'),
+      expect(mockDelete).toHaveBeenCalledWith("/api/logs/1");
+      expect(callOrder.indexOf("delete")).toBeLessThan(
+        callOrder.indexOf("get"),
       );
     });
 
-    it('returns early for invalid id without throwing', async () => {
-      await expect(
-        store.deleteFile('log', null),
-      ).resolves.toBeUndefined();
+    it("returns early for invalid id without throwing", async () => {
+      await expect(store.deleteFile("log", null)).resolves.toBeUndefined();
 
       expect(mockDelete).not.toHaveBeenCalled();
     });
   });
 
-  describe('deletionRecord', () => {
-    it('deletes a deletion record', async () => {
+  describe("deletionRecord", () => {
+    it("deletes a deletion record", async () => {
       mockDelete.mockResolvedValue({});
 
       await store.deletionRecord(5);
 
-      expect(mockDelete).toHaveBeenCalledWith('/api/deletion/5');
+      expect(mockDelete).toHaveBeenCalledWith("/api/deletion/5");
     });
   });
 
-  describe('downloadFileCSV', () => {
-    it('downloads CSV for a log', async () => {
-      mockGet.mockResolvedValue({ data: 'col1,col2\na,b' });
+  describe("downloadFileCSV", () => {
+    it("downloads CSV for a log", async () => {
+      mockGet.mockResolvedValue({ data: "col1,col2\na,b" });
 
-      window.URL.createObjectURL = vi.fn().mockReturnValue('blob:test');
+      window.URL.createObjectURL = vi.fn().mockReturnValue("blob:test");
       window.URL.revokeObjectURL = vi.fn();
 
-      await store.downloadFileCSV('log', 3, 'my-file');
+      await store.downloadFileCSV("log", 3, "my-file");
 
-      expect(mockGet).toHaveBeenCalledWith('/api/logs/3/csv');
-      expect(window.URL.revokeObjectURL).toHaveBeenCalledWith('blob:test');
+      expect(mockGet).toHaveBeenCalledWith("/api/logs/3/csv");
+      expect(window.URL.revokeObjectURL).toHaveBeenCalledWith("blob:test");
     });
 
-    it('returns early for unsupported type', async () => {
-      await store.downloadFileCSV('log-check', 3, 'file');
+    it("returns early for unsupported type", async () => {
+      await store.downloadFileCSV("log-check", 3, "file");
 
       expect(mockGet).not.toHaveBeenCalled();
     });
diff --git a/tests/stores/loading.test.js b/tests/stores/loading.test.js
index 3efb87e..7887ae6 100644
--- a/tests/stores/loading.test.js
+++ b/tests/stores/loading.test.js
@@ -3,11 +3,11 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
+import { describe, it, expect, beforeEach } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { useLoadingStore } from "@/stores/loading";
 
-describe('loadingStore', () => {
+describe("loadingStore", () => {
   let store;
 
   beforeEach(() => {
@@ -15,16 +15,16 @@ describe('loadingStore', () => {
     store = useLoadingStore();
   });
 
-  it('has isLoading true by default', () => {
+  it("has isLoading true by default", () => {
     expect(store.isLoading).toBe(true);
   });
 
-  it('setIsLoading sets to false', () => {
+  it("setIsLoading sets to false", () => {
     store.setIsLoading(false);
     expect(store.isLoading).toBe(false);
   });
 
-  it('setIsLoading sets to true', () => {
+  it("setIsLoading sets to true", () => {
     store.setIsLoading(false);
     store.setIsLoading(true);
     expect(store.isLoading).toBe(true);
diff --git a/tests/stores/login.test.js b/tests/stores/login.test.js
index d3357eb..b0619c5 100644
--- a/tests/stores/login.test.js
+++ b/tests/stores/login.test.js
@@ -3,27 +3,27 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
 // Mock apiError to prevent side effects (imports router, pinia, toast)
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
 
-import axios from 'axios';
+import axios from "axios";
 
 const { mockClientGet } = vi.hoisted(() => ({ mockClientGet: vi.fn() }));
-vi.mock('@/api/client.js', () => ({
+vi.mock("@/api/client.js", () => ({
   default: { get: mockClientGet },
 }));
 
-import { useLoginStore } from '@/stores/login';
+import { useLoginStore } from "@/stores/login";
 
 // Mock axios methods (used for signIn/refreshToken which call plain axios)
-vi.spyOn(axios, 'post').mockImplementation(vi.fn());
+vi.spyOn(axios, "post").mockImplementation(vi.fn());
 
-describe('loginStore', () => {
+describe("loginStore", () => {
   let store;
 
   beforeEach(() => {
@@ -32,106 +32,106 @@ describe('loginStore', () => {
     store.$router = { push: vi.fn() };
     vi.clearAllMocks();
     // Clear cookies
-    document.cookie.split(';').forEach((c) => {
-      const name = c.split('=')[0].trim();
+    document.cookie.split(";").forEach((c) => {
+      const name = c.split("=")[0].trim();
       if (name) {
-        document.cookie = name + '=; Max-Age=-99999999; path=/';
+        document.cookie = name + "=; Max-Age=-99999999; path=/";
       }
     });
   });
 
-  it('has correct default state', () => {
-    expect(store.auth.grant_type).toBe('password');
-    expect(store.auth.username).toBe('');
+  it("has correct default state", () => {
+    expect(store.auth.grant_type).toBe("password");
+    expect(store.auth.username).toBe("");
     expect(store.isLoggedIn).toBe(false);
     expect(store.isInvalid).toBe(false);
   });
 
-  describe('signIn', () => {
-    it('stores token and navigates on success', async () => {
+  describe("signIn", () => {
+    it("stores token and navigates on success", async () => {
       axios.post.mockResolvedValue({
         data: {
-          access_token: 'test-access-token',
-          refresh_token: 'test-refresh-token',
+          access_token: "test-access-token",
+          refresh_token: "test-refresh-token",
         },
       });
 
       await store.signIn();
 
       expect(axios.post).toHaveBeenCalledWith(
-        '/api/oauth/token',
+        "/api/oauth/token",
         store.auth,
         expect.objectContaining({
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
         }),
       );
       expect(store.isLoggedIn).toBe(true);
       // Verify token cookie was set with Secure flag
       // (jsdom drops Secure cookies, so spy on setter)
-      const cookieSetter = vi.spyOn(document, 'cookie', 'set');
+      const cookieSetter = vi.spyOn(document, "cookie", "set");
       vi.clearAllMocks();
       axios.post.mockResolvedValue({
         data: {
-          access_token: 'test-access-token',
-          refresh_token: 'test-refresh-token',
+          access_token: "test-access-token",
+          refresh_token: "test-refresh-token",
         },
       });
       await store.signIn();
-      const tokenCall = cookieSetter.mock.calls.find(
-        (c) => c[0].includes('luciaToken='),
+      const tokenCall = cookieSetter.mock.calls.find((c) =>
+        c[0].includes("luciaToken="),
       );
       expect(tokenCall).toBeDefined();
-      expect(tokenCall[0]).toContain('Secure');
+      expect(tokenCall[0]).toContain("Secure");
       cookieSetter.mockRestore();
-      expect(store.$router.push).toHaveBeenCalledWith('/files');
+      expect(store.$router.push).toHaveBeenCalledWith("/files");
     });
 
-    it('redirects to remembered URL when set', async () => {
+    it("redirects to remembered URL when set", async () => {
       axios.post.mockResolvedValue({
         data: {
-          access_token: 'token',
-          refresh_token: 'refresh',
+          access_token: "token",
+          refresh_token: "refresh",
         },
       });
       // btoa('/dashboard') = 'L2Rhc2hib2FyZA=='
-      store.rememberedReturnToUrl = btoa('/dashboard');
+      store.rememberedReturnToUrl = btoa("/dashboard");
 
       // Mock window.location.href setter
       const originalLocation = window.location;
       delete window.location;
-      window.location = { href: '' };
+      window.location = { href: "" };
 
       await store.signIn();
 
-      expect(window.location.href).toBe('/dashboard');
+      expect(window.location.href).toBe("/dashboard");
       window.location = originalLocation;
     });
 
-    it('does not redirect to external URL (open redirect prevention)', async () => {
+    it("does not redirect to external URL (open redirect prevention)", async () => {
       axios.post.mockResolvedValue({
         data: {
-          access_token: 'token',
-          refresh_token: 'refresh',
+          access_token: "token",
+          refresh_token: "refresh",
         },
       });
       // Attacker crafts a return-to URL pointing to an external site
-      store.rememberedReturnToUrl = btoa('https://evil.example.com/steal');
+      store.rememberedReturnToUrl = btoa("https://evil.example.com/steal");
 
       const originalLocation = window.location;
       delete window.location;
-      window.location = { href: '' };
+      window.location = { href: "" };
 
       await store.signIn();
 
       // Should NOT redirect to the external URL
-      expect(window.location.href).not.toBe('https://evil.example.com/steal');
+      expect(window.location.href).not.toBe("https://evil.example.com/steal");
       // Should fall back to /files
-      expect(store.$router.push).toHaveBeenCalledWith('/files');
+      expect(store.$router.push).toHaveBeenCalledWith("/files");
       window.location = originalLocation;
     });
 
-    it('sets isInvalid on error', async () => {
-      axios.post.mockRejectedValue(new Error('401'));
+    it("sets isInvalid on error", async () => {
+      axios.post.mockRejectedValue(new Error("401"));
 
       await store.signIn();
 
@@ -139,34 +139,34 @@ describe('loginStore', () => {
     });
   });
 
-  describe('logOut', () => {
-    it('clears auth state and navigates to login', () => {
+  describe("logOut", () => {
+    it("clears auth state and navigates to login", () => {
       store.isLoggedIn = true;
       store.logOut();
 
       expect(store.isLoggedIn).toBe(false);
-      expect(store.$router.push).toHaveBeenCalledWith('/login');
+      expect(store.$router.push).toHaveBeenCalledWith("/login");
     });
   });
 
-  describe('getUserData', () => {
-    it('stores user data on success', async () => {
+  describe("getUserData", () => {
+    it("stores user data on success", async () => {
       mockClientGet.mockResolvedValue({
-        data: { username: 'testuser', name: 'Test User' },
+        data: { username: "testuser", name: "Test User" },
       });
 
       await store.getUserData();
 
-      expect(mockClientGet).toHaveBeenCalledWith('/api/my-account');
+      expect(mockClientGet).toHaveBeenCalledWith("/api/my-account");
       expect(store.userData).toEqual({
-        username: 'testuser',
-        name: 'Test User',
+        username: "testuser",
+        name: "Test User",
       });
     });
   });
 
-  describe('checkLogin', () => {
-    it('does not redirect on success', async () => {
+  describe("checkLogin", () => {
+    it("does not redirect on success", async () => {
       mockClientGet.mockResolvedValue({ data: {} });
 
       await store.checkLogin();
@@ -174,34 +174,34 @@ describe('loginStore', () => {
       expect(store.$router.push).not.toHaveBeenCalled();
     });
 
-    it('redirects to login on error', async () => {
-      mockClientGet.mockRejectedValue(new Error('401'));
+    it("redirects to login on error", async () => {
+      mockClientGet.mockRejectedValue(new Error("401"));
 
       await store.checkLogin();
 
-      expect(store.$router.push).toHaveBeenCalledWith('/login');
+      expect(store.$router.push).toHaveBeenCalledWith("/login");
     });
   });
 
-  it('setRememberedReturnToUrl stores URL', () => {
-    store.setRememberedReturnToUrl('abc');
-    expect(store.rememberedReturnToUrl).toBe('abc');
+  it("setRememberedReturnToUrl stores URL", () => {
+    store.setRememberedReturnToUrl("abc");
+    expect(store.rememberedReturnToUrl).toBe("abc");
   });
 
-  it('setIsLoggedIn sets boolean', () => {
+  it("setIsLoggedIn sets boolean", () => {
     store.setIsLoggedIn(true);
     expect(store.isLoggedIn).toBe(true);
   });
 
-  describe('refreshToken', () => {
-    it('sends request with correct config and updates tokens on success', async () => {
-      document.cookie = 'luciaRefreshToken=old-refresh-token';
+  describe("refreshToken", () => {
+    it("sends request with correct config and updates tokens on success", async () => {
+      document.cookie = "luciaRefreshToken=old-refresh-token";
 
       axios.post.mockResolvedValue({
         status: 200,
         data: {
-          access_token: 'new-access-token',
-          refresh_token: 'new-refresh-token',
+          access_token: "new-access-token",
+          refresh_token: "new-refresh-token",
         },
       });
 
@@ -209,44 +209,43 @@ describe('loginStore', () => {
 
       // Should call with content-type header (config must be defined)
       expect(axios.post).toHaveBeenCalledWith(
-        '/api/oauth/token',
+        "/api/oauth/token",
         expect.objectContaining({
-          grant_type: 'refresh_token',
-          refresh_token: 'old-refresh-token',
+          grant_type: "refresh_token",
+          refresh_token: "old-refresh-token",
         }),
         expect.objectContaining({
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
         }),
       );
 
       // Verify cookies were set with Secure flag
-      const cookieSetter = vi.spyOn(document, 'cookie', 'set');
+      const cookieSetter = vi.spyOn(document, "cookie", "set");
       vi.clearAllMocks();
-      document.cookie = 'luciaRefreshToken=old-refresh-token';
+      document.cookie = "luciaRefreshToken=old-refresh-token";
       axios.post.mockResolvedValue({
         status: 200,
         data: {
-          access_token: 'new-access-token',
-          refresh_token: 'new-refresh-token',
+          access_token: "new-access-token",
+          refresh_token: "new-refresh-token",
         },
       });
       await store.refreshToken();
-      const tokenCall = cookieSetter.mock.calls.find(
-        (c) => c[0].includes('luciaToken='),
+      const tokenCall = cookieSetter.mock.calls.find((c) =>
+        c[0].includes("luciaToken="),
       );
       expect(tokenCall).toBeDefined();
-      expect(tokenCall[0]).toContain('Secure');
+      expect(tokenCall[0]).toContain("Secure");
       cookieSetter.mockRestore();
     });
 
-    it('redirects to login and re-throws on failure', async () => {
-      document.cookie = 'luciaRefreshToken=old-refresh-token';
-      axios.post.mockRejectedValue(new Error('401'));
+    it("redirects to login and re-throws on failure", async () => {
+      document.cookie = "luciaRefreshToken=old-refresh-token";
+      axios.post.mockRejectedValue(new Error("401"));
 
-      await expect(store.refreshToken()).rejects.toThrow('401');
+      await expect(store.refreshToken()).rejects.toThrow("401");
 
-      expect(store.$router.push).toHaveBeenCalledWith('/login');
+      expect(store.$router.push).toHaveBeenCalledWith("/login");
     });
   });
-
 });
diff --git a/tests/stores/mapCompareStore.test.js b/tests/stores/mapCompareStore.test.js
index ed2faae..5ba877d 100644
--- a/tests/stores/mapCompareStore.test.js
+++ b/tests/stores/mapCompareStore.test.js
@@ -3,11 +3,11 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { useMapCompareStore } from '@/stores/mapCompareStore';
+import { describe, it, expect, beforeEach } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { useMapCompareStore } from "@/stores/mapCompareStore";
 
-describe('mapCompareStore', () => {
+describe("mapCompareStore", () => {
   let store;
 
   beforeEach(() => {
@@ -15,22 +15,22 @@ describe('mapCompareStore', () => {
     store = useMapCompareStore();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.routeParam).toEqual({
-      primaryType: '',
-      primaryId: '',
-      secondaryType: '',
-      secondaryId: '',
+      primaryType: "",
+      primaryId: "",
+      secondaryType: "",
+      secondaryId: "",
     });
   });
 
-  it('setCompareRouteParam sets all params', () => {
-    store.setCompareRouteParam('log', '1', 'filter', '2');
+  it("setCompareRouteParam sets all params", () => {
+    store.setCompareRouteParam("log", "1", "filter", "2");
     expect(store.routeParam).toEqual({
-      primaryType: 'log',
-      primaryId: '1',
-      secondaryType: 'filter',
-      secondaryId: '2',
+      primaryType: "log",
+      primaryId: "1",
+      secondaryType: "filter",
+      secondaryId: "2",
     });
   });
 });
diff --git a/tests/stores/mapPathStore.test.js b/tests/stores/mapPathStore.test.js
index 8ebe5ec..ecf93c6 100644
--- a/tests/stores/mapPathStore.test.js
+++ b/tests/stores/mapPathStore.test.js
@@ -3,31 +3,31 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/06
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
 // Mock allMapData store (used by createInsightWithPath / createPaths)
-vi.mock('@/stores/allMapData', () => ({
+vi.mock("@/stores/allMapData", () => ({
   default: () => ({ insights: {} }),
 }));
 
 // Mock SVG asset imports
-vi.mock('@/assets/capsule1-glow.svg', () => ({ default: 'glow1' }));
-vi.mock('@/assets/capsule2-glow.svg', () => ({ default: 'glow2' }));
-vi.mock('@/assets/capsule3-glow.svg', () => ({ default: 'glow3' }));
-vi.mock('@/assets/capsule4-glow.svg', () => ({ default: 'glow4' }));
-vi.mock('@/assets/capsule1.svg', () => ({ default: 'cap1' }));
-vi.mock('@/assets/capsule2.svg', () => ({ default: 'cap2' }));
-vi.mock('@/assets/capsule3.svg', () => ({ default: 'cap3' }));
-vi.mock('@/assets/capsule4.svg', () => ({ default: 'cap4' }));
+vi.mock("@/assets/capsule1-glow.svg", () => ({ default: "glow1" }));
+vi.mock("@/assets/capsule2-glow.svg", () => ({ default: "glow2" }));
+vi.mock("@/assets/capsule3-glow.svg", () => ({ default: "glow3" }));
+vi.mock("@/assets/capsule4-glow.svg", () => ({ default: "glow4" }));
+vi.mock("@/assets/capsule1.svg", () => ({ default: "cap1" }));
+vi.mock("@/assets/capsule2.svg", () => ({ default: "cap2" }));
+vi.mock("@/assets/capsule3.svg", () => ({ default: "cap3" }));
+vi.mock("@/assets/capsule4.svg", () => ({ default: "cap4" }));
 
-import { useMapPathStore } from '@/stores/mapPathStore';
+import { useMapPathStore } from "@/stores/mapPathStore";
 
 /**
  * Creates a mock Cytoscape node.
  */
 function mockNode(label, level = 0) {
-  const nodeData = { label, level, nodeImageUrl: '' };
+  const nodeData = { label, level, nodeImageUrl: "" };
   const classes = new Set();
   const node = {
     data: vi.fn((key, value) => {
@@ -37,8 +37,14 @@ function mockNode(label, level = 0) {
       }
       return nodeData[key];
     }),
-    addClass: vi.fn((cls) => { classes.add(cls); return node; }),
-    removeClass: vi.fn((cls) => { classes.delete(cls); return node; }),
+    addClass: vi.fn((cls) => {
+      classes.add(cls);
+      return node;
+    }),
+    removeClass: vi.fn((cls) => {
+      classes.delete(cls);
+      return node;
+    }),
     hasClass: (cls) => classes.has(cls),
     outgoers: vi.fn(() => mockCollection([])),
     incomers: vi.fn(() => mockCollection([])),
@@ -56,10 +62,16 @@ function mockNode(label, level = 0) {
 function mockEdge() {
   const classes = new Set();
   const edge = {
-    addClass: vi.fn((cls) => { classes.add(cls); return edge; }),
-    removeClass: vi.fn((cls) => { classes.delete(cls); return edge; }),
-    source: vi.fn(() => mockNode('src')),
-    target: vi.fn(() => mockNode('tgt')),
+    addClass: vi.fn((cls) => {
+      classes.add(cls);
+      return edge;
+    }),
+    removeClass: vi.fn((cls) => {
+      classes.delete(cls);
+      return edge;
+    }),
+    source: vi.fn(() => mockNode("src")),
+    target: vi.fn(() => mockNode("tgt")),
     _classes: classes,
   };
   return edge;
@@ -90,7 +102,7 @@ function mockCytoscape(nodes = [], edges = []) {
   };
 }
 
-describe('mapPathStore', () => {
+describe("mapPathStore", () => {
   let store;
 
   beforeEach(() => {
@@ -99,26 +111,26 @@ describe('mapPathStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
-    expect(store.processOrBPMN).toBe('process');
-    expect(store.curveType).toBe('curved');
-    expect(store.directionType).toBe('horizontal');
+  it("has correct default state", () => {
+    expect(store.processOrBPMN).toBe("process");
+    expect(store.curveType).toBe("curved");
+    expect(store.directionType).toBe("horizontal");
     expect(store.isBPMNOn).toBe(false);
     expect(store.allPaths).toEqual([]);
     expect(store.activeTrace).toBe(0);
     expect(store.lastClickedNode).toBeNull();
   });
 
-  it('setIsBPMNOn updates state', () => {
+  it("setIsBPMNOn updates state", () => {
     store.setIsBPMNOn(true);
     expect(store.isBPMNOn).toBe(true);
     store.setIsBPMNOn(false);
     expect(store.isBPMNOn).toBe(false);
   });
 
-  describe('clearAllHighlight', () => {
-    it('removes highlight classes from all nodes and edges', () => {
-      const node1 = mockNode('A', 0);
+  describe("clearAllHighlight", () => {
+    it("removes highlight classes from all nodes and edges", () => {
+      const node1 = mockNode("A", 0);
       const edge1 = mockEdge();
       const cy = mockCytoscape([node1], [edge1]);
       store.cytoscape.process.curved.horizontal = cy;
@@ -129,15 +141,15 @@ describe('mapPathStore', () => {
       expect(cy.nodes).toHaveBeenCalled();
     });
 
-    it('does not throw when cytoscape is null', () => {
+    it("does not throw when cytoscape is null", () => {
       store.cytoscape.process.curved.horizontal = null;
       expect(() => store.clearAllHighlight()).not.toThrow();
     });
   });
 
-  describe('onNodeClickHighlightEdges', () => {
-    it('highlights clicked node and its edges', () => {
-      const node = mockNode('Activity', 1);
+  describe("onNodeClickHighlightEdges", () => {
+    it("highlights clicked node and its edges", () => {
+      const node = mockNode("Activity", 1);
       const outEdge = mockEdge();
       const inEdge = mockEdge();
       node.outgoers.mockReturnValue(mockCollection([outEdge]));
@@ -147,17 +159,17 @@ describe('mapPathStore', () => {
 
       store.onNodeClickHighlightEdges(node);
 
-      expect(node.addClass).toHaveBeenCalledWith('highlight-node');
-      expect(outEdge.addClass).toHaveBeenCalledWith('highlight-edge');
-      expect(inEdge.addClass).toHaveBeenCalledWith('highlight-edge');
+      expect(node.addClass).toHaveBeenCalledWith("highlight-node");
+      expect(outEdge.addClass).toHaveBeenCalledWith("highlight-edge");
+      expect(inEdge.addClass).toHaveBeenCalledWith("highlight-edge");
       expect(store.lastClickedNode).toStrictEqual(node);
     });
   });
 
-  describe('onEdgeClickHighlightNodes', () => {
-    it('highlights source and target nodes of clicked edge', () => {
-      const src = mockNode('Start', 0);
-      const tgt = mockNode('End', 2);
+  describe("onEdgeClickHighlightNodes", () => {
+    it("highlights source and target nodes of clicked edge", () => {
+      const src = mockNode("Start", 0);
+      const tgt = mockNode("End", 2);
       const edge = mockEdge();
       edge.source.mockReturnValue(src);
       edge.target.mockReturnValue(tgt);
@@ -166,9 +178,9 @@ describe('mapPathStore', () => {
 
       store.onEdgeClickHighlightNodes(edge);
 
-      expect(src.addClass).toHaveBeenCalledWith('highlight-node');
-      expect(tgt.addClass).toHaveBeenCalledWith('highlight-node');
-      expect(edge.addClass).toHaveBeenCalledWith('highlight-edge');
+      expect(src.addClass).toHaveBeenCalledWith("highlight-node");
+      expect(tgt.addClass).toHaveBeenCalledWith("highlight-node");
+      expect(edge.addClass).toHaveBeenCalledWith("highlight-edge");
     });
   });
 });
diff --git a/tests/stores/modal.test.js b/tests/stores/modal.test.js
index ca1c8dc..2581f06 100644
--- a/tests/stores/modal.test.js
+++ b/tests/stores/modal.test.js
@@ -3,12 +3,12 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { useModalStore } from '@/stores/modal';
-import { MODAL_ACCT_INFO, MODAL_DELETE } from '@/constants/constants.js';
+import { describe, it, expect, beforeEach } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { MODAL_ACCT_INFO, MODAL_DELETE } from "@/constants/constants.js";
 
-describe('modalStore', () => {
+describe("modalStore", () => {
   let store;
 
   beforeEach(() => {
@@ -16,18 +16,18 @@ describe('modalStore', () => {
     store = useModalStore();
   });
 
-  it('has default state', () => {
+  it("has default state", () => {
     expect(store.isModalOpen).toBe(false);
     expect(store.whichModal).toBe(MODAL_ACCT_INFO);
   });
 
-  it('openModal sets isModalOpen and whichModal', () => {
+  it("openModal sets isModalOpen and whichModal", () => {
     store.openModal(MODAL_DELETE);
     expect(store.isModalOpen).toBe(true);
     expect(store.whichModal).toBe(MODAL_DELETE);
   });
 
-  it('closeModal sets isModalOpen to false', async () => {
+  it("closeModal sets isModalOpen to false", async () => {
     store.openModal(MODAL_DELETE);
     await store.closeModal();
     expect(store.isModalOpen).toBe(false);
diff --git a/tests/stores/pageAdmin.test.js b/tests/stores/pageAdmin.test.js
index 4997a06..8d1d515 100644
--- a/tests/stores/pageAdmin.test.js
+++ b/tests/stores/pageAdmin.test.js
@@ -3,11 +3,11 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { usePageAdminStore } from '@/stores/pageAdmin';
+import { describe, it, expect, beforeEach } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { usePageAdminStore } from "@/stores/pageAdmin";
 
-describe('pageAdminStore', () => {
+describe("pageAdminStore", () => {
   let store;
 
   beforeEach(() => {
@@ -15,81 +15,81 @@ describe('pageAdminStore', () => {
     store = usePageAdminStore();
   });
 
-  it('has correct default state', () => {
-    expect(store.activePage).toBe('MAP');
-    expect(store.previousPage).toBe('MAP');
-    expect(store.pendingActivePage).toBe('FILES');
+  it("has correct default state", () => {
+    expect(store.activePage).toBe("MAP");
+    expect(store.previousPage).toBe("MAP");
+    expect(store.pendingActivePage).toBe("FILES");
     expect(store.isPagePending).toBe(false);
     expect(store.shouldKeepPreviousPage).toBe(false);
-    expect(store.currentMapFile).toBe('');
+    expect(store.currentMapFile).toBe("");
   });
 
-  it('setActivePage converts page name', () => {
-    store.setActivePage('CheckConformance');
-    expect(store.activePage).toBe('CONFORMANCE');
+  it("setActivePage converts page name", () => {
+    store.setActivePage("CheckConformance");
+    expect(store.activePage).toBe("CONFORMANCE");
   });
 
-  it('setPreviousPage converts page name', () => {
-    store.setPreviousPage('CheckPerformance');
-    expect(store.previousPage).toBe('PERFORMANCE');
+  it("setPreviousPage converts page name", () => {
+    store.setPreviousPage("CheckPerformance");
+    expect(store.previousPage).toBe("PERFORMANCE");
   });
 
-  it('setPreviousPageUsingActivePage copies activePage to previousPage', () => {
-    store.setActivePage('CONFORMANCE');
+  it("setPreviousPageUsingActivePage copies activePage to previousPage", () => {
+    store.setActivePage("CONFORMANCE");
     store.setPreviousPageUsingActivePage();
-    expect(store.previousPage).toBe('CONFORMANCE');
+    expect(store.previousPage).toBe("CONFORMANCE");
   });
 
-  it('setIsPagePendingBoolean sets boolean', () => {
+  it("setIsPagePendingBoolean sets boolean", () => {
     store.setIsPagePendingBoolean(true);
     expect(store.isPagePending).toBe(true);
   });
 
-  it('setPendingActivePage converts and sets page', () => {
-    store.setPendingActivePage('CheckMap');
-    expect(store.pendingActivePage).toBe('MAP');
+  it("setPendingActivePage converts and sets page", () => {
+    store.setPendingActivePage("CheckMap");
+    expect(store.pendingActivePage).toBe("MAP");
   });
 
-  it('copyPendingPageToActivePage transfers value', () => {
-    store.setPendingActivePage('CheckConformance');
+  it("copyPendingPageToActivePage transfers value", () => {
+    store.setPendingActivePage("CheckConformance");
     store.copyPendingPageToActivePage();
-    expect(store.activePage).toBe('CONFORMANCE');
+    expect(store.activePage).toBe("CONFORMANCE");
   });
 
-  it('clearPendingActivePage resets to empty', () => {
-    store.setPendingActivePage('CheckMap');
+  it("clearPendingActivePage resets to empty", () => {
+    store.setPendingActivePage("CheckMap");
     store.clearPendingActivePage();
-    expect(store.pendingActivePage).toBe('');
+    expect(store.pendingActivePage).toBe("");
   });
 
-  it('keepPreviousPage restores previous page', () => {
-    store.setPreviousPage('CONFORMANCE');
-    store.setActivePage('PERFORMANCE');
+  it("keepPreviousPage restores previous page", () => {
+    store.setPreviousPage("CONFORMANCE");
+    store.setActivePage("PERFORMANCE");
     store.keepPreviousPage();
-    expect(store.activePage).toBe('CONFORMANCE');
+    expect(store.activePage).toBe("CONFORMANCE");
     expect(store.shouldKeepPreviousPage).toBe(true);
   });
 
-  it('clearShouldKeepPreviousPageBoolean resets flag', () => {
+  it("clearShouldKeepPreviousPageBoolean resets flag", () => {
     store.keepPreviousPage();
     store.clearShouldKeepPreviousPageBoolean();
     expect(store.shouldKeepPreviousPage).toBe(false);
   });
 
-  it('setCurrentMapFile sets file name', () => {
-    store.setCurrentMapFile('test.csv');
-    expect(store.currentMapFile).toBe('test.csv');
+  it("setCurrentMapFile sets file name", () => {
+    store.setCurrentMapFile("test.csv");
+    expect(store.currentMapFile).toBe("test.csv");
   });
 
-  it('setActivePageComputedByRoute extracts route name', () => {
-    const routeMatched = [{ name: 'CheckMap' }];
+  it("setActivePageComputedByRoute extracts route name", () => {
+    const routeMatched = [{ name: "CheckMap" }];
     store.setActivePageComputedByRoute(routeMatched);
-    expect(store.activePageComputedByRoute).toBe('MAP');
+    expect(store.activePageComputedByRoute).toBe("MAP");
   });
 
-  it('setActivePageComputedByRoute handles empty array', () => {
+  it("setActivePageComputedByRoute handles empty array", () => {
     store.setActivePageComputedByRoute([]);
     // Should not change default value
-    expect(store.activePageComputedByRoute).toBe('MAP');
+    expect(store.activePageComputedByRoute).toBe("MAP");
   });
 });
diff --git a/tests/stores/performance.test.js b/tests/stores/performance.test.js
index ef3eb98..533266e 100644
--- a/tests/stores/performance.test.js
+++ b/tests/stores/performance.test.js
@@ -3,21 +3,21 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
 
 const { mockGet } = vi.hoisted(() => ({ mockGet: vi.fn() }));
-vi.mock('@/api/client.js', () => ({
+vi.mock("@/api/client.js", () => ({
   default: { get: mockGet },
 }));
 
-import { usePerformanceStore } from '@/stores/performance';
+import { usePerformanceStore } from "@/stores/performance";
 
-describe('performanceStore', () => {
+describe("performanceStore", () => {
   let store;
 
   beforeEach(() => {
@@ -26,62 +26,57 @@ describe('performanceStore', () => {
     vi.clearAllMocks();
   });
 
-  it('has correct default state', () => {
+  it("has correct default state", () => {
     expect(store.allPerformanceData).toBeNull();
     expect(store.freqChartData).toBeNull();
   });
 
-  it('performanceData getter returns allPerformanceData', () => {
+  it("performanceData getter returns allPerformanceData", () => {
     store.allPerformanceData = { time: {}, freq: {} };
     expect(store.performanceData).toEqual({ time: {}, freq: {} });
   });
 
-  describe('getPerformance', () => {
-    it('fetches log performance data', async () => {
+  describe("getPerformance", () => {
+    it("fetches log performance data", async () => {
       const mockData = { time: { charts: [] }, freq: { charts: [] } };
       mockGet.mockResolvedValue({ data: mockData });
 
-      await store.getPerformance('log', 1);
+      await store.getPerformance("log", 1);
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/logs/1/performance',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/logs/1/performance");
       expect(store.allPerformanceData).toEqual(mockData);
     });
 
-    it('fetches filter performance data', async () => {
+    it("fetches filter performance data", async () => {
       mockGet.mockResolvedValue({ data: { time: {} } });
 
-      await store.getPerformance('filter', 5);
+      await store.getPerformance("filter", 5);
 
-      expect(mockGet).toHaveBeenCalledWith(
-        '/api/filters/5/performance',
-      );
+      expect(mockGet).toHaveBeenCalledWith("/api/filters/5/performance");
     });
 
-    it('does not throw on API failure', async () => {
-      mockGet.mockRejectedValue(new Error('Network error'));
+    it("does not throw on API failure", async () => {
+      mockGet.mockRejectedValue(new Error("Network error"));
 
       // Should not throw - apiError handles it
-      await expect(store.getPerformance('log', 1))
-        .resolves.not.toThrow();
+      await expect(store.getPerformance("log", 1)).resolves.not.toThrow();
       expect(store.allPerformanceData).toBeNull();
     });
   });
 
-  it('setFreqChartData sets data', () => {
+  it("setFreqChartData sets data", () => {
     const data = { labels: [], datasets: [] };
     store.setFreqChartData(data);
     expect(store.freqChartData).toEqual(data);
   });
 
-  it('setFreqChartOptions sets options', () => {
+  it("setFreqChartOptions sets options", () => {
     const opts = { responsive: true };
     store.setFreqChartOptions(opts);
     expect(store.freqChartOptions).toEqual(opts);
   });
 
-  it('setFreqChartXData sets x data', () => {
+  it("setFreqChartXData sets x data", () => {
     const xData = { minX: 0, maxX: 100 };
     store.setFreqChartXData(xData);
     expect(store.freqChartXData).toEqual(xData);
diff --git a/tests/unit/module/abbreviateNumber.test.js b/tests/unit/module/abbreviateNumber.test.js
index 4434a43..b8cdbc3 100644
--- a/tests/unit/module/abbreviateNumber.test.js
+++ b/tests/unit/module/abbreviateNumber.test.js
@@ -3,54 +3,53 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import abbreviateNumber from '@/module/abbreviateNumber.js';
+import { describe, it, expect } from "vitest";
+import abbreviateNumber from "@/module/abbreviateNumber.js";
 
-describe('abbreviateNumber', () => {
+describe("abbreviateNumber", () => {
   it('returns "0" for 0 seconds', () => {
-    expect(abbreviateNumber(0)).toBe('0');
+    expect(abbreviateNumber(0)).toBe("0");
   });
 
-  it('returns seconds only when < 60', () => {
-    expect(abbreviateNumber(45).trim()).toBe('45s');
+  it("returns seconds only when < 60", () => {
+    expect(abbreviateNumber(45).trim()).toBe("45s");
   });
 
-  it('returns minutes and seconds', () => {
+  it("returns minutes and seconds", () => {
     // 2m 30s = 150s
-    expect(abbreviateNumber(150).trim()).toBe('2m 30s');
+    expect(abbreviateNumber(150).trim()).toBe("2m 30s");
   });
 
-  it('returns hours, minutes, and seconds', () => {
+  it("returns hours, minutes, and seconds", () => {
     // 1h 1m 1s = 3661s
-    expect(abbreviateNumber(3661).trim()).toBe('1h 1m 1s');
+    expect(abbreviateNumber(3661).trim()).toBe("1h 1m 1s");
   });
 
-  it('returns days, hours, minutes, and seconds', () => {
+  it("returns days, hours, minutes, and seconds", () => {
     // 1d 2h 3m 4s = 93784s
-    expect(abbreviateNumber(93784).trim())
-      .toBe('1d 2h 3m 4s');
+    expect(abbreviateNumber(93784).trim()).toBe("1d 2h 3m 4s");
   });
 
-  it('handles exact day boundary', () => {
+  it("handles exact day boundary", () => {
     // 1d = 86400s
-    expect(abbreviateNumber(86400).trim()).toBe('1d');
+    expect(abbreviateNumber(86400).trim()).toBe("1d");
   });
 
-  it('handles exact hour boundary', () => {
+  it("handles exact hour boundary", () => {
     // 1h = 3600s
-    expect(abbreviateNumber(3600).trim()).toBe('1h');
+    expect(abbreviateNumber(3600).trim()).toBe("1h");
   });
 
-  it('handles string input by parsing as int', () => {
-    expect(abbreviateNumber('150').trim()).toBe('2m 30s');
+  it("handles string input by parsing as int", () => {
+    expect(abbreviateNumber("150").trim()).toBe("2m 30s");
   });
 
-  it('handles NaN input', () => {
-    expect(abbreviateNumber('abc').trim()).toBe('');
+  it("handles NaN input", () => {
+    expect(abbreviateNumber("abc").trim()).toBe("");
   });
 
-  it('does not have trailing whitespace', () => {
-    expect(abbreviateNumber(45)).toBe('45s');
-    expect(abbreviateNumber(3661)).toBe('1h 1m 1s');
+  it("does not have trailing whitespace", () => {
+    expect(abbreviateNumber(45)).toBe("45s");
+    expect(abbreviateNumber(3661)).toBe("1h 1m 1s");
   });
 });
diff --git a/tests/unit/module/numberLabel.test.js b/tests/unit/module/numberLabel.test.js
index d834a8c..e0eb17d 100644
--- a/tests/unit/module/numberLabel.test.js
+++ b/tests/unit/module/numberLabel.test.js
@@ -3,29 +3,29 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import numberLabel from '@/module/numberLabel.js';
+import { describe, it, expect } from "vitest";
+import numberLabel from "@/module/numberLabel.js";
 
-describe('numberLabel', () => {
-  it('formats small numbers without commas', () => {
-    expect(numberLabel(1)).toBe('1');
-    expect(numberLabel(999)).toBe('999');
+describe("numberLabel", () => {
+  it("formats small numbers without commas", () => {
+    expect(numberLabel(1)).toBe("1");
+    expect(numberLabel(999)).toBe("999");
   });
 
-  it('formats thousands with commas', () => {
-    expect(numberLabel(1000)).toBe('1,000');
-    expect(numberLabel(12345)).toBe('12,345');
+  it("formats thousands with commas", () => {
+    expect(numberLabel(1000)).toBe("1,000");
+    expect(numberLabel(12345)).toBe("12,345");
   });
 
-  it('formats millions with commas', () => {
-    expect(numberLabel(1234567)).toBe('1,234,567');
+  it("formats millions with commas", () => {
+    expect(numberLabel(1234567)).toBe("1,234,567");
   });
 
-  it('preserves decimal places', () => {
-    expect(numberLabel(1234.56)).toBe('1,234.56');
+  it("preserves decimal places", () => {
+    expect(numberLabel(1234.56)).toBe("1,234.56");
   });
 
-  it('handles zero', () => {
-    expect(numberLabel(0)).toBe('0');
+  it("handles zero", () => {
+    expect(numberLabel(0)).toBe("0");
   });
 });
diff --git a/tests/unit/module/setChartData.test.js b/tests/unit/module/setChartData.test.js
index 0b785f4..f63d2fe 100644
--- a/tests/unit/module/setChartData.test.js
+++ b/tests/unit/module/setChartData.test.js
@@ -3,7 +3,7 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 import {
   setLineChartData,
   setBarChartData,
@@ -12,110 +12,115 @@ import {
   getXIndex,
   formatTime,
   formatMaxTwo,
-} from '@/module/setChartData.js';
+} from "@/module/setChartData.js";
 
-describe('timeRange', () => {
-  it('splits time into equal parts', () => {
+describe("timeRange", () => {
+  it("splits time into equal parts", () => {
     const result = timeRange(0, 100, 3);
     expect(result).toEqual([0, 50, 100]);
   });
 
-  it('rounds values to integers', () => {
+  it("rounds values to integers", () => {
     const result = timeRange(0, 10, 4);
     // 0, 3.33, 6.67, 10 -> rounded
     expect(result).toEqual([0, 3, 7, 10]);
   });
 });
 
-describe('getXIndex', () => {
-  it('finds exact match index', () => {
+describe("getXIndex", () => {
+  it("finds exact match index", () => {
     expect(getXIndex([10, 20, 30], 20)).toBe(1);
   });
 
-  it('finds closest value index', () => {
+  it("finds closest value index", () => {
     expect(getXIndex([10, 20, 30], 22)).toBe(1);
   });
 
-  it('returns last matching index for equal distances', () => {
+  it("returns last matching index for equal distances", () => {
     // 15 is equidistant from 10 and 20, <= means last wins
     expect(getXIndex([10, 20, 30], 15)).toBe(1);
   });
 });
 
-describe('formatTime', () => {
-  it('formats seconds only', () => {
-    expect(formatTime(45)).toBe('45s');
+describe("formatTime", () => {
+  it("formats seconds only", () => {
+    expect(formatTime(45)).toBe("45s");
   });
 
-  it('formats minutes and seconds', () => {
-    expect(formatTime(125)).toBe('2m5s');
+  it("formats minutes and seconds", () => {
+    expect(formatTime(125)).toBe("2m5s");
   });
 
-  it('formats hours, minutes, seconds', () => {
-    expect(formatTime(3661)).toBe('1h1m1s');
+  it("formats hours, minutes, seconds", () => {
+    expect(formatTime(3661)).toBe("1h1m1s");
   });
 
-  it('formats days', () => {
-    expect(formatTime(90061)).toBe('1d1h1m1s');
+  it("formats days", () => {
+    expect(formatTime(90061)).toBe("1d1h1m1s");
   });
 
-  it('returns null for NaN', () => {
-    expect(formatTime('abc')).toBeNull();
+  it("returns null for NaN", () => {
+    expect(formatTime("abc")).toBeNull();
   });
 
-  it('handles zero seconds', () => {
-    expect(formatTime(0)).toBe('0s');
+  it("handles zero seconds", () => {
+    expect(formatTime(0)).toBe("0s");
   });
 });
 
-describe('formatMaxTwo', () => {
-  it('keeps only top two units', () => {
-    expect(formatMaxTwo(['1d2h3m4s'])).toEqual(['1d 2h']);
+describe("formatMaxTwo", () => {
+  it("keeps only top two units", () => {
+    expect(formatMaxTwo(["1d2h3m4s"])).toEqual(["1d 2h"]);
   });
 
-  it('keeps single unit as-is', () => {
-    expect(formatMaxTwo(['45s'])).toEqual(['45s']);
+  it("keeps single unit as-is", () => {
+    expect(formatMaxTwo(["45s"])).toEqual(["45s"]);
   });
 
-  it('handles two units', () => {
-    expect(formatMaxTwo(['3m20s'])).toEqual(['3m 20s']);
+  it("handles two units", () => {
+    expect(formatMaxTwo(["3m20s"])).toEqual(["3m 20s"]);
   });
 
-  it('processes multiple items', () => {
-    expect(formatMaxTwo(['1h30m10s', '45s']))
-      .toEqual(['1h 30m', '45s']);
+  it("processes multiple items", () => {
+    expect(formatMaxTwo(["1h30m10s", "45s"])).toEqual(["1h 30m", "45s"]);
   });
 });
 
-describe('setLineChartData', () => {
-  it('prepends min and appends max to data', () => {
+describe("setLineChartData", () => {
+  it("prepends min and appends max to data", () => {
     const baseData = [
-      { x: 1, y: 10 }, { x: 2, y: 20 },
-      { x: 3, y: 30 }, { x: 4, y: 40 },
-      { x: 5, y: 50 }, { x: 6, y: 60 },
-      { x: 7, y: 70 }, { x: 8, y: 80 },
-      { x: 9, y: 90 }, { x: 10, y: 100 },
+      { x: 1, y: 10 },
+      { x: 2, y: 20 },
+      { x: 3, y: 30 },
+      { x: 4, y: 40 },
+      { x: 5, y: 50 },
+      { x: 6, y: 60 },
+      { x: 7, y: 70 },
+      { x: 8, y: 80 },
+      { x: 9, y: 90 },
+      { x: 10, y: 100 },
     ];
-    const result = setLineChartData(
-      baseData, 'xMax', 'xMin', false, 200, 0
-    );
+    const result = setLineChartData(baseData, "xMax", "xMin", false, 200, 0);
     // Should have 12 elements (10 original + 2 boundary)
     expect(result).toHaveLength(12);
-    expect(result[0].x).toBe('xMin');
-    expect(result[11].x).toBe('xMax');
+    expect(result[0].x).toBe("xMin");
+    expect(result[11].x).toBe("xMax");
   });
 
-  it('clamps percent values between 0 and 1', () => {
+  it("clamps percent values between 0 and 1", () => {
     const baseData = [
-      { x: 1, y: 0.1 }, { x: 2, y: 0.2 },
-      { x: 3, y: 0.3 }, { x: 4, y: 0.4 },
-      { x: 5, y: 0.5 }, { x: 6, y: 0.6 },
-      { x: 7, y: 0.7 }, { x: 8, y: 0.8 },
-      { x: 9, y: 0.9 }, { x: 10, y: 0.95 },
+      { x: 1, y: 0.1 },
+      { x: 2, y: 0.2 },
+      { x: 3, y: 0.3 },
+      { x: 4, y: 0.4 },
+      { x: 5, y: 0.5 },
+      { x: 6, y: 0.6 },
+      { x: 7, y: 0.7 },
+      { x: 8, y: 0.8 },
+      { x: 9, y: 0.9 },
+      { x: 10, y: 0.95 },
     ];
-    const result = setLineChartData(
-      baseData, 'xMax', 'xMin', true, 1, 0
-    );
+    const result = setLineChartData(baseData, "xMax", "xMin", true, 1, 0);
     expect(result[0].y).toBeGreaterThanOrEqual(0);
     expect(result[0].y).toBeLessThanOrEqual(1);
     expect(result[11].y).toBeGreaterThanOrEqual(0);
@@ -123,11 +128,9 @@ describe('setLineChartData', () => {
   });
 });
 
-describe('setBarChartData', () => {
-  it('converts x values to formatted date strings', () => {
-    const baseData = [
-      { x: '2023-01-15T12:00:00', y: 100 },
-    ];
+describe("setBarChartData", () => {
+  it("converts x values to formatted date strings", () => {
+    const baseData = [{ x: "2023-01-15T12:00:00", y: 100 }];
     const result = setBarChartData(baseData);
     expect(result[0].y).toBe(100);
     expect(result[0].x).toMatch(/2023\/1\/15/);
diff --git a/tests/unit/module/shortScaleNumber.test.js b/tests/unit/module/shortScaleNumber.test.js
index f919de0..276163f 100644
--- a/tests/unit/module/shortScaleNumber.test.js
+++ b/tests/unit/module/shortScaleNumber.test.js
@@ -3,39 +3,38 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import shortScaleNumber from '@/module/shortScaleNumber.js';
+import { describe, it, expect } from "vitest";
+import shortScaleNumber from "@/module/shortScaleNumber.js";
 
-describe('shortScaleNumber', () => {
-  it('returns small numbers without abbreviation', () => {
-    expect(shortScaleNumber(1).trim()).toBe('1');
-    expect(shortScaleNumber(999).trim()).toBe('999');
+describe("shortScaleNumber", () => {
+  it("returns small numbers without abbreviation", () => {
+    expect(shortScaleNumber(1).trim()).toBe("1");
+    expect(shortScaleNumber(999).trim()).toBe("999");
   });
 
-  it('abbreviates thousands as k', () => {
-    expect(shortScaleNumber(1000).trim()).toBe('1k');
-    expect(shortScaleNumber(1500).trim()).toBe('1.5k');
+  it("abbreviates thousands as k", () => {
+    expect(shortScaleNumber(1000).trim()).toBe("1k");
+    expect(shortScaleNumber(1500).trim()).toBe("1.5k");
   });
 
-  it('abbreviates millions as m', () => {
-    expect(shortScaleNumber(1000000).trim()).toBe('1m');
+  it("abbreviates millions as m", () => {
+    expect(shortScaleNumber(1000000).trim()).toBe("1m");
   });
 
-  it('abbreviates billions as b', () => {
-    expect(shortScaleNumber(1000000000).trim()).toBe('1b');
+  it("abbreviates billions as b", () => {
+    expect(shortScaleNumber(1000000000).trim()).toBe("1b");
   });
 
-  it('abbreviates trillions as t', () => {
-    expect(shortScaleNumber(1000000000000).trim())
-      .toBe('1t');
+  it("abbreviates trillions as t", () => {
+    expect(shortScaleNumber(1000000000000).trim()).toBe("1t");
   });
 
-  it('rounds up using Math.ceil', () => {
+  it("rounds up using Math.ceil", () => {
     // 1234 -> 1.234k -> ceil(12.34)/10 = 1.3k
-    expect(shortScaleNumber(1234).trim()).toBe('1.3k');
+    expect(shortScaleNumber(1234).trim()).toBe("1.3k");
   });
 
-  it('handles zero', () => {
-    expect(shortScaleNumber(0).trim()).toBe('0');
+  it("handles zero", () => {
+    expect(shortScaleNumber(0).trim()).toBe("0");
   });
 });
diff --git a/tests/unit/module/sortNumEngZhtw.test.js b/tests/unit/module/sortNumEngZhtw.test.js
index dad8151..752122a 100644
--- a/tests/unit/module/sortNumEngZhtw.test.js
+++ b/tests/unit/module/sortNumEngZhtw.test.js
@@ -3,55 +3,51 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 import {
   sortNumEngZhtw,
   sortNumEngZhtwForFilter,
-} from '@/module/sortNumEngZhtw.js';
+} from "@/module/sortNumEngZhtw.js";
 
-describe('sortNumEngZhtw', () => {
-  it('sorts numbers in ascending order', () => {
-    expect(sortNumEngZhtw(['3', '1', '2']))
-      .toEqual(['1', '2', '3']);
+describe("sortNumEngZhtw", () => {
+  it("sorts numbers in ascending order", () => {
+    expect(sortNumEngZhtw(["3", "1", "2"])).toEqual(["1", "2", "3"]);
   });
 
-  it('places numbers before strings', () => {
-    expect(sortNumEngZhtw(['b', '1', 'a']))
-      .toEqual(['1', 'a', 'b']);
+  it("places numbers before strings", () => {
+    expect(sortNumEngZhtw(["b", "1", "a"])).toEqual(["1", "a", "b"]);
   });
 
-  it('sorts English strings alphabetically', () => {
-    expect(sortNumEngZhtw(['cherry', 'apple', 'banana']))
-      .toEqual(['apple', 'banana', 'cherry']);
+  it("sorts English strings alphabetically", () => {
+    expect(sortNumEngZhtw(["cherry", "apple", "banana"])).toEqual([
+      "apple",
+      "banana",
+      "cherry",
+    ]);
   });
 
-  it('sorts mixed numbers and strings', () => {
-    const input = ['banana', '10', 'apple', '2'];
+  it("sorts mixed numbers and strings", () => {
+    const input = ["banana", "10", "apple", "2"];
     const result = sortNumEngZhtw(input);
-    expect(result).toEqual(['2', '10', 'apple', 'banana']);
+    expect(result).toEqual(["2", "10", "apple", "banana"]);
   });
 });
 
-describe('sortNumEngZhtwForFilter', () => {
-  it('returns negative when a < b (numbers)', () => {
-    expect(sortNumEngZhtwForFilter('1', '2'))
-      .toBeLessThan(0);
+describe("sortNumEngZhtwForFilter", () => {
+  it("returns negative when a < b (numbers)", () => {
+    expect(sortNumEngZhtwForFilter("1", "2")).toBeLessThan(0);
   });
 
-  it('returns positive when a > b (numbers)', () => {
-    expect(sortNumEngZhtwForFilter('10', '2'))
-      .toBeGreaterThan(0);
+  it("returns positive when a > b (numbers)", () => {
+    expect(sortNumEngZhtwForFilter("10", "2")).toBeGreaterThan(0);
   });
 
-  it('places numbers before strings', () => {
-    expect(sortNumEngZhtwForFilter('1', 'a'))
-      .toBeLessThan(0);
-    expect(sortNumEngZhtwForFilter('a', '1'))
-      .toBeGreaterThan(0);
+  it("places numbers before strings", () => {
+    expect(sortNumEngZhtwForFilter("1", "a")).toBeLessThan(0);
+    expect(sortNumEngZhtwForFilter("a", "1")).toBeGreaterThan(0);
   });
 
-  it('compares strings using locale', () => {
-    expect(sortNumEngZhtwForFilter('a', 'b'))
-      .toBeLessThan(0);
+  it("compares strings using locale", () => {
+    expect(sortNumEngZhtwForFilter("a", "b")).toBeLessThan(0);
   });
 });
diff --git a/tests/unit/module/timeLabel.test.js b/tests/unit/module/timeLabel.test.js
index 52ac23b..2eff072 100644
--- a/tests/unit/module/timeLabel.test.js
+++ b/tests/unit/module/timeLabel.test.js
@@ -3,7 +3,7 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 import {
   getTimeLabel,
   simpleTimeLabel,
@@ -12,161 +12,163 @@ import {
   getYTicksByIndex,
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
-} from '@/module/timeLabel.js';
+} from "@/module/timeLabel.js";
 
-describe('getTimeLabel', () => {
-  it('returns days for >= 86400 seconds', () => {
-    expect(getTimeLabel(86400)).toBe('1 days');
-    expect(getTimeLabel(172800)).toBe('2 days');
+describe("getTimeLabel", () => {
+  it("returns days for >= 86400 seconds", () => {
+    expect(getTimeLabel(86400)).toBe("1 days");
+    expect(getTimeLabel(172800)).toBe("2 days");
   });
 
-  it('returns hours for >= 3600 seconds', () => {
-    expect(getTimeLabel(3600)).toBe('1 hrs');
-    expect(getTimeLabel(7200)).toBe('2 hrs');
+  it("returns hours for >= 3600 seconds", () => {
+    expect(getTimeLabel(3600)).toBe("1 hrs");
+    expect(getTimeLabel(7200)).toBe("2 hrs");
   });
 
-  it('returns minutes for >= 60 seconds', () => {
-    expect(getTimeLabel(60)).toBe('1 mins');
-    expect(getTimeLabel(120)).toBe('2 mins');
+  it("returns minutes for >= 60 seconds", () => {
+    expect(getTimeLabel(60)).toBe("1 mins");
+    expect(getTimeLabel(120)).toBe("2 mins");
   });
 
-  it('returns seconds for < 60', () => {
-    expect(getTimeLabel(30)).toBe('30 sec');
+  it("returns seconds for < 60", () => {
+    expect(getTimeLabel(30)).toBe("30 sec");
   });
 
-  it('returns 0 sec for zero', () => {
-    expect(getTimeLabel(0)).toBe('0 sec');
+  it("returns 0 sec for zero", () => {
+    expect(getTimeLabel(0)).toBe("0 sec");
   });
 
-  it('respects fixedNumber parameter', () => {
-    expect(getTimeLabel(5400, 1)).toBe('1.5 hrs');
+  it("respects fixedNumber parameter", () => {
+    expect(getTimeLabel(5400, 1)).toBe("1.5 hrs");
   });
 });
 
-describe('simpleTimeLabel', () => {
-  it('returns days with d suffix', () => {
-    expect(simpleTimeLabel(86400)).toBe('1d');
+describe("simpleTimeLabel", () => {
+  it("returns days with d suffix", () => {
+    expect(simpleTimeLabel(86400)).toBe("1d");
   });
 
-  it('returns hours with h suffix', () => {
-    expect(simpleTimeLabel(3600)).toBe('1h');
-    expect(simpleTimeLabel(7200)).toBe('2h');
+  it("returns hours with h suffix", () => {
+    expect(simpleTimeLabel(3600)).toBe("1h");
+    expect(simpleTimeLabel(7200)).toBe("2h");
   });
 
-  it('returns minutes with m suffix', () => {
-    expect(simpleTimeLabel(60)).toBe('1m');
-    expect(simpleTimeLabel(120)).toBe('2m');
+  it("returns minutes with m suffix", () => {
+    expect(simpleTimeLabel(60)).toBe("1m");
+    expect(simpleTimeLabel(120)).toBe("2m");
   });
 
-  it('returns seconds with s suffix for small values', () => {
-    expect(simpleTimeLabel(30)).toBe('30s');
+  it("returns seconds with s suffix for small values", () => {
+    expect(simpleTimeLabel(30)).toBe("30s");
   });
 
-  it('returns 0s for zero', () => {
-    expect(simpleTimeLabel(0)).toBe('0s');
+  it("returns 0s for zero", () => {
+    expect(simpleTimeLabel(0)).toBe("0s");
   });
 
-  it('correctly calculates hours for values between 1h and 1d', () => {
+  it("correctly calculates hours for values between 1h and 1d", () => {
     // 5 hours = 18000 seconds -> should be "5h"
-    expect(simpleTimeLabel(18000)).toBe('5h');
+    expect(simpleTimeLabel(18000)).toBe("5h");
   });
 
-  it('correctly calculates minutes for values between 1m and 1h', () => {
+  it("correctly calculates minutes for values between 1m and 1h", () => {
     // 30 minutes = 1800 seconds -> should be "30m"
-    expect(simpleTimeLabel(1800)).toBe('30m');
+    expect(simpleTimeLabel(1800)).toBe("30m");
   });
 });
 
-describe('followTimeLabel', () => {
-  it('uses day unit when max > 1 day', () => {
+describe("followTimeLabel", () => {
+  it("uses day unit when max > 1 day", () => {
     // max = 100000 (> 86400), second = 86400 => 1d
-    expect(followTimeLabel(86400, 100000)).toBe('1d');
+    expect(followTimeLabel(86400, 100000)).toBe("1d");
   });
 
-  it('uses hour unit when max > 1 hour', () => {
+  it("uses hour unit when max > 1 hour", () => {
     // max = 7200 (> 3600), second = 3600 => 1h
-    expect(followTimeLabel(3600, 7200)).toBe('1h');
+    expect(followTimeLabel(3600, 7200)).toBe("1h");
   });
 
-  it('uses minute unit when max > 1 minute', () => {
+  it("uses minute unit when max > 1 minute", () => {
     // max = 120 (> 60), second = 60 => 1m
-    expect(followTimeLabel(60, 120)).toBe('1m');
+    expect(followTimeLabel(60, 120)).toBe("1m");
   });
 
-  it('uses second unit when max <= 60', () => {
-    expect(followTimeLabel(30, 50)).toBe('30s');
+  it("uses second unit when max <= 60", () => {
+    expect(followTimeLabel(30, 50)).toBe("30s");
   });
 
-  it('returns 0 without decimals when value is 0', () => {
-    expect(followTimeLabel(0, 7200, 2)).toBe('0h');
+  it("returns 0 without decimals when value is 0", () => {
+    expect(followTimeLabel(0, 7200, 2)).toBe("0h");
   });
 });
 
-describe('getStepSizeOfYTicks', () => {
-  it('returns object with resultStepSize and unitToUse', () => {
+describe("getStepSizeOfYTicks", () => {
+  it("returns object with resultStepSize and unitToUse", () => {
     const result = getStepSizeOfYTicks(7200, 5);
-    expect(result).toHaveProperty('resultStepSize');
-    expect(result).toHaveProperty('unitToUse');
-    expect(result.unitToUse).toBe('h');
+    expect(result).toHaveProperty("resultStepSize");
+    expect(result).toHaveProperty("unitToUse");
+    expect(result.unitToUse).toBe("h");
   });
 
-  it('uses day unit for large values', () => {
+  it("uses day unit for large values", () => {
     const result = getStepSizeOfYTicks(200000, 5);
-    expect(result.unitToUse).toBe('d');
+    expect(result.unitToUse).toBe("d");
   });
 
-  it('uses second unit for small values', () => {
+  it("uses second unit for small values", () => {
     const result = getStepSizeOfYTicks(30, 5);
-    expect(result.unitToUse).toBe('s');
+    expect(result.unitToUse).toBe("s");
   });
 });
 
-describe('getYTicksByIndex', () => {
-  it('formats tick label with unit', () => {
-    expect(getYTicksByIndex(2, 3, 'h')).toBe('6h');
+describe("getYTicksByIndex", () => {
+  it("formats tick label with unit", () => {
+    expect(getYTicksByIndex(2, 3, "h")).toBe("6h");
   });
 
-  it('truncates to 1 decimal place', () => {
-    expect(getYTicksByIndex(1.5, 1, 'h')).toBe('1.5h');
+  it("truncates to 1 decimal place", () => {
+    expect(getYTicksByIndex(1.5, 1, "h")).toBe("1.5h");
   });
 });
 
-describe('setTimeStringFormatBaseOnTimeDifference', () => {
-  it('returns seconds format for < 60s difference', () => {
-    expect(setTimeStringFormatBaseOnTimeDifference(0, 30))
-      .toBe('HH:mm:ss');
+describe("setTimeStringFormatBaseOnTimeDifference", () => {
+  it("returns seconds format for < 60s difference", () => {
+    expect(setTimeStringFormatBaseOnTimeDifference(0, 30)).toBe("HH:mm:ss");
   });
 
-  it('returns minute format for < 3600s difference', () => {
-    expect(setTimeStringFormatBaseOnTimeDifference(0, 1800))
-      .toBe('MM/DD HH:mm');
+  it("returns minute format for < 3600s difference", () => {
+    expect(setTimeStringFormatBaseOnTimeDifference(0, 1800)).toBe(
+      "MM/DD HH:mm",
+    );
   });
 
-  it('returns hour format for < 86400s difference', () => {
-    expect(setTimeStringFormatBaseOnTimeDifference(0, 43200))
-      .toBe('MM/DD HH:mm');
+  it("returns hour format for < 86400s difference", () => {
+    expect(setTimeStringFormatBaseOnTimeDifference(0, 43200)).toBe(
+      "MM/DD HH:mm",
+    );
   });
 
-  it('returns day format for < 30 days difference', () => {
-    expect(setTimeStringFormatBaseOnTimeDifference(0, 864000))
-      .toBe('YYYY/MM/DD');
+  it("returns day format for < 30 days difference", () => {
+    expect(setTimeStringFormatBaseOnTimeDifference(0, 864000)).toBe(
+      "YYYY/MM/DD",
+    );
   });
 
-  it('returns month format for >= 30 days difference', () => {
-    expect(setTimeStringFormatBaseOnTimeDifference(0, 5000000))
-      .toBe('YYYY/MM/DD');
+  it("returns month format for >= 30 days difference", () => {
+    expect(setTimeStringFormatBaseOnTimeDifference(0, 5000000)).toBe(
+      "YYYY/MM/DD",
+    );
   });
 });
 
-describe('mapTimestampToAxisTicksByFormat', () => {
-  it('formats timestamps with given format', () => {
-    const ts = [new Date('2023-01-15').getTime()];
-    const result = mapTimestampToAxisTicksByFormat(ts, 'YYYY/MM/DD');
-    expect(result[0]).toBe('2023/01/15');
+describe("mapTimestampToAxisTicksByFormat", () => {
+  it("formats timestamps with given format", () => {
+    const ts = [new Date("2023-01-15").getTime()];
+    const result = mapTimestampToAxisTicksByFormat(ts, "YYYY/MM/DD");
+    expect(result[0]).toBe("2023/01/15");
   });
 
-  it('returns undefined for falsy input', () => {
-    expect(mapTimestampToAxisTicksByFormat(null, 'YYYY'))
-      .toBeUndefined();
+  it("returns undefined for falsy input", () => {
+    expect(mapTimestampToAxisTicksByFormat(null, "YYYY")).toBeUndefined();
   });
 });
diff --git a/tests/unit/module/tooltipContent.test.js b/tests/unit/module/tooltipContent.test.js
index dc0203c..65485fe 100644
--- a/tests/unit/module/tooltipContent.test.js
+++ b/tests/unit/module/tooltipContent.test.js
@@ -3,17 +3,17 @@
 // Authors:
 //   codex@openai.com (Codex), 2026/03/08
 
-import { describe, it, expect } from 'vitest';
-import { createTooltipContent } from '@/module/tooltipContent.js';
+import { describe, it, expect } from "vitest";
+import { createTooltipContent } from "@/module/tooltipContent.js";
 
-describe('createTooltipContent', () => {
-  it('renders untrusted label as plain text', () => {
-    const label = '<img src=x onerror=alert(1)>Node';
+describe("createTooltipContent", () => {
+  it("renders untrusted label as plain text", () => {
+    const label = "<img src=x onerror=alert(1)>Node";
 
     const content = createTooltipContent(label);
 
     expect(content.textContent).toBe(label);
-    expect(content.innerHTML).toContain('&lt;img');
-    expect(content.querySelector('img')).toBeNull();
+    expect(content.innerHTML).toContain("&lt;img");
+    expect(content.querySelector("img")).toBeNull();
   });
 });
diff --git a/tests/unit/utils/cookieUtil.test.js b/tests/unit/utils/cookieUtil.test.js
index 5d98250..b5b10c1 100644
--- a/tests/unit/utils/cookieUtil.test.js
+++ b/tests/unit/utils/cookieUtil.test.js
@@ -3,108 +3,106 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import {
   getCookie,
   setCookie,
   setCookieWithoutExpiration,
   deleteCookie,
-} from '@/utils/cookieUtil.js';
+} from "@/utils/cookieUtil.js";
 
-describe('cookieUtil', () => {
+describe("cookieUtil", () => {
   let cookieSetter;
 
   beforeEach(() => {
     // Clear all cookies before each test
-    document.cookie.split(';').forEach((c) => {
-      const name = c.split('=')[0].trim();
+    document.cookie.split(";").forEach((c) => {
+      const name = c.split("=")[0].trim();
       if (name) {
-        document.cookie =
-          name + '=; Max-Age=-99999999; path=/';
+        document.cookie = name + "=; Max-Age=-99999999; path=/";
       }
     });
     // Spy on document.cookie setter to capture the raw string
     // (jsdom silently drops Secure cookies on http://)
-    cookieSetter = vi.spyOn(document, 'cookie', 'set');
+    cookieSetter = vi.spyOn(document, "cookie", "set");
   });
 
-  describe('getCookie', () => {
-    it('returns null when cookie does not exist', () => {
-      expect(getCookie('nonexistent')).toBeNull();
+  describe("getCookie", () => {
+    it("returns null when cookie does not exist", () => {
+      expect(getCookie("nonexistent")).toBeNull();
     });
 
-    it('returns value of an existing cookie', () => {
-      document.cookie = 'testKey=testValue';
-      expect(getCookie('testKey')).toBe('testValue');
+    it("returns value of an existing cookie", () => {
+      document.cookie = "testKey=testValue";
+      expect(getCookie("testKey")).toBe("testValue");
     });
 
-    it('returns correct value when multiple cookies exist',
-      () => {
-        document.cookie = 'first=aaa';
-        document.cookie = 'second=bbb';
-        document.cookie = 'third=ccc';
-        expect(getCookie('second')).toBe('bbb');
-      });
+    it("returns correct value when multiple cookies exist", () => {
+      document.cookie = "first=aaa";
+      document.cookie = "second=bbb";
+      document.cookie = "third=ccc";
+      expect(getCookie("second")).toBe("bbb");
+    });
 
-    it('does not match partial cookie names', () => {
-      document.cookie = 'testKey=value';
-      expect(getCookie('test')).toBeNull();
+    it("does not match partial cookie names", () => {
+      document.cookie = "testKey=value";
+      expect(getCookie("test")).toBeNull();
     });
   });
 
-  describe('setCookie', () => {
-    it('sets cookie with Secure and SameSite=Lax flags', () => {
-      setCookie('myKey', 'myValue');
+  describe("setCookie", () => {
+    it("sets cookie with Secure and SameSite=Lax flags", () => {
+      setCookie("myKey", "myValue");
 
-      const written = cookieSetter.mock.calls.find(
-        (c) => c[0].startsWith('myKey='),
+      const written = cookieSetter.mock.calls.find((c) =>
+        c[0].startsWith("myKey="),
       );
       expect(written).toBeDefined();
       const str = written[0];
-      expect(str).toContain('myKey=myValue');
-      expect(str).toContain('expires=');
-      expect(str).toContain('path=/');
-      expect(str).toContain('Secure');
-      expect(str).toContain('SameSite=Lax');
+      expect(str).toContain("myKey=myValue");
+      expect(str).toContain("expires=");
+      expect(str).toContain("path=/");
+      expect(str).toContain("Secure");
+      expect(str).toContain("SameSite=Lax");
     });
   });
 
-  describe('setCookieWithoutExpiration', () => {
-    it('sets session cookie with Secure and SameSite=Lax flags', () => {
-      setCookieWithoutExpiration('sessionKey', 'sessionVal');
+  describe("setCookieWithoutExpiration", () => {
+    it("sets session cookie with Secure and SameSite=Lax flags", () => {
+      setCookieWithoutExpiration("sessionKey", "sessionVal");
 
-      const written = cookieSetter.mock.calls.find(
-        (c) => c[0].startsWith('sessionKey='),
+      const written = cookieSetter.mock.calls.find((c) =>
+        c[0].startsWith("sessionKey="),
       );
       expect(written).toBeDefined();
       const str = written[0];
-      expect(str).toContain('sessionKey=sessionVal');
-      expect(str).toContain('Secure');
-      expect(str).toContain('SameSite=Lax');
+      expect(str).toContain("sessionKey=sessionVal");
+      expect(str).toContain("Secure");
+      expect(str).toContain("SameSite=Lax");
     });
 
-    it('sets cookie with path=/', () => {
-      setCookieWithoutExpiration('pathKey', 'pathVal');
+    it("sets cookie with path=/", () => {
+      setCookieWithoutExpiration("pathKey", "pathVal");
 
-      const written = cookieSetter.mock.calls.find(
-        (c) => c[0].startsWith('pathKey='),
+      const written = cookieSetter.mock.calls.find((c) =>
+        c[0].startsWith("pathKey="),
       );
-      expect(written[0]).toContain('path=/');
+      expect(written[0]).toContain("path=/");
     });
   });
 
-  describe('deleteCookie', () => {
-    it('sets Max-Age=-99999999 with Secure and SameSite=Lax flags', () => {
-      deleteCookie('toDelete');
+  describe("deleteCookie", () => {
+    it("sets Max-Age=-99999999 with Secure and SameSite=Lax flags", () => {
+      deleteCookie("toDelete");
 
-      const written = cookieSetter.mock.calls.find(
-        (c) => c[0].startsWith('toDelete='),
+      const written = cookieSetter.mock.calls.find((c) =>
+        c[0].startsWith("toDelete="),
       );
       expect(written).toBeDefined();
       const str = written[0];
-      expect(str).toContain('Max-Age=-99999999');
-      expect(str).toContain('Secure');
-      expect(str).toContain('SameSite=Lax');
+      expect(str).toContain("Max-Age=-99999999");
+      expect(str).toContain("Secure");
+      expect(str).toContain("SameSite=Lax");
     });
   });
 });
diff --git a/tests/unit/utils/escapeHtml.test.js b/tests/unit/utils/escapeHtml.test.js
index e356582..df244f2 100644
--- a/tests/unit/utils/escapeHtml.test.js
+++ b/tests/unit/utils/escapeHtml.test.js
@@ -3,32 +3,33 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/06
 
-import { describe, it, expect } from 'vitest';
-import { escapeHtml } from '@/utils/escapeHtml.js';
+import { describe, it, expect } from "vitest";
+import { escapeHtml } from "@/utils/escapeHtml.js";
 
-describe('escapeHtml', () => {
-  it('escapes ampersand', () => {
-    expect(escapeHtml('a&b')).toBe('a&amp;b');
+describe("escapeHtml", () => {
+  it("escapes ampersand", () => {
+    expect(escapeHtml("a&b")).toBe("a&amp;b");
   });
 
-  it('escapes angle brackets', () => {
-    expect(escapeHtml('<script>')).toBe('&lt;script&gt;');
+  it("escapes angle brackets", () => {
+    expect(escapeHtml("<script>")).toBe("&lt;script&gt;");
   });
 
-  it('escapes double quotes', () => {
-    expect(escapeHtml('"hello"')).toBe('&quot;hello&quot;');
+  it("escapes double quotes", () => {
+    expect(escapeHtml('"hello"')).toBe("&quot;hello&quot;");
   });
 
-  it('escapes single quotes', () => {
+  it("escapes single quotes", () => {
     expect(escapeHtml("it's")).toBe("it&#039;s");
   });
 
-  it('escapes all special characters together', () => {
-    expect(escapeHtml('<img src="x" onerror="alert(\'XSS\')">'))
-      .toBe('&lt;img src=&quot;x&quot; onerror=&quot;alert(&#039;XSS&#039;)&quot;&gt;');
+  it("escapes all special characters together", () => {
+    expect(escapeHtml('<img src="x" onerror="alert(\'XSS\')">')).toBe(
+      "&lt;img src=&quot;x&quot; onerror=&quot;alert(&#039;XSS&#039;)&quot;&gt;",
+    );
   });
 
-  it('returns plain text unchanged', () => {
-    expect(escapeHtml('hello world')).toBe('hello world');
+  it("returns plain text unchanged", () => {
+    expect(escapeHtml("hello world")).toBe("hello world");
   });
 });
diff --git a/tests/unit/utils/pageUtils.test.js b/tests/unit/utils/pageUtils.test.js
index d60096e..a1a0c38 100644
--- a/tests/unit/utils/pageUtils.test.js
+++ b/tests/unit/utils/pageUtils.test.js
@@ -3,57 +3,47 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/05
 
-import { describe, it, expect } from 'vitest';
-import {
-  mapPageNameToCapitalUnifiedName,
-} from '@/utils/pageUtils.js';
+import { describe, it, expect } from "vitest";
+import { mapPageNameToCapitalUnifiedName } from "@/utils/pageUtils.js";
 
-describe('pageUtils', () => {
-  describe('mapPageNameToCapitalUnifiedName', () => {
-    it('converts CheckMap to MAP', () => {
-      expect(mapPageNameToCapitalUnifiedName('CheckMap'))
-        .toBe('MAP');
+describe("pageUtils", () => {
+  describe("mapPageNameToCapitalUnifiedName", () => {
+    it("converts CheckMap to MAP", () => {
+      expect(mapPageNameToCapitalUnifiedName("CheckMap")).toBe("MAP");
     });
 
-    it('converts CheckConformance to CONFORMANCE', () => {
-      expect(
-        mapPageNameToCapitalUnifiedName('CheckConformance')
-      ).toBe('CONFORMANCE');
+    it("converts CheckConformance to CONFORMANCE", () => {
+      expect(mapPageNameToCapitalUnifiedName("CheckConformance")).toBe(
+        "CONFORMANCE",
+      );
     });
 
-    it('converts CheckPerformance to PERFORMANCE', () => {
-      expect(
-        mapPageNameToCapitalUnifiedName('CheckPerformance')
-      ).toBe('PERFORMANCE');
+    it("converts CheckPerformance to PERFORMANCE", () => {
+      expect(mapPageNameToCapitalUnifiedName("CheckPerformance")).toBe(
+        "PERFORMANCE",
+      );
     });
 
-    it('converts CompareDashboard to DASHBOARD', () => {
-      expect(
-        mapPageNameToCapitalUnifiedName('CompareDashboard')
-      ).toBe('DASHBOARD');
+    it("converts CompareDashboard to DASHBOARD", () => {
+      expect(mapPageNameToCapitalUnifiedName("CompareDashboard")).toBe(
+        "DASHBOARD",
+      );
     });
 
-    it('converts other names to uppercase', () => {
-      expect(mapPageNameToCapitalUnifiedName('files'))
-        .toBe('FILES');
-      expect(mapPageNameToCapitalUnifiedName('Map'))
-        .toBe('MAP');
+    it("converts other names to uppercase", () => {
+      expect(mapPageNameToCapitalUnifiedName("files")).toBe("FILES");
+      expect(mapPageNameToCapitalUnifiedName("Map")).toBe("MAP");
     });
 
-    it('handles case-insensitive input', () => {
-      expect(mapPageNameToCapitalUnifiedName('checkmap'))
-        .toBe('MAP');
-      expect(mapPageNameToCapitalUnifiedName('CHECKMAP'))
-        .toBe('MAP');
+    it("handles case-insensitive input", () => {
+      expect(mapPageNameToCapitalUnifiedName("checkmap")).toBe("MAP");
+      expect(mapPageNameToCapitalUnifiedName("CHECKMAP")).toBe("MAP");
     });
 
-    it('returns undefined for falsy input', () => {
-      expect(mapPageNameToCapitalUnifiedName(undefined))
-        .toBeUndefined();
-      expect(mapPageNameToCapitalUnifiedName(null))
-        .toBeUndefined();
-      expect(mapPageNameToCapitalUnifiedName(''))
-        .toBeUndefined();
+    it("returns undefined for falsy input", () => {
+      expect(mapPageNameToCapitalUnifiedName(undefined)).toBeUndefined();
+      expect(mapPageNameToCapitalUnifiedName(null)).toBeUndefined();
+      expect(mapPageNameToCapitalUnifiedName("")).toBeUndefined();
     });
   });
 });
diff --git a/tests/views/MainContainerGuard.test.js b/tests/views/MainContainerGuard.test.js
index 4f8c31e..68e0c1f 100644
--- a/tests/views/MainContainerGuard.test.js
+++ b/tests/views/MainContainerGuard.test.js
@@ -3,41 +3,41 @@
 // Authors:
 //   imacat.yang@dsp.im (imacat), 2026/03/06
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
 
 // Mock all heavy imports that MainContainer.vue pulls in
-vi.mock('@/stores/loading', () => ({
+vi.mock("@/stores/loading", () => ({
   useLoadingStore: () => ({ isLoading: false }),
 }));
-vi.mock('@/stores/allMapData', () => ({
+vi.mock("@/stores/allMapData", () => ({
   useAllMapDataStore: () => ({}),
 }));
-vi.mock('@/stores/conformance', () => ({
+vi.mock("@/stores/conformance", () => ({
   useConformanceStore: () => ({}),
 }));
-vi.mock('@/stores/pageAdmin', () => ({
+vi.mock("@/stores/pageAdmin", () => ({
   usePageAdminStore: () => ({}),
 }));
-vi.mock('@/module/alertModal.js', () => ({
+vi.mock("@/module/alertModal.js", () => ({
   leaveFilter: vi.fn(),
   leaveConformance: vi.fn(),
 }));
-vi.mock('@/module/apiError.js', () => ({
+vi.mock("@/module/apiError.js", () => ({
   default: vi.fn(),
 }));
-vi.mock('@/router/index.ts', () => ({
-  default: { push: vi.fn(), currentRoute: { value: { path: '/' } } },
+vi.mock("@/router/index.ts", () => ({
+  default: { push: vi.fn(), currentRoute: { value: { path: "/" } } },
 }));
-vi.mock('@/module/cytoscapeMap.js', () => ({}));
+vi.mock("@/module/cytoscapeMap.js", () => ({}));
 
-import { useLoginStore } from '@/stores/login';
-import * as cookieUtil from '@/utils/cookieUtil.js';
+import { useLoginStore } from "@/stores/login";
+import * as cookieUtil from "@/utils/cookieUtil.js";
 
 // Import the component definition to access beforeRouteEnter
-import MainContainer from '@/views/MainContainer.vue';
+import MainContainer from "@/views/MainContainer.vue";
 
-describe('MainContainer beforeRouteEnter', () => {
+describe("MainContainer beforeRouteEnter", () => {
   let loginStore;
   let next;
 
@@ -48,10 +48,10 @@ describe('MainContainer beforeRouteEnter', () => {
     next = vi.fn();
     vi.clearAllMocks();
     // Clear cookies
-    document.cookie.split(';').forEach((c) => {
-      const name = c.split('=')[0].trim();
+    document.cookie.split(";").forEach((c) => {
+      const name = c.split("=")[0].trim();
       if (name) {
-        document.cookie = name + '=; Max-Age=-99999999; path=/';
+        document.cookie = name + "=; Max-Age=-99999999; path=/";
       }
     });
   });
@@ -61,10 +61,10 @@ describe('MainContainer beforeRouteEnter', () => {
     return guard({}, {}, next);
   };
 
-  it('calls next() after successful refreshToken', async () => {
+  it("calls next() after successful refreshToken", async () => {
     // Not logged in, but has refresh token
-    document.cookie = 'luciaRefreshToken=some-token';
-    vi.spyOn(loginStore, 'refreshToken').mockResolvedValue();
+    document.cookie = "luciaRefreshToken=some-token";
+    vi.spyOn(loginStore, "refreshToken").mockResolvedValue();
 
     await callGuard();
 
@@ -72,34 +72,38 @@ describe('MainContainer beforeRouteEnter', () => {
     expect(next).toHaveBeenCalled();
   });
 
-  it('redirects to login when refreshToken fails', async () => {
+  it("redirects to login when refreshToken fails", async () => {
     // Not logged in, has refresh token, but refresh fails
-    document.cookie = 'luciaRefreshToken=some-token';
-    vi.spyOn(loginStore, 'refreshToken').mockRejectedValue(new Error('401'));
+    document.cookie = "luciaRefreshToken=some-token";
+    vi.spyOn(loginStore, "refreshToken").mockRejectedValue(new Error("401"));
 
     await callGuard();
 
     expect(next).toHaveBeenCalledWith(
-      expect.objectContaining({ path: '/login' }),
+      expect.objectContaining({ path: "/login" }),
     );
   });
 
-  it('calls next() when already logged in', async () => {
-    document.cookie = 'isLuciaLoggedIn=true';
+  it("calls next() when already logged in", async () => {
+    document.cookie = "isLuciaLoggedIn=true";
 
     await callGuard();
 
     expect(next).toHaveBeenCalled();
   });
 
-  it('stores a relative return-to path when redirecting to login', async () => {
-    window.history.replaceState({}, '', '/discover/log/1/map?view=summary#node-2');
+  it("stores a relative return-to path when redirecting to login", async () => {
+    window.history.replaceState(
+      {},
+      "",
+      "/discover/log/1/map?view=summary#node-2",
+    );
 
     await callGuard();
 
     const redirectArg = next.mock.calls[0][0];
-    const returnTo = redirectArg.query['return-to'];
+    const returnTo = redirectArg.query["return-to"];
 
-    expect(atob(returnTo)).toBe('/discover/log/1/map?view=summary#node-2');
+    expect(atob(returnTo)).toBe("/discover/log/1/map?view=summary#node-2");
   });
 });
diff --git a/vite.config.js b/vite.config.js
index 0fe342b..a4d4d38 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -17,41 +17,41 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
 
-  return{
+  return {
     cacheDir: env.VITE_CACHE_DIR || undefined,
     plugins: [vue()],
-    base: '/',
+    base: "/",
     resolve: {
       alias: {
         util: "util/",
         "@": fileURLToPath(new URL("./src", import.meta.url)),
-        '/images': 'src/assets/images',
-      }
+        "/images": "src/assets/images",
+      },
     },
     server: {
-      host: 'localhost',
+      host: "localhost",
       port: 58249,
       proxy: {
-        '/api': {
+        "/api": {
           target: env.VUE_APP_API_URL,
           changeOrigin: true,
-          rewrite: path => path.replace(/^\/api/, ''),
-        }
+          rewrite: (path) => path.replace(/^\/api/, ""),
+        },
       },
     },
     optimizeDeps: {
-      include: ['vue', 'vue-router', 'pinia', 'axios']
+      include: ["vue", "vue-router", "pinia", "axios"],
     },
     build: {
       commonjsOptions: {
         transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
         // esmExternals: true, // If you set esmExternals to true, this plugins assumes that all external dependencies are ES modules
-      }
+      },
     },
     test: {
-      globals:true,
-      environment: 'jsdom',
+      globals: true,
+      environment: "jsdom",
       // reporter: ['text', 'json', 'html', 'vue'],
     },
-  }
+  };
 });