Index: sources/gui/qml/components/StackItem.qml
===================================================================
diff -u -r62efc6d8ead9b39b47859fdc9c0661f30b5941d0 -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/StackItem.qml	(.../StackItem.qml)	(revision 62efc6d8ead9b39b47859fdc9c0661f30b5941d0)
+++ sources/gui/qml/components/StackItem.qml	(.../StackItem.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,20 +1,21 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
- * \copyright                                                       \n
- *          THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM,  \n
- *          IN PART OR IN WHOLE,                                    \n
- *          WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER. \n
+ * 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
- * \date    2019/10/21
- * \author  Behrouz NematiPour
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      29-Jun-2022
+ * \author  (original)  Behrouz NematiPour
+ * \date    (original)  21-Oct-2019
  *
  */
 
 // Qt
 import QtQuick 2.12
-import QtQuick.Controls 2.12
+import QtQuick.Controls 2.12 // StackView
 
 // Project
 //  Qml imports
@@ -23,19 +24,98 @@
 /*!
  * \brief   The parent container of screens in StackView
  */
-ScreenItem { id : _root
+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()
     }
 
+    /*!
+     * \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