Index: sources/gui/qml/pages/pretreatment/PreTreatmentBase.qml
===================================================================
diff -u -rfa1b7c7d5ca98b991168bacc0bab1e9614ed39b6 -rdb2238dcf17941be6a3c587b55a3ef06b94cee96
--- sources/gui/qml/pages/pretreatment/PreTreatmentBase.qml	(.../PreTreatmentBase.qml)	(revision fa1b7c7d5ca98b991168bacc0bab1e9614ed39b6)
+++ sources/gui/qml/pages/pretreatment/PreTreatmentBase.qml	(.../PreTreatmentBase.qml)	(revision db2238dcf17941be6a3c587b55a3ef06b94cee96)
@@ -28,22 +28,56 @@
 ScreenItem { id: _root
     objectName: "_PreTreatmentBase"
 
-    property alias  reasonText  : _notification.text
-    property alias  header      : _titleBar
-    property alias  title       : _titleText
+    property alias  reasonText      : _notification.text
+    property alias  header          : _titleBar
+    property alias  title           : _titleText
+    property alias  footer          : _footer
 
+    property bool   instructionBased        : false
+    readonly property alias instruction     : _instructionLoader.item
+    property var    instructionStepNames    : []
+    property var    instructionStepImages   : []
+
+    property bool   hasTimeCircle           : false
+    readonly property alias timeCircle      : _timeCircleLoader.item
+    property bool   timeCircleisChecked     : false
+    property int    timeCircleMinimum       : 0
+    property int    timeCircleMaximum       : 0
+    property int    timeCircleProgressValue : 0
+    property int    timeCircleTimeTextValue : 0
+
+    property bool   hasCheckList            : false
+    readonly property alias checkList       : _checkListLoader.item
+    property var    checkListStepNames      : []
+    property int    checkListCompleteMargin :  50
+
+    property bool   isComplete              : false
+
     readonly property int titleTopMargin: 110
 
     signal    backClicked()
     signal confirmClicked()
 
-    PreTreatmentTitleBar { id: _titleBar
-        stepIndex: 0
+    // vvvvvvvvvvvvvvvvvvvvvvvvv   HEADER  vvvvvvvvvvvvvvvvvvvvvvvvv //
+    StepNavigationTitleBar { id: _titleBar
+        stepIndex       : stackStepIndex // shall be defined in the parent stack
         anchors.top     : _root.top
         anchors.horizontalCenter : parent.horizontalCenter
         width           : _root.width
-        onBackClicked   : _root.backClicked();
-        onConfirmClicked : _root.confirmClicked()
+        confirmEnabeled : instruction ? instruction.lastStep : true
+        stepNames: [
+            qsTr("Create"           ),
+            qsTr("Sample"           ),
+            qsTr("Consumables"      ),
+            qsTr("Disposables"      ),
+            qsTr("Prime"            ),
+            qsTr("Ultrafiltration"  ),
+            qsTr("BP/HR"            ),
+            qsTr("Connection"       ),
+            qsTr("Start"            ),
+        ]
+        onBackClicked   : _root.backClicked()
+        onConfirmClicked: _root.confirmClicked()
     }
 
     Text { id: _titleText
@@ -52,16 +86,79 @@
             topMargin   : titleTopMargin
             horizontalCenter: parent.horizontalCenter
         }
-        text: qsTr("PreTreatmentBase")
-        color: Colors.textMain
-        font.pixelSize: Fonts.fontPixelTitle
+        text            : qsTr("PreTreatmentBase")
+        color           : Colors.textMain
+        font.pixelSize  : Fonts.fontPixelTitle
     }
 
+    // ^^^^^^^^^^^^^^^^^^^^^^^^^   HEADER  ^^^^^^^^^^^^^^^^^^^^^^^^^ //
+
+    // vvvvvvvvvvvvvvvvvvvv Optional Components vvvvvvvvvvvvvvvvvvvv //
+    Loader { id: _instructionLoader
+        readonly property int outerHMargin  : 30
+        readonly property int outerVMargin  : 15
+        active              : _root.instructionBased
+        anchors {
+            top             : title.bottom
+            bottom          : footer.top
+            left            : parent.left
+            right           : parent.right
+            leftMargin      : outerHMargin
+            rightMargin     : outerHMargin
+            topMargin       : outerVMargin
+            bottomMargin    : outerVMargin
+        }
+        sourceComponent     : InstructionView { id: _instructionView
+            stepNames       : _root.instructionStepNames
+            stepImages      : _root.instructionStepImages
+        }
+    }
+
+    Loader { id : _timeCircleLoader
+        active              : _root.hasTimeCircle
+
+        anchors.top         : _root.hasCheckList ? title.bottom : undefined
+        anchors.topMargin   : _root.hasCheckList ? 25           : 0
+        anchors.horizontalCenter: _root.horizontalCenter
+        anchors.centerIn    : ! _root.hasCheckList ? parent : undefined
+        sourceComponent     : TimeCircle { id: _timeCircle
+            isChecked       : _root.isComplete
+            minimum         : _root.timeCircleMinimum
+            maximum         : _root.timeCircleMaximum
+            progressValue   : _root.timeCircleProgressValue
+            timeTextValue   : _root.timeCircleTimeTextValue
+            thickness           : _root.hasCheckList ? 1 : 2
+            diameter            : _root.hasCheckList ? Variables.progressCircleDiameterSmall : Variables.progressCircleDiameterNormal
+            timeTextPixelSize   : _root.hasCheckList ? Fonts.fontPixelCirclProgressTimeSmall : Fonts.fontPixelCirclProgressTimeNormal
+        }
+    }
+
+    Loader { id: _checkListLoader
+        active              :   _root.hasCheckList
+        anchors.top         :   _root.hasTimeCircle ? _timeCircleLoader.bottom : undefined
+        anchors.topMargin   :   _root.hasTimeCircle ? 25                       : 0
+        anchors.horizontalCenter: _root.horizontalCenter
+        anchors.centerIn    : ! _root.hasTimeCircle ? parent                   : undefined
+        width               : Variables.checkListViewItemWidth
+        height              : Variables.checkListViewItemHeight * _root.checkListStepNames.length
+        sourceComponent     : CheckListView { id: _checkListView
+            completeVisible : _root.isComplete
+            stepNames       : _root.checkListStepNames
+            completeMargin  : _root.checkListCompleteMargin
+        }
+    }
+
+    // ^^^^^^^^^^^^^^^^^^^^ Optional Components ^^^^^^^^^^^^^^^^^^^^ //
+
+    Footer { id: _footer }
+
     NotificationBar { id: _notification
         iconVisible: false
     }
 
     onVisibleChanged: {
+        if (checkList)
+            checkList.resetItems()
         _notification.text = ""
         if (visible) {
             _mainMenu.hidden = true