Index: sources/gui/qml/components/StackItem.qml
===================================================================
diff -u -r074b32b5cc08f41f2d9ce0d021f2151b76bba5ad -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/StackItem.qml	(.../StackItem.qml)	(revision 074b32b5cc08f41f2d9ce0d021f2151b76bba5ad)
+++ sources/gui/qml/components/StackItem.qml	(.../StackItem.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,16 +1,16 @@
 /*!
- * 
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ *
+ * Copyright (c) 2019-2024 Diality Inc. - All Rights Reserved.
  * \copyright
  * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
  * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
- * 
- * \file StackItem.qml
- * \author (last) Behrouz NematiPour
- * \date (last) 22-Mar-2020
- * \author (original) Behrouz NematiPour
- * \date (original) 21-Oct-2019
- * 
+ *
+ * \file    StackItem.qml
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      29-Jun-2022
+ * \author  (original)  Behrouz NematiPour
+ * \date    (original)  21-Oct-2019
+ *
  */
 
 // Qt
@@ -27,21 +27,95 @@
 Item { id : _root
     property alias stackView: _stackView
 
+    visible: false
+
     width : Variables.applicationWidth
     height: Variables.applicationHeight
 
-    function pop () {
-        _stackView.pop()
+    /*!
+     * \brief   prints out the list of the items in the stack by their index position in the stack.
+     */
+    function info(vInfo) {
+        // DEBUG:
+        if ( true ) return
+        console.debug('-----')
+        if ( vInfo !== undefined ) console.debug(vInfo)
+        for( var i = 0; i < _stackView.depth; i++ ) {
+            console.debug("index:", i, _stackView.get(i))
+        }
+        console.debug(_stackView.depth)
     }
 
+    /*!
+     * \brief   page function gets the screen vScreen and tries to find the screen in the stack.
+     *          if the page found will pop the items on stack down to that screen.
+     *          otherwise adds that screen on top of the stack
+     * \param   vScreen     - The screen to navigate to
+     * \param   vCondition  - if the vCondition has been passed and is false then page returns immediately
+     * \param   vInfo       - some extra information to be shown in the info function if the screen name is the same
+     *
+     */
+    function page(vScreen, vCondition, vInfo) {
+        if ( vScreen    === undefined || vScreen    === null  ) return
+        if ( vCondition !== undefined && vCondition === false ) return
+
+        if (stackView.find(function(screen) {
+              return screen === vScreen;
+          })) {
+            _stackView.pop(vScreen)
+        }
+        else {
+            _stackView.push(vScreen)
+        }
+        info(vInfo)
+    }
+
+    /*!
+     * \brief   pops the screen vScreen from the top of the stack
+     */
+    function pop (vScreen) {
+        _stackView.pop(vScreen)
+        info()
+    }
+
+    /*!
+     * \brief   pushes the screen vScreen on the top of the stack
+     */
     function push (vScreen) {
-        _stackView.push(vScreen)
+        if ( vScreen    === undefined || vScreen    === null  ) return
+        if ( _stackView.currentItem === vScreen) {
+            console.debug("same current screen didn't push" , vScreen)
+        }
+        else {
+            _stackView.push(vScreen)
+        }
+        info()
     }
 
-    function popToItem(item) {
-        _stackView.pop(item);
+    /*!
+     * \brief   replaces the current item of the stack (top) with the vScreen, if the vReplaces hasn't been passed
+     *          otherwise will replace the screen vScreen with the screen vReplaced.
+     * \note    it doens't check if the screen vReplaced exists in the stack,
+     *          and it needs to be in the stack to be replaced.
+     */
+    function replace(vScreen, vReplaced) {
+        if (vReplaced === undefined) {
+            _stackView.replace(_stackView.currentItem, vScreen)
+        }
+        else {
+            _stackView.replace(vReplaced, vScreen)
+        }
+        info()
     }
 
+    /*!
+      * \brief  reset the stack to the bottom and only the first item will remain.
+      */
+    function reset() {
+        stackView.clear()
+        push(stackView.initialItem)
+    }
+
     StackView { id  : _stackView
         initialItem : null
         anchors.fill: parent