From 51c906866e7c8160b046b9914a4a32108b4d0da6 Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Fri, 28 Mar 2025 12:51:12 +0100
Subject: [PATCH] Neutralize process page

---
 src/pages/account/account.ts                |  39 +-
 src/pages/process/process-list-component.ts |  84 +-
 src/pages/process/process.html              |   4 +-
 src/pages/process/process.ts                | 900 ++++++++++----------
 src/router.ts                               |   8 +-
 5 files changed, 521 insertions(+), 514 deletions(-)

diff --git a/src/pages/account/account.ts b/src/pages/account/account.ts
index b74b503..4515168 100755
--- a/src/pages/account/account.ts
+++ b/src/pages/account/account.ts
@@ -866,22 +866,29 @@ private updateProcessTableContent(processes: any[]): void {
         return;
     }
 
-    tbody.innerHTML = processes.map(process => `
-        <tr>
-            <td>${process.name || 'N/A'}</td>
-            <td>${process.role || 'N/A'}</td>
-            <td>
-                <div class="notification-container" onclick="window.showProcessNotifications('${process.id}')">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
-                        <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
-                    </svg>
-                    <span class="notification-count" data-process="${process.id}">
-                        ${process.notifications?.unread || 0}/${process.notifications?.total || 0}
-                    </span>
-                </div>
-            </td>
-        </tr>
-    `).join('');
+    const service = await Services.getInstance();
+
+    /*tbody.innerHTML = processes.map((process: Process) => {
+        const processName = process.states[0]?.public_data?.memberPublicName || 'N/A';
+        const processId = process.states[0]?.state_id || 'N/A';
+        
+        return `
+            <tr>
+                <td>${processName}</td>
+                <td>${service.getRoles(process) || 'N/A'}</td>
+                <td>
+                    <div class="notification-container" onclick="window.showProcessNotifications('${processId}')">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
+                            <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
+                        </svg>
+                        <span class="notification-count" data-process="${processId}">
+                            0/0
+                        </span>
+                    </div>
+                </td>
+            </tr>
+        `;
+    }).join('');*/
 }
 
 
diff --git a/src/pages/process/process-list-component.ts b/src/pages/process/process-list-component.ts
index 098a1ee..3033515 100644
--- a/src/pages/process/process-list-component.ts
+++ b/src/pages/process/process-list-component.ts
@@ -1,49 +1,49 @@
-import processHtml from './process.html?raw';
-import processScript from './process.ts?raw';
-import processCss from '../../4nk.css?raw';
-import { init } from './process';
+// import processHtml from './process.html?raw';
+// import processScript from './process.ts?raw';
+// import processCss from '../../4nk.css?raw';
+// import { init } from './process';
 
-export class ProcessListComponent extends HTMLElement {
-  _callback: any;
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
+// export class ProcessListComponent extends HTMLElement {
+//   _callback: any;
+//   constructor() {
+//     super();
+//     this.attachShadow({ mode: 'open' });
+//   }
 
-  connectedCallback() {
-    console.log('CALLBACK PROCESS LIST PAGE');
-    this.render();
-    setTimeout(() => {
-      init();
-    }, 500);
-  }
+//   connectedCallback() {
+//     console.log('CALLBACK PROCESS LIST PAGE');
+//     this.render();
+//     setTimeout(() => {
+//       init();
+//     }, 500);
+//   }
 
-  set callback(fn) {
-    if (typeof fn === 'function') {
-      this._callback = fn;
-    } else {
-      console.error('Callback is not a function');
-    }
-  }
+//   set callback(fn) {
+//     if (typeof fn === 'function') {
+//       this._callback = fn;
+//     } else {
+//       console.error('Callback is not a function');
+//     }
+//   }
 
-  get callback() {
-    return this._callback;
-  }
+//   get callback() {
+//     return this._callback;
+//   }
 
-  render() {
-    if (this.shadowRoot)
-      this.shadowRoot.innerHTML = `
-            <style>
-            ${processCss}
-            </style>${processHtml}
-            <script type="module">
-            ${processScript}
-            </scipt>
+//   render() {
+//     if (this.shadowRoot)
+//       this.shadowRoot.innerHTML = `
+//             <style>
+//             ${processCss}
+//             </style>${processHtml}
+//             <script type="module">
+//             ${processScript}
+//             </scipt>
             
-        `;
-  }
-}
+//         `;
+//   }
+// }
 
-if (!customElements.get('process-list-4nk-component')) {
-  customElements.define('process-list-4nk-component', ProcessListComponent);
-}
+// if (!customElements.get('process-list-4nk-component')) {
+//   customElements.define('process-list-4nk-component', ProcessListComponent);
+// }
diff --git a/src/pages/process/process.html b/src/pages/process/process.html
index 691901e..10f545b 100755
--- a/src/pages/process/process.html
+++ b/src/pages/process/process.html
@@ -1,4 +1,4 @@
-<div class="title-container">
+<!-- <div class="title-container">
   <h1>Process Selection</h1>
 </div>
 
@@ -16,4 +16,4 @@
       <a class="btn" onclick="goToProcessPage()">OK</a>
     </div>
   </div>
-</div>
+</div> -->
diff --git a/src/pages/process/process.ts b/src/pages/process/process.ts
index fadea30..8dfb3a4 100755
--- a/src/pages/process/process.ts
+++ b/src/pages/process/process.ts
@@ -1,520 +1,520 @@
-import { addSubscription } from '../../utils/subscription.utils';
-import Services from '../../services/service';
-import { getCorrectDOM } from '~/utils/html.utils';
-import { Process } from 'pkg/sdk_client';
-import chatStyle from '../../../public/style/chat.css?inline';
-import { Database } from '../../services/database.service';
+// import { addSubscription } from '../../utils/subscription.utils';
+// import Services from '../../services/service';
+// import { getCorrectDOM } from '~/utils/html.utils';
+// import { Process } from 'pkg/sdk_client';
+// import chatStyle from '../../../public/style/chat.css?inline';
+// import { Database } from '../../services/database.service';
 
-// Initialize function, create initial tokens with itens that are already selected by the user
-export async function init() {
+// // Initialize function, create initial tokens with itens that are already selected by the user
+// export async function init() {
   
-  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
-  const element = container.querySelector('select') as HTMLSelectElement;
-  // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
-  const wrapper = document.createElement('div');
-  if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper);
-  wrapper.classList.add('multi-select-component');
-  wrapper.classList.add('input-field');
+//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+//   const element = container.querySelector('select') as HTMLSelectElement;
+//   // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
+//   const wrapper = document.createElement('div');
+//   if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper);
+//   wrapper.classList.add('multi-select-component');
+//   wrapper.classList.add('input-field');
 
-  // Create elements of search
-  const search_div = document.createElement('div');
-  search_div.classList.add('search-container');
-  const input = document.createElement('input');
-  input.classList.add('selected-input');
-  input.setAttribute('autocomplete', 'off');
-  input.setAttribute('tabindex', '0');
-  if (input) {
-    addSubscription(input, 'keyup', inputChange);
-    addSubscription(input, 'keydown', deletePressed);
-    addSubscription(input, 'click', openOptions);
-  }
+//   // Create elements of search
+//   const search_div = document.createElement('div');
+//   search_div.classList.add('search-container');
+//   const input = document.createElement('input');
+//   input.classList.add('selected-input');
+//   input.setAttribute('autocomplete', 'off');
+//   input.setAttribute('tabindex', '0');
+//   if (input) {
+//     addSubscription(input, 'keyup', inputChange);
+//     addSubscription(input, 'keydown', deletePressed);
+//     addSubscription(input, 'click', openOptions);
+//   }
 
-  const dropdown_icon = document.createElement('a');
-  dropdown_icon.classList.add('dropdown-icon');
+//   const dropdown_icon = document.createElement('a');
+//   dropdown_icon.classList.add('dropdown-icon');
 
-  if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown);
-  const autocomplete_list = document.createElement('ul');
-  autocomplete_list.classList.add('autocomplete-list');
-  search_div.appendChild(input);
-  search_div.appendChild(autocomplete_list);
-  search_div.appendChild(dropdown_icon);
+//   if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown);
+//   const autocomplete_list = document.createElement('ul');
+//   autocomplete_list.classList.add('autocomplete-list');
+//   search_div.appendChild(input);
+//   search_div.appendChild(autocomplete_list);
+//   search_div.appendChild(dropdown_icon);
 
-  // set the wrapper as child (instead of the element)
-  element.parentNode?.replaceChild(wrapper, element);
-  // set element as child of wrapper
-  wrapper.appendChild(element);
-  wrapper.appendChild(search_div);
+//   // set the wrapper as child (instead of the element)
+//   element.parentNode?.replaceChild(wrapper, element);
+//   // set element as child of wrapper
+//   wrapper.appendChild(element);
+//   wrapper.appendChild(search_div);
 
-  addPlaceholder(wrapper);
-}
+//   addPlaceholder(wrapper);
+// }
 
-function removePlaceholder(wrapper: HTMLElement) {
-  const input_search = wrapper.querySelector('.selected-input');
-  input_search?.removeAttribute('placeholder');
-}
+// function removePlaceholder(wrapper: HTMLElement) {
+//   const input_search = wrapper.querySelector('.selected-input');
+//   input_search?.removeAttribute('placeholder');
+// }
 
-function addPlaceholder(wrapper: HTMLElement) {
-  const input_search = wrapper.querySelector('.selected-input');
-  const tokens = wrapper.querySelectorAll('.selected-wrapper');
-  if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
-}
+// function addPlaceholder(wrapper: HTMLElement) {
+//   const input_search = wrapper.querySelector('.selected-input');
+//   const tokens = wrapper.querySelectorAll('.selected-wrapper');
+//   if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
+// }
 
-// Listener of user search
-function inputChange(e: Event) {
-  const target = e.target as HTMLInputElement;
-  const wrapper = target?.parentNode?.parentNode;
-  const select = wrapper?.querySelector('select') as HTMLSelectElement;
-  const dropdown = wrapper?.querySelector('.dropdown-icon');
+// // Listener of user search
+// function inputChange(e: Event) {
+//   const target = e.target as HTMLInputElement;
+//   const wrapper = target?.parentNode?.parentNode;
+//   const select = wrapper?.querySelector('select') as HTMLSelectElement;
+//   const dropdown = wrapper?.querySelector('.dropdown-icon');
 
-  const input_val = target?.value;
+//   const input_val = target?.value;
 
-  if (input_val) {
-    dropdown?.classList.add('active');
-    populateAutocompleteList(select, input_val.trim());
-  } else {
-    dropdown?.classList.remove('active');
-    const event = new Event('click');
-    dropdown?.dispatchEvent(event);
-  }
-}
+//   if (input_val) {
+//     dropdown?.classList.add('active');
+//     populateAutocompleteList(select, input_val.trim());
+//   } else {
+//     dropdown?.classList.remove('active');
+//     const event = new Event('click');
+//     dropdown?.dispatchEvent(event);
+//   }
+// }
 
-// Listen for clicks on the wrapper, if click happens focus on the input
-function clickOnWrapper(e: Event) {
-  const wrapper = e.target as HTMLElement;
-  if (wrapper.tagName == 'DIV') {
-    const input_search = wrapper.querySelector('.selected-input');
-    const dropdown = wrapper.querySelector('.dropdown-icon');
-    if (!dropdown?.classList.contains('active')) {
-      const event = new Event('click');
-      dropdown?.dispatchEvent(event);
-    }
-    (input_search as HTMLInputElement)?.focus();
-    removePlaceholder(wrapper);
-  }
-}
+// // Listen for clicks on the wrapper, if click happens focus on the input
+// function clickOnWrapper(e: Event) {
+//   const wrapper = e.target as HTMLElement;
+//   if (wrapper.tagName == 'DIV') {
+//     const input_search = wrapper.querySelector('.selected-input');
+//     const dropdown = wrapper.querySelector('.dropdown-icon');
+//     if (!dropdown?.classList.contains('active')) {
+//       const event = new Event('click');
+//       dropdown?.dispatchEvent(event);
+//     }
+//     (input_search as HTMLInputElement)?.focus();
+//     removePlaceholder(wrapper);
+//   }
+// }
 
-function openOptions(e: Event) {
-  const input_search = e.target as HTMLElement;
-  const wrapper = input_search?.parentElement?.parentElement;
-  const dropdown = wrapper?.querySelector('.dropdown-icon');
-  if (!dropdown?.classList.contains('active')) {
-    const event = new Event('click');
-    dropdown?.dispatchEvent(event);
-  }
-  e.stopPropagation();
-}
+// function openOptions(e: Event) {
+//   const input_search = e.target as HTMLElement;
+//   const wrapper = input_search?.parentElement?.parentElement;
+//   const dropdown = wrapper?.querySelector('.dropdown-icon');
+//   if (!dropdown?.classList.contains('active')) {
+//     const event = new Event('click');
+//     dropdown?.dispatchEvent(event);
+//   }
+//   e.stopPropagation();
+// }
 
-// Function that create a token inside of a wrapper with the given value
-function createToken(wrapper: HTMLElement, value: any) {
-  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
-  const search = wrapper.querySelector('.search-container');
-  const inputInderline = container.querySelector('.selected-processes');
-  // Create token wrapper
-  const token = document.createElement('div');
-  token.classList.add('selected-wrapper');
-  const token_span = document.createElement('span');
-  token_span.classList.add('selected-label');
-  token_span.innerText = value;
-  const close = document.createElement('a');
-  close.classList.add('selected-close');
-  close.setAttribute('tabindex', '-1');
-  close.setAttribute('data-option', value);
-  close.setAttribute('data-hits', '0');
-  close.innerText = 'x';
-  if (close) addSubscription(close, 'click', removeToken);
-  token.appendChild(token_span);
-  token.appendChild(close);
-  inputInderline?.appendChild(token);
-}
+// // Function that create a token inside of a wrapper with the given value
+// function createToken(wrapper: HTMLElement, value: any) {
+//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+//   const search = wrapper.querySelector('.search-container');
+//   const inputInderline = container.querySelector('.selected-processes');
+//   // Create token wrapper
+//   const token = document.createElement('div');
+//   token.classList.add('selected-wrapper');
+//   const token_span = document.createElement('span');
+//   token_span.classList.add('selected-label');
+//   token_span.innerText = value;
+//   const close = document.createElement('a');
+//   close.classList.add('selected-close');
+//   close.setAttribute('tabindex', '-1');
+//   close.setAttribute('data-option', value);
+//   close.setAttribute('data-hits', '0');
+//   close.innerText = 'x';
+//   if (close) addSubscription(close, 'click', removeToken);
+//   token.appendChild(token_span);
+//   token.appendChild(close);
+//   inputInderline?.appendChild(token);
+// }
 
-// Listen for clicks in the dropdown option
-function clickDropdown(e: Event) {
-  const dropdown = e.target as HTMLElement;
-  const wrapper = dropdown?.parentNode?.parentNode;
-  const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
-  const select = wrapper?.querySelector('select') as HTMLSelectElement;
-  dropdown.classList.toggle('active');
+// // Listen for clicks in the dropdown option
+// function clickDropdown(e: Event) {
+//   const dropdown = e.target as HTMLElement;
+//   const wrapper = dropdown?.parentNode?.parentNode;
+//   const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
+//   const select = wrapper?.querySelector('select') as HTMLSelectElement;
+//   dropdown.classList.toggle('active');
 
-  if (dropdown.classList.contains('active')) {
-    removePlaceholder(wrapper as HTMLElement);
-    input_search?.focus();
+//   if (dropdown.classList.contains('active')) {
+//     removePlaceholder(wrapper as HTMLElement);
+//     input_search?.focus();
 
-    if (!input_search?.value) {
-      populateAutocompleteList(select, '', true);
-    } else {
-      populateAutocompleteList(select, input_search.value);
-    }
-  } else {
-    clearAutocompleteList(select);
-    addPlaceholder(wrapper as HTMLElement);
-  }
-}
+//     if (!input_search?.value) {
+//       populateAutocompleteList(select, '', true);
+//     } else {
+//       populateAutocompleteList(select, input_search.value);
+//     }
+//   } else {
+//     clearAutocompleteList(select);
+//     addPlaceholder(wrapper as HTMLElement);
+//   }
+// }
 
-// Clears the results of the autocomplete list
-function clearAutocompleteList(select: HTMLSelectElement) {
-  const wrapper = select.parentNode;
+// // Clears the results of the autocomplete list
+// function clearAutocompleteList(select: HTMLSelectElement) {
+//   const wrapper = select.parentNode;
 
-  const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
-  if (autocomplete_list) autocomplete_list.innerHTML = '';
-}
+//   const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
+//   if (autocomplete_list) autocomplete_list.innerHTML = '';
+// }
 
-async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
-  const { autocomplete_options } = getOptions(select);
+// async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
+//   const { autocomplete_options } = getOptions(select);
 
-  let options_to_show = [];
+//   let options_to_show = [];
 
-  const service = await Services.getInstance();
-  const mineArray: string[] = await service.getMyProcesses();
-  const allProcesses = await service.getProcesses();
-  const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x));
+//   const service = await Services.getInstance();
+//   const mineArray: string[] = await service.getMyProcesses();
+//   const allProcesses = await service.getProcesses();
+//   const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x));
 
-  const wrapper = select.parentNode;
-  const input_search = wrapper?.querySelector('.search-container');
-  const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
-  if (autocomplete_list) autocomplete_list.innerHTML = '';
+//   const wrapper = select.parentNode;
+//   const input_search = wrapper?.querySelector('.search-container');
+//   const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
+//   if (autocomplete_list) autocomplete_list.innerHTML = '';
 
-  const addProcessToList = (processId:string, isMine: boolean) => {
-    const li = document.createElement('li');
-    li.innerText = processId;
-    li.setAttribute("data-value", processId);
+//   const addProcessToList = (processId:string, isMine: boolean) => {
+//     const li = document.createElement('li');
+//     li.innerText = processId;
+//     li.setAttribute("data-value", processId);
 
-    if (isMine) {
-      li.classList.add("my-process");
-      li.style.cssText = `color: var(--accent-color)`;
-    }
+//     if (isMine) {
+//       li.classList.add("my-process");
+//       li.style.cssText = `color: var(--accent-color)`;
+//     }
 
-    if (li) addSubscription(li, 'click', selectOption);
-    autocomplete_list?.appendChild(li);
-  };
+//     if (li) addSubscription(li, 'click', selectOption);
+//     autocomplete_list?.appendChild(li);
+//   };
 
-  mineArray.forEach(processId => addProcessToList(processId, true));
-  allArray.forEach(processId => addProcessToList(processId, false));
+//   mineArray.forEach(processId => addProcessToList(processId, true));
+//   allArray.forEach(processId => addProcessToList(processId, false));
   
-  if (mineArray.length === 0 && allArray.length === 0) {
-    const li = document.createElement('li');
-    li.classList.add('not-cursor');
-    li.innerText = 'No options found';
-    autocomplete_list?.appendChild(li);
-  }
-}
+//   if (mineArray.length === 0 && allArray.length === 0) {
+//     const li = document.createElement('li');
+//     li.classList.add('not-cursor');
+//     li.innerText = 'No options found';
+//     autocomplete_list?.appendChild(li);
+//   }
+// }
 
-// Listener to autocomplete results when clicked set the selected property in the select option
-function selectOption(e: any) {
-  console.log('🎯 Click event:', e);
-  console.log('🎯 Target value:', e.target.dataset.value);
+// // Listener to autocomplete results when clicked set the selected property in the select option
+// function selectOption(e: any) {
+//   console.log('🎯 Click event:', e);
+//   console.log('🎯 Target value:', e.target.dataset.value);
   
-  const wrapper = e.target.parentNode.parentNode.parentNode;
-  const select = wrapper.querySelector('select');
-  const input_search = wrapper.querySelector('.selected-input');
-  const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
+//   const wrapper = e.target.parentNode.parentNode.parentNode;
+//   const select = wrapper.querySelector('select');
+//   const input_search = wrapper.querySelector('.selected-input');
+//   const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
   
-  console.log('🎯 Selected option:', option);
-  console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
+//   console.log('🎯 Selected option:', option);
+//   console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
 
-  if (e.target.dataset.value.includes('messaging')) {
-    const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
-    const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
+//   if (e.target.dataset.value.includes('messaging')) {
+//     const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
+//     const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
     
-    console.log('🚀 Dispatching newMessagingProcess event:', {
-      processId,
-      processName: `Messaging Process ${processId}`
-    });
+//     console.log('🚀 Dispatching newMessagingProcess event:', {
+//       processId,
+//       processName: `Messaging Process ${processId}`
+//     });
 
-    // Dispatch l'événement avant la navigation
-    document.dispatchEvent(new CustomEvent('newMessagingProcess', {
-      detail: {
-        processId: processId,
-        processName: `Messaging Process ${processId}`
-      }
-    }));
+//     // Dispatch l'événement avant la navigation
+//     document.dispatchEvent(new CustomEvent('newMessagingProcess', {
+//       detail: {
+//         processId: processId,
+//         processName: `Messaging Process ${processId}`
+//       }
+//     }));
     
-    // Navigation vers le chat
-    const navigateEvent = new CustomEvent('navigate', {
-      detail: {
-        page: 'chat',
-        processId: processId || ''
-      }
-    });
-    document.dispatchEvent(navigateEvent);
-    return;
-  }
-  option.setAttribute('selected', '');
-  createToken(wrapper, e.target.dataset.value);
-  if (input_search.value) {
-    input_search.value = '';
-  }
+//     // Navigation vers le chat
+//     const navigateEvent = new CustomEvent('navigate', {
+//       detail: {
+//         page: 'chat',
+//         processId: processId || ''
+//       }
+//     });
+//     document.dispatchEvent(navigateEvent);
+//     return;
+//   }
+//   option.setAttribute('selected', '');
+//   createToken(wrapper, e.target.dataset.value);
+//   if (input_search.value) {
+//     input_search.value = '';
+//   }
 
-  showSelectedProcess(e.target.dataset.value);
+//   showSelectedProcess(e.target.dataset.value);
 
-  input_search.focus();
+//   input_search.focus();
 
-  e.target.remove();
-  const autocomplete_list = wrapper.querySelector('.autocomplete-list');
+//   e.target.remove();
+//   const autocomplete_list = wrapper.querySelector('.autocomplete-list');
 
-  if (!autocomplete_list.children.length) {
-    const li = document.createElement('li');
-    li.classList.add('not-cursor');
-    li.innerText = 'No options found';
-    autocomplete_list.appendChild(li);
-  }
+//   if (!autocomplete_list.children.length) {
+//     const li = document.createElement('li');
+//     li.classList.add('not-cursor');
+//     li.innerText = 'No options found';
+//     autocomplete_list.appendChild(li);
+//   }
 
-  const event = new Event('keyup');
-  input_search.dispatchEvent(event);
-  e.stopPropagation();
-}
+//   const event = new Event('keyup');
+//   input_search.dispatchEvent(event);
+//   e.stopPropagation();
+// }
 
-// function that returns a list with the autcomplete list of matches
-function autocomplete(query: string, options: any) {
-  // No query passed, just return entire list
-  if (!query) {
-    return options;
-  }
-  let options_return = [];
+// // function that returns a list with the autcomplete list of matches
+// function autocomplete(query: string, options: any) {
+//   // No query passed, just return entire list
+//   if (!query) {
+//     return options;
+//   }
+//   let options_return = [];
 
-  for (let i = 0; i < options.length; i++) {
-    if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
-      options_return.push(options[i]);
-    }
-  }
-  return options_return;
-}
+//   for (let i = 0; i < options.length; i++) {
+//     if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
+//       options_return.push(options[i]);
+//     }
+//   }
+//   return options_return;
+// }
 
-// Returns the options that are selected by the user and the ones that are not
-function getOptions(select: HTMLSelectElement) {
-  // Select all the options available
-  const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
+// // Returns the options that are selected by the user and the ones that are not
+// function getOptions(select: HTMLSelectElement) {
+//   // Select all the options available
+//   const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
 
-  // Get the options that are selected from the user
-  const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
+//   // Get the options that are selected from the user
+//   const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
 
-  // Create an autocomplete options array with the options that are not selected by the user
-  const autocomplete_options: any[] = [];
-  all_options.forEach((option) => {
-    if (!options_selected.includes(option)) {
-      autocomplete_options.push(option);
-    }
-  });
+//   // Create an autocomplete options array with the options that are not selected by the user
+//   const autocomplete_options: any[] = [];
+//   all_options.forEach((option) => {
+//     if (!options_selected.includes(option)) {
+//       autocomplete_options.push(option);
+//     }
+//   });
 
-  autocomplete_options.sort();
+//   autocomplete_options.sort();
 
-  return {
-    options_selected,
-    autocomplete_options,
-  };
-}
+//   return {
+//     options_selected,
+//     autocomplete_options,
+//   };
+// }
 
-// Listener for when the user wants to remove a given token.
-function removeToken(e: Event) {
-  // Get the value to remove
-  const target = e.target as HTMLSelectElement;
-  const value_to_remove = target.dataset.option;
-  const wrapper = target.parentNode?.parentNode?.parentNode;
-  const input_search = wrapper?.querySelector('.selected-input');
-  const dropdown = wrapper?.querySelector('.dropdown-icon');
-  // Get the options in the select to be unselected
-  const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
-  option_to_unselect?.removeAttribute('selected');
-  // Remove token attribute
-  (target.parentNode as any)?.remove();
-  dropdown?.classList.remove('active');
-  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+// // Listener for when the user wants to remove a given token.
+// function removeToken(e: Event) {
+//   // Get the value to remove
+//   const target = e.target as HTMLSelectElement;
+//   const value_to_remove = target.dataset.option;
+//   const wrapper = target.parentNode?.parentNode?.parentNode;
+//   const input_search = wrapper?.querySelector('.selected-input');
+//   const dropdown = wrapper?.querySelector('.dropdown-icon');
+//   // Get the options in the select to be unselected
+//   const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
+//   option_to_unselect?.removeAttribute('selected');
+//   // Remove token attribute
+//   (target.parentNode as any)?.remove();
+//   dropdown?.classList.remove('active');
+//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
 
-  const process = container.querySelector('#' + target.dataset.option);
-  process?.remove();
-}
+//   const process = container.querySelector('#' + target.dataset.option);
+//   process?.remove();
+// }
 
-// Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist
-function deletePressed(e: Event) {
-  const input_search = e.target as HTMLInputElement;
-  const wrapper = input_search?.parentNode?.parentNode;
-  const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
-  const tokens = wrapper?.querySelectorAll('.selected-wrapper');
+// // Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist
+// function deletePressed(e: Event) {
+//   const input_search = e.target as HTMLInputElement;
+//   const wrapper = input_search?.parentNode?.parentNode;
+//   const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
+//   const tokens = wrapper?.querySelectorAll('.selected-wrapper');
 
-  if (tokens?.length) {
-    const last_token_x = tokens[tokens.length - 1].querySelector('a');
-    let hits = +(last_token_x?.dataset?.hits || 0);
+//   if (tokens?.length) {
+//     const last_token_x = tokens[tokens.length - 1].querySelector('a');
+//     let hits = +(last_token_x?.dataset?.hits || 0);
 
-    if (key == 8 || key == 46) {
-      if (!input_search.value) {
-        if (hits > 1) {
-          // Trigger delete event
-          const event = new Event('click');
-          last_token_x?.dispatchEvent(event);
-        } else {
-          if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
-        }
-      }
-    } else {
-      if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
-    }
-  }
-  return true;
-}
+//     if (key == 8 || key == 46) {
+//       if (!input_search.value) {
+//         if (hits > 1) {
+//           // Trigger delete event
+//           const event = new Event('click');
+//           last_token_x?.dispatchEvent(event);
+//         } else {
+//           if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
+//         }
+//       }
+//     } else {
+//       if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
+//     }
+//   }
+//   return true;
+// }
 
-// Dismiss on outside click
-addSubscription(document, 'click', () => {
-  // get select that has the options available
-  const select = document.querySelectorAll('[data-multi-select-plugin]');
-  for (let i = 0; i < select.length; i++) {
-    if (event) {
-      var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
+// // Dismiss on outside click
+// addSubscription(document, 'click', () => {
+//   // get select that has the options available
+//   const select = document.querySelectorAll('[data-multi-select-plugin]');
+//   for (let i = 0; i < select.length; i++) {
+//     if (event) {
+//       var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
 
-      if (!isClickInside) {
-        const wrapper = select[i].parentElement?.parentElement;
-        const dropdown = wrapper?.querySelector('.dropdown-icon');
-        const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
-        //the click was outside the specifiedElement, do something
-        dropdown?.classList.remove('active');
-        if (autocomplete_list) autocomplete_list.innerHTML = '';
-        addPlaceholder(wrapper as HTMLElement);
-      }
-    }
-  }
-});
+//       if (!isClickInside) {
+//         const wrapper = select[i].parentElement?.parentElement;
+//         const dropdown = wrapper?.querySelector('.dropdown-icon');
+//         const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
+//         //the click was outside the specifiedElement, do something
+//         dropdown?.classList.remove('active');
+//         if (autocomplete_list) autocomplete_list.innerHTML = '';
+//         addPlaceholder(wrapper as HTMLElement);
+//       }
+//     }
+//   }
+// });
 
-async function showSelectedProcess(elem: MouseEvent) {
-  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+// async function showSelectedProcess(elem: MouseEvent) {
+//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
 
-  if (elem) {
-    const cardContent = container.querySelector('.process-card-content');
+//   if (elem) {
+//     const cardContent = container.querySelector('.process-card-content');
 
-    const processes = await getProcesses();
-    const process = processes.find((process: any) => process[1].title === elem);
-    if (process) {
-      const processDiv = document.createElement('div');
-      processDiv.className = 'process';
-      processDiv.id = process[0];
-      const titleDiv = document.createElement('div');
-      titleDiv.className = 'process-title';
-      titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`;
-      processDiv.appendChild(titleDiv);
-      for (const zone of process.zones) {
-        const zoneElement = document.createElement('div');
-        zoneElement.className = 'process-element';
-        const zoneId = process[1].title + '-' + zone.id;
-        zoneElement.setAttribute('zone-id', zoneId);
-        zoneElement.setAttribute('process-title', process[1].title);
-        zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`);
-        zoneElement.innerHTML = `${zone.title}: ${zone.description}`;
-        addSubscription(zoneElement, 'click', select);
-        processDiv.appendChild(zoneElement);
-      }
-      if (cardContent) cardContent.appendChild(processDiv);
-    }
-  }
-}
+//     const processes = await getProcesses();
+//     const process = processes.find((process: any) => process[1].title === elem);
+//     if (process) {
+//       const processDiv = document.createElement('div');
+//       processDiv.className = 'process';
+//       processDiv.id = process[0];
+//       const titleDiv = document.createElement('div');
+//       titleDiv.className = 'process-title';
+//       titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`;
+//       processDiv.appendChild(titleDiv);
+//       for (const zone of process.zones) {
+//         const zoneElement = document.createElement('div');
+//         zoneElement.className = 'process-element';
+//         const zoneId = process[1].title + '-' + zone.id;
+//         zoneElement.setAttribute('zone-id', zoneId);
+//         zoneElement.setAttribute('process-title', process[1].title);
+//         zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`);
+//         zoneElement.innerHTML = `${zone.title}: ${zone.description}`;
+//         addSubscription(zoneElement, 'click', select);
+//         processDiv.appendChild(zoneElement);
+//       }
+//       if (cardContent) cardContent.appendChild(processDiv);
+//     }
+//   }
+// }
 
-function select(event: Event) {
-  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
-  const target = event.target as HTMLElement;
-  const oldSelectedProcess = container.querySelector('.selected-process-zone');
-  oldSelectedProcess?.classList.remove('selected-process-zone');
-  if (target) {
-    target.classList.add('selected-process-zone');
-  }
-  const name = target.getAttribute('zone-id');
-  console.log('🚀 ~ select ~ name:', name);
-}
+// function select(event: Event) {
+//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+//   const target = event.target as HTMLElement;
+//   const oldSelectedProcess = container.querySelector('.selected-process-zone');
+//   oldSelectedProcess?.classList.remove('selected-process-zone');
+//   if (target) {
+//     target.classList.add('selected-process-zone');
+//   }
+//   const name = target.getAttribute('zone-id');
+//   console.log('🚀 ~ select ~ name:', name);
+// }
 
-function goToProcessPage() {
-  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+// function goToProcessPage() {
+//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
 
-  const target = container.querySelector('.selected-process-zone');
-  console.log('🚀 ~ goToProcessPage ~ event:', target);
-  if (target) {
-    const process = target?.getAttribute('process-id');
+//   const target = container.querySelector('.selected-process-zone');
+//   console.log('🚀 ~ goToProcessPage ~ event:', target);
+//   if (target) {
+//     const process = target?.getAttribute('process-id');
 
-    console.log('=======================> going to process page', process);
-    // navigate('process-element/' + process);
-    document.querySelector('process-list-4nk-component')?.dispatchEvent(
-      new CustomEvent('processSelected', {
-        detail: {
-          process: process,
-        },
-      }),
-    );
-  }
-}
+//     console.log('=======================> going to process page', process);
+//     // navigate('process-element/' + process);
+//     document.querySelector('process-list-4nk-component')?.dispatchEvent(
+//       new CustomEvent('processSelected', {
+//         detail: {
+//           process: process,
+//         },
+//       }),
+//     );
+//   }
+// }
 
-(window as any).goToProcessPage = goToProcessPage;
+// (window as any).goToProcessPage = goToProcessPage;
 
-async function createMessagingProcess(): Promise<void> {
-  console.log('Creating messaging process');
-  const service = await Services.getInstance();
-  const otherMembers = [
-    {
-      sp_addresses: [
-        "tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a",
-        "tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc"
-      ]
-    },
-    {
-      sp_addresses: [
-        "tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7",
-        "tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28"
-      ]
-    },
-    {
-      sp_addresses: [
-        "tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2",
-        "tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5"
-      ]
-    }
-  ];
-  await service.checkConnections(otherMembers);
-  const relayAddress = service.getAllRelays().pop();
-  if (!relayAddress) {
-    throw new Error('Empty relay address list');
-  }
-  const feeRate = 1;
-  setTimeout(async () => {
-    const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate);
-    const updatedProcess = createProcessReturn.updated_process.current_process;
-    if (!updatedProcess) {
-      console.error('Failed to retrieved new messaging process');
-      return;
-    }
-    const processId = updatedProcess.states[0].commited_in;
-    const stateId = updatedProcess.states[0].state_id;
-    await service.handleApiReturn(createProcessReturn);
-    const createPrdReturn = await service.createPrdUpdate(processId, stateId);
-    await service.handleApiReturn(createPrdReturn);
-    const approveChangeReturn = await service.approveChange(processId, stateId);
-    await service.handleApiReturn(approveChangeReturn);
-  }, 500)
-}
+// async function createMessagingProcess(): Promise<void> {
+//   console.log('Creating messaging process');
+//   const service = await Services.getInstance();
+//   const otherMembers = [
+//     {
+//       sp_addresses: [
+//         "tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a",
+//         "tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc"
+//       ]
+//     },
+//     {
+//       sp_addresses: [
+//         "tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7",
+//         "tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28"
+//       ]
+//     },
+//     {
+//       sp_addresses: [
+//         "tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2",
+//         "tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5"
+//       ]
+//     }
+//   ];
+//   await service.checkConnections(otherMembers);
+//   const relayAddress = service.getAllRelays().pop();
+//   if (!relayAddress) {
+//     throw new Error('Empty relay address list');
+//   }
+//   const feeRate = 1;
+//   setTimeout(async () => {
+//     const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate);
+//     const updatedProcess = createProcessReturn.updated_process.current_process;
+//     if (!updatedProcess) {
+//       console.error('Failed to retrieved new messaging process');
+//       return;
+//     }
+//     const processId = updatedProcess.states[0].commited_in;
+//     const stateId = updatedProcess.states[0].state_id;
+//     await service.handleApiReturn(createProcessReturn);
+//     const createPrdReturn = await service.createPrdUpdate(processId, stateId);
+//     await service.handleApiReturn(createPrdReturn);
+//     const approveChangeReturn = await service.approveChange(processId, stateId);
+//     await service.handleApiReturn(approveChangeReturn);
+//   }, 500)
+// }
 
-async function getDescription(processId: string, process: Process): Promise<string | null> {
-  const service = await Services.getInstance();
-  // Get the `commited_in` value of the last state and remove it from the array
-  const currentCommitedIn = process.states.pop()?.commited_in;
+// async function getDescription(processId: string, process: Process): Promise<string | null> {
+//   const service = await Services.getInstance();
+//   // Get the `commited_in` value of the last state and remove it from the array
+//   const currentCommitedIn = process.states.pop()?.commited_in;
 
-  if (currentCommitedIn === undefined) {
-    return null; // No states available
-  }
+//   if (currentCommitedIn === undefined) {
+//     return null; // No states available
+//   }
 
-  // Find the last state where `commited_in` is different
-  let lastDifferentState = process.states.findLast(
-    state => state.commited_in !== currentCommitedIn
-  );
+//   // Find the last state where `commited_in` is different
+//   let lastDifferentState = process.states.findLast(
+//     state => state.commited_in !== currentCommitedIn
+//   );
 
-  if (!lastDifferentState) {
-    // It means that we only have one state that is not commited yet, that can happen with process we just created
-    // let's assume that the right description is in the last concurrent state and not handle the (arguably rare) case where we have multiple concurrent states on a creation
-    lastDifferentState = process.states.pop();
-  }
+//   if (!lastDifferentState) {
+//     // It means that we only have one state that is not commited yet, that can happen with process we just created
+//     // let's assume that the right description is in the last concurrent state and not handle the (arguably rare) case where we have multiple concurrent states on a creation
+//     lastDifferentState = process.states.pop();
+//   }
 
-  // Take the description out of the state, if any
-  const description = lastDifferentState!.pcd_commitment['description'];
-  if (description) {
-    const userDiff = await service.getDiffByValue(description);
-    if (userDiff) {
-      console.log("Successfully retrieved userDiff:", userDiff);
-      return userDiff.new_value;
-    } else {
-      console.log("Failed to retrieve a non-null userDiff.");
-    }
-  }
+//   // Take the description out of the state, if any
+//   const description = lastDifferentState!.pcd_commitment['description'];
+//   if (description) {
+//     const userDiff = await service.getDiffByValue(description);
+//     if (userDiff) {
+//       console.log("Successfully retrieved userDiff:", userDiff);
+//       return userDiff.new_value;
+//     } else {
+//       console.log("Failed to retrieve a non-null userDiff.");
+//     }
+//   }
 
-  return null;
-}
+//   return null;
+// }
diff --git a/src/router.ts b/src/router.ts
index afc10c9..22d411c 100755
--- a/src/router.ts
+++ b/src/router.ts
@@ -62,14 +62,14 @@ async function handleLocation(path: string) {
     switch (path) {
       case 'process':
         // const { init } = await import('./pages/process/process');
-        const { ProcessListComponent } = await import('./pages/process/process-list-component');
+        //const { ProcessListComponent } = await import('./pages/process/process-list-component');
 
         const container2 = document.querySelector('#containerId');
         const accountComponent = document.createElement('process-list-4nk-component');
 
-        if (!customElements.get('process-list-4nk-component')) {
-          customElements.define('process-list-4nk-component', ProcessListComponent);
-        }
+        //if (!customElements.get('process-list-4nk-component')) {
+          //customElements.define('process-list-4nk-component', ProcessListComponent);
+        //}
         accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
         if (container2) container2.appendChild(accountComponent);
         break;