feat: Shop Supplier Purchase Order get, filter, and add new.

2024-10-25 16:42:13 +01:00
parent 7b6266e2f6
commit 437e094776
125 changed files with 3913 additions and 966 deletions
--- a/static/js/components/common/inputs/textarea.js
+++ b/static/js/components/common/inputs/textarea.js
@@ -1,4 +1,5 @@

+import Common from "../../../lib/common.js";
 import Validation from "../../../lib/validation.js";

 export default class TextArea {
@@ -27,15 +28,15 @@ export default class TextArea {
        elTextarea.style.removeProperty('height');
        textarea.getAttribute('rows', 1);

-        const paddingTop = parseCSSPropertyToFloat(textarea, 'padding-top');
-        const paddingBottom= parseCSSPropertyToFloat(textarea, 'padding-bottom');
-        const borderTop = parseCSSPropertyToFloat(textarea, 'border-top');
-        const borderBottom = parseCSSPropertyToFloat(textarea, 'border-bottom');
+        const paddingTop = Common.parseFloatWithDefault(textarea.style.paddingTop);
+        const paddingBottom = Common.parseFloatWithDefault(textarea.style.paddingBottom);
+        const borderTop = Common.parseFloatWithDefault(textarea.style.borderTop);
+        const borderBottom = Common.parseFloatWithDefault(textarea.style.borderBottom);
        let heightDelta = paddingTop + paddingBottom + borderTop + borderBottom;
        let heightNew = elTextarea.scrollHeight + heightDelta;

        // If new height is less than 1 linem default to single line height
-        const heightSingleLine = parseCSSPropertyToFloat(textarea, 'line-height') + heightDelta;
+        const heightSingleLine = Common.parseFloatWithDefault(textarea.style.heightSingleLine) + heightDelta;
        if (heightNew < heightSingleLine) heightNew = heightSingleLine;

        elTextarea.style.height = heightNew + 'px';
--- a/static/js/dom.js
+++ b/static/js/dom.js
@@ -37,9 +37,20 @@ export default class DOM {
    static getCellFromElement(element) {
        return element.closest('td');
    }
-    static getRowFromElement(element) {
-        return element.closest('tr');
+    static getRowFromElement(element, flagRow) {
+        let selector = Validation.isEmpty(flagRow) ? 'tr' : 'tr.' + flagRow;
+        return element.closest(selector);
    }
+    static getClosestParent(element, selector) {
+        let parent = element.parentElement;
+        while (parent) {
+            if (parent.matches(selector)) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+      }
    static convertForm2JSON(elementForm) {
        let dataForm = {};
        if (Validation.isEmpty(elementForm)) {
--- a/static/js/lib/business_objects/business_objects.js
+++ b/static/js/lib/business_objects/business_objects.js
@@ -21,4 +21,7 @@ export default class BusinessObjects {
        };
    }
    */
+    static getObjectText(objectJson) {
+        return objectJson[objectJson[flagNameAttrOptionText]];
+    }
 }
--- a/static/js/lib/business_objects/store/product_permutation.js
+++ b/static/js/lib/business_objects/store/product_permutation.js
@@ -0,0 +1,34 @@
+
+
+export default class ProductPermutation {
+    static getProductVariationsFromIdCsv(csvVariations) {
+        let productVariations = [];
+        if (!csvVariations) return productVariations;
+        let variationPairs = csvVariations.split(',');
+        if (variationPairs.length == 0) return productVariations;
+        let parts;
+        variationPairs.forEach((variationPair) => {
+            parts = variationPair.split(':');
+            if (parts.length == 2) {
+                let productVariationType = productVariationTypes[parts[0]];
+                let productVariation = productVariations[parts[1]];
+                if (productVariationType && productVariation) {
+                    productVariations.push([productVariationType, productVariation]);
+                }
+            }
+        });
+        return productVariations;
+    }
+    static getProductVariationsPreviewFromIdCsv(csvVariations) {
+        let variations = ProductPermutation.getProductVariationsFromIdCsv(csvVariations);
+        let preview = '';
+        if (variations.length == 0) return preview;
+        variations.forEach((variation) => {
+            if (preview.length > 0) {
+                preview += '\n';
+            }
+            preview += variation[0] + ': ' + variation[1] + ', ';
+        });
+        return preview;
+    }
+}
--- a/static/js/lib/common.js
+++ b/static/js/lib/common.js
@@ -2,50 +2,11 @@
 import Validation from "./validation.js";

 export default class Common {
-    static parseCSSPropertyToFloat(element, propertyName) {
-        var propertyText = element.css(propertyName);
-
-        if (!Validation.isEmpty(propertyText)) {
-
-            propertyText = propertyText.replace('px', '');
-
-            if (!Validation.isValidNumber(propertyText, true)) return parseFloat(propertyText);
-        }
-
-        return 0.00;
-    }
-
-    static setPageToLoading(isLoading) {
-
-        if (isLoading) {
-            document.querySelectorAll(document.body).classList.add(_dataLoadingFlag);
-        }
-        else {
-            document.querySelectorAll(document.body).classList.remove(_dataLoadingFlag);
-        }
-    }
-
-    static setBackgroundToLoading(elId, isLoading) {
-
-        if (Validation.isEmpty(el)) {
-
-            var elObj = document.querySelectorAll(elId);
-
-            if (isLoading) {
-
-                setTimeout(function() {
-                    elObj.innerHTML = "";
-                    elObj.css({
-                        "background-image": "url(" + urlImgLoading + ")",
-                        "background-position": "center",
-                        "background-repeat": "no-repeat"
-                    });
-                }, 0);
-            }
-            else {
-                elObj.css("background-image", "");
-            }
+    static parseFloatWithDefault(value, defaultValue = 0.00) {
+        if (!Validation.isEmpty(value) && Validation.isValidNumber(value, true)) {
+            return parseFloat(value);
        }
+        return defaultValue;
    }

    static allowClick() {
--- a/static/js/lib/validation.js
+++ b/static/js/lib/validation.js
@@ -151,13 +151,4 @@ export default class Validation {
        img.onerror = function() { callback(false); };
        img.src = url;
    }
-
-    static validateImageUrl(id, img) {
-        Validation.imageExists(img, function(exists) {
-            if (exists) {
-                document.querySelectorAll("#" + id).css({ "background-image": "url(" + url + ")", "background-size": "35px 35px"})
-            }
-        })
-    }
-
 }
--- a/static/js/pages/base.js
+++ b/static/js/pages/base.js
@@ -1,5 +1,5 @@

-import BusinessObjects from "../lib/business_objects.js";
+import BusinessObjects from "../lib/business_objects/business_objects.js";
 import Events from "../lib/events.js";
 import LocalStorage from "../lib/local_storage.js";
 import API from "../api.js";
@@ -179,7 +179,7 @@ export default class BasePage {
        Events.initialiseEventHandler(idOverlay, flagInitialised, (overlay) => {
            overlay.querySelector('button.' + flagCancel).addEventListener("click", (event) => {
                event.stopPropagation();
-                overlay.css('display', 'none');
+                overlay.style.display = 'none';
            });
        });
    }
@@ -222,9 +222,11 @@ export default class BasePage {
        if (show) {
            buttonCancel.classList.remove(flagCollapsed);
            buttonSave.classList.remove(flagCollapsed);
+            console.log('showing buttons');
        } else {
            buttonCancel.classList.add(flagCollapsed);
            buttonSave.classList.add(flagCollapsed);
+            console.log('hiding buttons');
        }
    }

--- a/static/js/pages/base_table.js
+++ b/static/js/pages/base_table.js
@@ -1,5 +1,5 @@

-import BusinessObjects from "../lib/business_objects.js";
+import BusinessObjects from "../lib/business_objects/business_objects.js";
 import Events from "../lib/events.js";
 import LocalStorage from "../lib/local_storage.js";
 import Validation from "../lib/validation.js";
@@ -113,7 +113,7 @@ export default class TableBasePage extends BasePage {
        return document.querySelector(idFormFilters);
    }
    callbackLoadTableContent(response) {
-        let table = this.getTableMain();
+        let table = TableBasePage.getTableMain();
        let bodyTable = table.querySelector('tbody');
        bodyTable.querySelectorAll('tr').forEach(function(row) { row.remove(); });
        let rowsJson = response.data[flagRows];
@@ -123,7 +123,7 @@ export default class TableBasePage extends BasePage {
        rowsJson.forEach(this.loadRowTable.bind(this));
        this.hookupTableMain();
    }
-    getTableMain() {
+    static getTableMain() {
        return document.querySelector(idTableMain);
    }
    loadRowTable(rowJson) {
@@ -168,7 +168,7 @@ export default class TableBasePage extends BasePage {
            .catch(error => console.error('Error:', error));
    }
    getTableRecords(dirtyOnly = false) {
-        // let table = this.getTableMain();
+        // let table = TableBasePage.getTableMain();
        let records = [];
        let record;
        document.querySelectorAll(idTableMain + ' > tbody > tr').forEach((row) => {
@@ -276,13 +276,13 @@ export default class TableBasePage extends BasePage {
            *
            sliderDisplayOrder.addEventListener('change', (event) => {
                console.log("slider change event");
-                this.handleChangeElementCellTable(sliderDisplayOrder);
+                this.handleChangeNestedElementCellTable(sliderDisplayOrder);
            });
        });
        */
        this.hookupChangeHandlerTableCells(selectorDisplayOrder);
    }
-    hookupChangeHandlerTableCells(inputSelector, handler = (event, element) => { this.handleChangeElementCellTable(event, element); }) {
+    hookupChangeHandlerTableCells(inputSelector, handler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
        Events.initialiseEventHandler(inputSelector, flagInitialised, (input) => {
            input.addEventListener("change", (event) => {
                handler(event, input);
@@ -291,6 +291,7 @@ export default class TableBasePage extends BasePage {
        });
        // this.hookupEventHandler("change", inputSelector, handler);
    }
+    /*
    handleChangeElementCellTable(event, element) {
        let row = DOM.getRowFromElement(element);
        let td = DOM.getCellFromElement(element);
@@ -308,8 +309,103 @@ export default class TableBasePage extends BasePage {
            }
        }
    }
+    handleChangeElementNestedCellTable(event, element, flagColumnList = [], orderNesting = 1) {
+        let orderNestingTemp = orderNesting;
+        let row, td, nestedRowSelector;
+        while (orderNestingTemp > 0) {
+            nestedRowSelector = idTableMain;
+            for (let indexOrderNesting = 0; indexOrderNesting < orderNestingTemp; indexOrderNesting++) {
+                nestedRowSelector += ' tbody tr';
+            }
+            row = DOM.getClosestParent(element, nestedRowSelector);
+            td = row.querySelector('td.' + flag);
+        }
+        let row = DOM.getRowFromElement(element);
+        let td = DOM.getCellFromElement(element);
+        let wasDirtyRow = DOM.hasDirtyChildrenNotDeletedContainer(row);
+        let wasDirtyElement = element.classList.contains(flagDirty);
+        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
+        if (isDirtyElement != wasDirtyElement) {
+            DOM.handleDirtyElement(td, isDirtyElement);
+            let isNowDirtyRow = DOM.hasDirtyChildrenNotDeletedContainer(row);
+            if (isNowDirtyRow != wasDirtyRow) {
+                DOM.handleDirtyElement(row, isNowDirtyRow);
+                let rows = this.getTableRecords(true);
+                let existsDirtyRecord = rows.length > 0;
+                this.toggleShowButtonsSaveCancel(existsDirtyRecord);
+            }
+        }
+    }
+    handleChangeElementSubtableCell(event, element, flagFieldSubtable) {
+        let rowSubtable = element.closest(idTableMain + ' td.' + flagFieldSubtable + ' tbody tr');
+        let rowTable = rowSubtable.closest(idTableMain + ' > tbody > tr');
+        let td = DOM.getCellFromElement(element);
+        // let tdSubtable = td.closest('td.' + flagFieldSubtable);
+        let wasDirtyRowSubtable = DOM.hasDirtyChildrenNotDeletedContainer(rowSubtable);
+        let wasDirtyRowTable = DOM.hasDirtyChildrenNotDeletedContainer(rowTable);
+        let wasDirtyElement = element.classList.contains(flagDirty);
+        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
+        console.log({isDirtyElement, wasDirtyElement});
+        if (isDirtyElement != wasDirtyElement) {
+            DOM.handleDirtyElement(td, isDirtyElement);
+            let isNowDirtyRowSubtable = DOM.hasDirtyChildrenNotDeletedContainer(rowSubtable);
+            console.log({isNowDirtyRowSubtable, wasDirtyRowSubtable});
+            if (isNowDirtyRowSubtable != wasDirtyRowSubtable) {
+                DOM.handleDirtyElement(rowSubtable, isNowDirtyRowSubtable);
+                let isNowDirtyRowTable = DOM.hasDirtyChildrenNotDeletedContainer(rowTable);
+                console.log({isNowDirtyRowTable, wasDirtyRowTable});
+                if (isNowDirtyRowTable != wasDirtyRowTable) {
+                    DOM.handleDirtyElement(rowTable, isNowDirtyRowTable);
+                    let rows = this.getTableRecords(true);
+                    let existsDirtyRecord = rows.length > 0;
+                    this.toggleShowButtonsSaveCancel(existsDirtyRecord);
+                }
+            }
+        }
+    }
+    */
+    handleChangeNestedElementCellTable(event, element) {
+        let wasDirtyParentRows = this.getAllIsDirtyRowsInParentTree(element);
+        let wasDirtyElement = element.classList.contains(flagDirty);
+        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
+        console.log({isDirtyElement, wasDirtyElement, wasDirtyParentRows});
+        if (isDirtyElement != wasDirtyElement) {
+            let td = DOM.getCellFromElement(element);
+            DOM.setElementAttributeValueCurrent(td, DOM.getElementValueCurrent(element));
+            this.toggleShowButtonsSaveCancel(isDirtyElement);
+            this.cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows);
+        }
+    }
+    getAllIsDirtyRowsInParentTree(element) {
+        let rows = [];
+        let parent = element;
+        let isDirty;
+        while (parent) {
+            if (parent.matches('tr')) {
+                isDirty = parent.classList.contains(flagDirty)
+                rows.push(isDirty);
+            }
+            parent = parent.parentElement;
+        }
+        return rows;
+    }
+    cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows) {
+        if (Validation.isEmpty(wasDirtyParentRows)) return;
+        let td = DOM.getCellFromElement(element);
+        let isDirtyTd = isDirtyElement || DOM.hasDirtyChildrenNotDeletedContainer(tr);
+        DOM.handleDirtyElement(td, isDirtyTd);
+        let tr = DOM.getRowFromElement(td);
+        let isDirtyRow = isDirtyTd || DOM.hasDirtyChildrenNotDeletedContainer(tr);
+        let wasDirtyRow = wasDirtyParentRows.pop();
+        console.log({isDirtyRow, wasDirtyRow});
+        if (isDirtyRow != wasDirtyRow) {
+            DOM.handleDirtyElement(tr, isDirtyRow);
+            this.toggleShowButtonsSaveCancel(isDirtyRow);
+            this.cascadeChangedIsDirtyNestedElementCellTable(tr.parentElement, isDirtyRow, wasDirtyParentRows);
+        }
+    }
    hookupChangeHandlerTableCellsWhenNotCollapsed(inputSelector, handler = (event, element) => {
-        if (!element.classList.contains(flagCollapsed)) this.handleChangeElementCellTable(event, element);
+        if (!element.classList.contains(flagCollapsed)) this.handleChangeNestedElementCellTable(event, element);
    }) {
        this.hookupEventHandler("change", inputSelector, handler);
    }
@@ -355,7 +451,7 @@ export default class TableBasePage extends BasePage {
        return false;
    }
    handleDragSliderEnd(event) {
-        let table = this.getTableMain();
+        let table = TableBasePage.getTableMain();
        let rows = table.querySelectorAll('tr');
        rows.forEach(row => {
            row.classList.remove(flagDragOver);
@@ -381,33 +477,79 @@ export default class TableBasePage extends BasePage {
        this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagDescription + ' textarea');
    }
    hookupInputsActiveTable() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagActive + ' input[type="checkbox"]');
+        this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagActive + ' input[type="checkbox"]');
+    }
+    hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete) {
+        this.hookupEventHandler("click", selectorButtonDelete, (event, element) => {
+            this.handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete);
+        });
+    }
+    handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete) {
+        let row = DOM.getRowFromElement(element);
+        row.classList.add(flagDelete);
+
+        let buttonAdd = document.createElement("button");
+        buttonAdd.classList.add(flagAdd);
+        buttonAdd.textContent = '+';
+        element.replaceWith(buttonAdd);
+        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
+    }
+    hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete) {
+        this.hookupEventHandler("click", selectorButtonUndelete, (event, element) => {
+            this.handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete);
+        });
+    }
+    handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete) {
+        let row = DOM.getRowFromElement(element);
+        row.classList.add(flagDelete);
+
+        let buttonAdd = document.createElement("button");
+        buttonAdd.classList.add(flagAdd);
+        buttonAdd.textContent = '+';
+        element.replaceWith(buttonAdd);
+        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
    }
    hookupTdsAccessLevel() {
        let cellSelector = idTableMain + ' tbody td.' + flagAccessLevel;
        this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(accessLevels));
    }
-    hookupTableCellDdlPreviews(cellSelector, optionList, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
+    hookupTableCellDdlPreviews(
+        cellSelector
+        , optionList
+        , ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }
+        , changeHandler = (event, element) => { this.handleChangeTableCellDdl(event, element); }
+    ) {
        this.hookupEventHandler("click", cellSelector, (event, td) => {
            // if (td.querySelector('select')) return;
-            this.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
+            this.handleClickTableCellDdlPreview(
+                event
+                , td
+                , optionList
+                , cellSelector
+                , (cellSelector) => { ddlHookup(
+                    cellSelector
+                    , (event, element) => { changeHandler(event, element); }
+                ); }
+            );
        });
    }
-    hookupTableCellDdls(ddlSelector) {
-        this.hookupEventHandler("change", ddlSelector, (event, element) => { this.handleChangeTableCellDdl(event, element); });
+    hookupTableCellDdls(ddlSelector, changeHandler = (event, element) => { this.handleChangeTableCellDdl(event, element); }) {
+        this.hookupEventHandler("change", ddlSelector, (event, element) => { changeHandler(event, element); });
    }
-    handleClickTableCellDdlPreview(event, td, optionObjectList, cellSelector, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
+    handleClickTableCellDdlPreview(event, td, optionObjectList, cellSelector, ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }) {
        if (td.querySelector('select')) return;
        // td.removeEventListener("click", ddlHookup);
        console.log("click table cell ddl preview");
        let tdNew = td.cloneNode(true);
        td.parentNode.replaceChild(tdNew, td);
-        let idSelected = tdNew.getAttribute(attrValueCurrent);
+        let idSelected = DOM.getElementAttributeValueCurrent(tdNew);
        tdNew.innerHTML = '';
        let ddl = document.createElement('select');
-        DOM.setElementValuesCurrentAndPrevious(ddl, DOM.getElementAttributeValueCurrent(tdNew));
+        DOM.setElementValuesCurrentAndPrevious(ddl, idSelected);
        let optionJson, option;
        console.log({optionObjectList, cellSelector});
+        option = DOM.createOption(null);
+        ddl.appendChild(option);
        optionObjectList.forEach((optionObjectJson) => {
            optionJson = BusinessObjects.getOptionJsonFromObjectJson(optionObjectJson, idSelected);
            option = DOM.createOption(optionJson);
@@ -450,14 +592,43 @@ export default class TableBasePage extends BasePage {
            this.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
        });
    }
-    hookupProductPermutationVariationFields() {
+    hookupProductCategoryDdls(ddlSelector) {
+        this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeProductCategoryDdl(event, element); });
+    }
+    handleChangeProductCategoryDdl(event, ddlCategory) {
+        this.handleChangeTableCellDdl(event, ddlCategory);
+        let idProductCategorySelected = DOM.getElementValueCurrent(ddlCategory);
+        let row = DOM.getRowFromElement(ddlCategory);
+        let tdProduct = row.querySelector('td.' + flagProduct);
+        tdProduct.dispatchEvent(new Event('click'));
+        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+        ddlProduct.innerHTML = '';
+        ddlProduct.appendChild(DOM.createOption(null));
+        let optionJson, option;
+        Utils.getListFromDict(products).forEach((product) => {
+            if (idProductCategorySelected != '0' && product[attrIdProductCategory] != idProductCategorySelected) return;
+            optionJson = BusinessObjects.getOptionJsonFromObjectJson(product);
+            option = DOM.createOption(optionJson);
+            ddlProduct.appendChild(option);
+        });
+        this.handleChangeTableCellDdl(event, ddlProduct);
+    }
+    hookupFieldsProductPermutationVariation() {
+        this.hookupPreviewsProductPermutationVariation();
+        this.hookupDdlsProductPermutationVariation();
+        this.hookupDdlsProductPermutationVariationType();
+        this.hookupButtonsProductPermutationVariationAddDelete(); 
+    }
+    hookupPreviewsProductPermutationVariation() {
        this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations, (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
    }
    handleClickProductPermutationVariationsPreview(event, element) {
+        let tblVariations = element.querySelector('table.' + flagProductVariations);
+        if (!Validation.isEmpty(tblVariations)) return;
        console.log("click product permutation variations preview");
        this.toggleColumnCollapsed(flagProductVariations, false);
        let permutationVariations = this.getElementProductVariations(element);
-        let tblVariations = document.createElement("table");
+        tblVariations = document.createElement("table");
        tblVariations.classList.add(flagProductVariations);
        let thead = document.createElement("thead");
        let tr = document.createElement("tr");
@@ -480,10 +651,7 @@ export default class TableBasePage extends BasePage {
        tblVariations.appendChild(thead);
        let tbody = document.createElement("tbody");
        console.log('variations:', permutationVariations);
-        if (Validation.isEmpty(permutationVariations)) {
-            permutationVariations = [PageStoreProductPermutations.createOptionUnselectedProductVariation()];
-        }
-        else {
+        if (!Validation.isEmpty(permutationVariations)) {
            permutationVariations.forEach((permutationVariation, index) => {
                this.addProductPermutationVariationRow(tbody, permutationVariation);
            });
@@ -494,10 +662,8 @@ export default class TableBasePage extends BasePage {
        cellParent.innerHTML = '';
        cellParent.appendChild(tblVariations);
        console.log("tblVariations: ", tblVariations);
-        let selectorButtonAdd = idTableMain + ' td.' + flagProductVariations + ' button.' + flagAdd;
-        this.hookupEventHandler("click", selectorButtonAdd, this.handleClickButtonProductPermutationVariationsAdd);
-        let selectorButtonDelete = idTableMain + ' td.' + flagProductVariations + ' button.' + flagDelete;
-        this.hookupEventHandler("click", selectorButtonDelete, this.handleClickButtonProductPermutationVariationsDelete);
+        
+        this.hookupFieldsProductPermutationVariation();
    }
    toggleColumnCollapsed(flagColumn, isCollapsed) {
        this.toggleColumnHasClassnameFlag(flagColumn, isCollapsed, flagCollapsed);
@@ -555,6 +721,19 @@ export default class TableBasePage extends BasePage {
        let productVariationKeys = Object.keys(productVariations);
        let productVariationTypeKeys = Object.keys(productVariationTypes);
        
+        let ddlsProductVariationType = tbody.querySelectorAll('select.' + flagProductVariationType);
+        let productVariationTypeKeysSelected = new Set();
+        let valueSelected;
+        let doFilterProductVariationKeys = permutationVariation[attrIdProductVariationType] != 0;
+        ddlsProductVariationType.forEach((ddlProductVariationType) => {
+            valueSelected = DOM.getElementValueCurrent(ddlProductVariationType);
+            productVariationTypeKeysSelected.add(valueSelected);
+        });
+        productVariationTypeKeys = productVariationTypeKeys.filter(typeKey => !productVariationTypeKeysSelected.has(typeKey));
+        if (productVariationTypeKeys.length == 0) return;
+        if (doFilterProductVariationKeys) {
+            productVariationKeys = productVariationKeys.filter(variationKey => !productVariationTypeKeysSelected.has(productVariations[variationKey][attrIdProductVariationType]));
+        }
        console.log("permutationVariation: ", permutationVariation);
        let permutationVariationJson = permutationVariation[flagProductVariation];
        let permutationVariationTypeJson = permutationVariation[flagProductVariationType];
@@ -612,6 +791,7 @@ export default class TableBasePage extends BasePage {
        buttonDelete.textContent = 'x';

        let tr = document.createElement("tr");
+        tr.classList.add(flagProductVariation);
        tdVariationType.appendChild(ddlVariationType);
        tr.appendChild(tdVariationType);
        tdVariation.appendChild(ddlVariation);
@@ -620,13 +800,39 @@ export default class TableBasePage extends BasePage {
        tr.appendChild(tdDelete);
        tbody.appendChild(tr);
    }
-    handleClickButtonProductPermutationVariationsDelete(event, element) {
-        let row = getRowFromElement(element);
-        let variationsCell = row.closest('td.' + flagProductVariations);
-        row.remove();
-        this.updateProductPermutationVariations(variationsCell);
+    hookupDdlsProductPermutationVariation() {
+        this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariation);
    }
-    updateProductPermutationVariations(variationsCell) {
+    hookupDdlsProductPermutationVariationType() {
+        this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariationType);
+    }
+    hookupButtonsProductPermutationVariationAddDelete() {
+        let selectorButton = idTableMain + ' td.' + flagProductVariations + ' tr.' + flagProductVariation + ' button';
+        let selectorButtonDelete = selectorButton + '.' + flagDelete;
+        let selectorButtonUndelete = selectorButton + '.' + flagAdd;
+        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete, (event, element) => {
+            this.handleClickButtonRowDelete(event, element);
+            this.updateProductPermutationVariations(element);
+        });
+        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsProductPermutationVariationAdd();
+    }
+    hookupButtonsProductPermutationVariationAdd() {
+        this.hookupEventHandler(
+            "click"
+            , idTableMain + ' td.' + flagProductVariations + ' button.' + flagAdd
+            , (event, element) => { this.handleClickButtonProductPermutationVariationAdd(event, element); }
+        );
+    }
+    handleClickButtonProductPermutationVariationAdd(event, element) {
+        let variationsCell = element.closest('td.' + flagProductVariations);
+        let tbody = variationsCell.querySelector('tbody');
+        let permutationVariation = TableBasePage.createOptionUnselectedProductVariation();
+        this.addProductPermutationVariationRow(tbody, permutationVariation);
+        this.hookupFieldsProductPermutationVariation();
+    }
+    updateProductPermutationVariations(element) {
+        let variationsCell = element.closest('td.' + flagProductVariations);
        let variationPairsString = this.getProductPermutationVariationsText(variationsCell);
        variationsCell.setAttribute(attrValueCurrent, variationPairsString);
        DOM.isElementDirty(variationsCell);
@@ -662,7 +868,7 @@ export default class TableBasePage extends BasePage {
    }

    toggleColumnHasClassnameFlag(columnFlag, isRequiredFlag, classnameFlag) {
-        let table = this.getTableMain();
+        let table = TableBasePage.getTableMain();
        let columnTh = table.querySelector('th.' + columnFlag);
        let columnThHasFlag = columnTh.classList.contains(classnameFlag);
        if (isRequiredFlag == columnThHasFlag) return;
@@ -673,7 +879,7 @@ export default class TableBasePage extends BasePage {
        });
    }
    toggleColumnHeaderHasClassnameFlag(columnFlag, isRequiredFlag, classnameFlag) {
-        let table = this.getTableMain();
+        let table = TableBasePage.getTableMain();
        let columnTh = table.querySelector('th.' + columnFlag);
        DOM.toggleElementHasClassnameFlag(columnTh, isRequiredFlag, classnameFlag);
    }
--- a/static/js/pages/store/manufacturing_purchase_orders.js
+++ b/static/js/pages/store/manufacturing_purchase_orders.js
@@ -1,6 +1,6 @@

 import API from "../../api.js";
-import BusinessObjects from "../../lib/business_objects.js";
+import BusinessObjects from "../../lib/business_objects/business_objects.js";
 import DOM from "../../dom.js";
 import Events from "../../lib/events.js";
 import TableBasePage from "../base_table.js";
@@ -8,11 +8,11 @@ import Utils from "../../lib/utils.js";
 import Validation from "../../lib/validation.js";
 import StoreTableMixinPage from "./mixin_table.js";

-export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
-    static hash = hashPageStoreSupplierPurchaseOrders;
-    static attrIdRowObject = attrIdSupplierPurchaseOrder;
-    callFilterTableContent = API.getSupplierPurchaseOrdersByFilters;
-    callSaveTableContent = API.saveSupplierPurchaseOrders;
+export default class PageStoreManufacturingPurchaseOrders extends TableBasePage {
+    static hash = hashPageStoreManufacturingPurchaseOrders;
+    static attrIdRowObject = attrIdManufacturingPurchaseOrder;
+    callFilterTableContent = API.getManufacturingPurchaseOrdersByFilters;
+    callSaveTableContent = API.saveManufacturingPurchaseOrders;

    constructor(router) {
        super(router);
@@ -37,20 +37,53 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
        let inputCostTotalLocalVatIncl = row.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
        let inputPriceTotalLocalVatExcl = row.querySelector('td.' + flagPriceTotalLocalVatExcl + ' input');
        let inputPriceTotalLocalVatIncl = row.querySelector('td.' + flagPriceTotalLocalVatIncl + ' input');
-        let tdItems = row.querySelector('td.' + flagItems);
+        let tdItems = row.querySelector('td.' + flagOrderItems);
        let checkboxActive = row.querySelector('td.' + flagActive + ' textarea');

        let jsonRow = {};
-        jsonRow[attrIdSupplierPurchaseOrder] = row.getAttribute(attrIdSupplierPurchaseOrder);
+        jsonRow[attrIdManufacturingPurchaseOrder] = row.getAttribute(attrIdManufacturingPurchaseOrder);
        jsonRow[attrIdCurrency] = DOM.getElementAttributeValueCurrent(tdCurrency);
        jsonRow[flagCostTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatExcl);
        jsonRow[flagCostTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatIncl);
        jsonRow[flagPriceTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputPriceTotalLocalVatExcl);
        jsonRow[flagPriceTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputPriceTotalLocalVatIncl);
-        jsonRow[flagItems] = DOM.getElementAttributeValueCurrent(tdItems);
+        // jsonRow[flagOrderItems] = DOM.getElementAttributeValueCurrent(tdItems);
+        let orderItems = [];
+        trsPurchaseOrderItem.forEach((tr) => {
+            orderItems.push(this.getJsonRowOrderItem(tr));
+        });
+        jsonRow[flagOrderItems] = orderItems;
        jsonRow[flagActive] = DOM.getElementAttributeValueCurrent(checkboxActive);
        return jsonRow;
    }
+    getJsonRowOrderItem(tr) {
+        let inputDisplayOrder = tr.querySelector('td.' + flagDisplayOrder + ' input');
+        let tdCategory = tr.querySelector('td.' + flagProductCategory);
+        let tdProduct = tr.querySelector('td.' + flagProduct);
+        let tdVariations = tr.querySelector('td.' + flagProductVariations);
+        let tdUnitQuantity = tr.querySelector('td.' + flagUnitMeasurementQuantity);
+        let inputQuantityUsed = tr.querySelector('td.' + flagQuantityUsed + ' input');
+        let inputQuantityProduced = tr.querySelector('td.' + flagQuantityProduced + ' input');
+        let inputLatencyManufacture = tr.querySelector('td.' + flagLatencyManufacture + ' input');
+        let checkboxActive = tr.querySelector('td.' + flagActive + ' input');
+
+        let jsonRow = {};
+        jsonRow[attrIdManufacturingPurchaseOrder] = tr.getAttribute(attrIdManufacturingPurchaseOrder);
+        jsonRow[attrIdManufacturingPurchaseOrderProductLink] = tr.getAttribute(attrIdManufacturingPurchaseOrderProductLink);
+        jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
+        jsonRow[attrIdProductCategory] = DOM.getElementAttributeValueCurrent(tdCategory);
+        jsonRow[attrIdProduct] = DOM.getElementAttributeValueCurrent(tdProduct);
+        jsonRow[flagProductVariations] = DOM.getElementAttributeValueCurrent(tdVariations);
+        jsonRow[attrIdUnitMeasurementQuantity] = DOM.getElementAttributeValueCurrent(tdUnitQuantity);
+        jsonRow[flagQuantityUsed] = DOM.getElementAttributeValueCurrent(inputQuantityUsed);
+        jsonRow[flagQuantityProduced] = DOM.getElementAttributeValueCurrent(inputQuantityProduced);
+        jsonRow[flagCostTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatExcl);
+        jsonRow[flagCostTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatIncl);
+        jsonRow[flagLatencyManufacture] = DOM.getElementAttributeValueCurrent(inputLatencyManufacture);
+        jsonRow[flagActive] = DOM.getElementAttributeValueCurrent(checkboxActive);
+
+        return jsonRow;
+    }
    initialiseRowNew(row) {
        super.initialiseRowNew(row);
    }
@@ -60,7 +93,7 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
        this.hookupCurrencyFields();
        this.hookupCostInputs();
        this.hookupOrderItemsFields();
-        this.hookupActiveCheckboxes();
+        this.hookupInputsActiveTable();
    }
    hookupCostInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostTotalLocalVatExcl + ' input');
@@ -69,10 +102,390 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagPriceTotalLocalVatIncl + ' input');
    }
    hookupOrderItemsFields() {
-        
+        this.hookupOrderItemsPreviews();
+        this.hookupFieldsOrderItemDisplayOrder();
+        this.hookupFieldsOrderItemProductCategory();
+        this.hookupFieldsOrderItemProduct();
+        this.hookupFieldsOrderItemProductVariations();
+        this.hookupFieldsOrderItemUnitQuantity();
+        this.hookupFieldsOrderItemQuantityUsed();
+        this.hookupFieldsOrderItemQuantityProduced();
+        this.hookupFieldsOrderItemCostTotalLocalVatExcl();
+        this.hookupFieldsOrderItemCostTotalLocalVatIncl();
+        this.hookupFieldsOrderItemLatencyManufacture();
+        this.hookupFieldsOrderItemActive();
+        this.hookupFieldsOrderItemAddDelete();
+        this.hookupButtonsOrderItemAdd();
    }
-    hookupActiveCheckboxes(){
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagActive + ' input');
+    hookupOrderItemsPreviews() {
+        this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems, (event, td) => {
+            if (!td.classList.contains(flagCollapsed)) return;
+            this.handleClickOrderItemsPreview(event, td);
+        });
+    }
+    handleClickOrderItemsPreview(event, element) {
+        console.log("click order items preview");
+        this.toggleColumnHeaderCollapsed(flagOrderItems, false);
+        element.classList.remove(flagCollapsed);
+
+        let row = DOM.getRowFromElement(element);
+        let idManufacturingPurchaseOrder = row.getAttribute(attrIdManufacturingPurchaseOrder);
+        let manufacturingPurchaseOrderProductLinksList = idManufacturingPurchaseOrder > 0 ? manufacturingPurchaseOrderProductLinks[idManufacturingPurchaseOrder] : [];
+        let tblOrderItems = document.createElement("table");
+        tblOrderItems.classList.add(flagOrderItems);
+        let thead = document.createElement("thead");
+        let tr = document.createElement("tr");
+        
+        let thDisplayOrder = document.createElement("th");
+        thDisplayOrder.classList.add(flagDisplayOrder);
+        thDisplayOrder.textContent = 'Display Order';
+        let thCategory = document.createElement("th");
+        thCategory.classList.add(flagProductCategory);
+        thCategory.textContent = 'Category';
+        let thProduct = document.createElement("th");
+        thProduct.classList.add(flagProduct);
+        thProduct.textContent = 'Product';
+        let thVariations = document.createElement("th");
+        thVariations.classList.add(flagProductVariations);
+        thVariations.classList.add(flagCollapsed);
+        thVariations.textContent = 'Variations';
+        let thUnitQuantity = document.createElement("th");
+        thUnitQuantity.classList.add(flagUnitMeasurementQuantity);
+        thUnitQuantity.textContent = 'Unit Quantity';
+        let thQuantityUsed = document.createElement("th");
+        thQuantityUsed.classList.add(flagQuantityUsed);
+        thQuantityUsed.textContent = 'Quantity Ordered';
+        let thQuantityProduced = document.createElement("th");
+        thQuantityProduced.classList.add(flagQuantityProduced);
+        thQuantityProduced.textContent = 'Quantity Received';
+        let thCostTotalLocalVatExcl = document.createElement("th");
+        thCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
+        thCostTotalLocalVatExcl.textContent = 'Cost Total Local VAT Excl';
+        let thCostTotalLocalVatIncl = document.createElement("th");
+        thCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
+        thCostTotalLocalVatIncl.textContent = 'Cost Total Local VAT Incl';
+        let thCostUnitLocalVatExcl = document.createElement("th");
+        thCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
+        thCostUnitLocalVatExcl.textContent = 'Cost Unit Local VAT Excl';
+        let thCostUnitLocalVatIncl = document.createElement("th");
+        thCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
+        thCostUnitLocalVatIncl.textContent = 'Cost Unit Local VAT Incl';
+        let thLatencyManufacture = document.createElement("th");
+        thLatencyManufacture.classList.add(flagLatencyManufacture);
+        thLatencyManufacture.textContent = 'Latency Delivery (Days)';
+        let thActive = document.createElement("th");
+        thActive.classList.add(flagActive);
+        thActive.textContent = 'Active';
+        let thAddDelete = document.createElement("th");
+        thAddDelete.classList.add(flagAdd);
+        let buttonAdd = document.createElement("button");
+        buttonAdd.classList.add(flagAdd);
+        buttonAdd.textContent = '+';
+        thAddDelete.appendChild(buttonAdd);
+
+        tr.appendChild(thDisplayOrder);
+        tr.appendChild(thCategory);
+        tr.appendChild(thProduct);
+        tr.appendChild(thVariations);
+        tr.appendChild(thUnitQuantity);
+        tr.appendChild(thQuantityUsed);
+        tr.appendChild(thQuantityProduced);
+        tr.appendChild(thCostTotalLocalVatExcl);
+        tr.appendChild(thCostTotalLocalVatIncl);
+        tr.appendChild(thCostUnitLocalVatExcl);
+        tr.appendChild(thCostUnitLocalVatIncl);
+        tr.appendChild(thLatencyManufacture);
+        tr.appendChild(thActive);
+        tr.appendChild(thAddDelete);
+        thead.appendChild(tr);
+        tblOrderItems.appendChild(thead);
+
+        let tbody = document.createElement("tbody");
+        manufacturingPurchaseOrderProductLinksList.forEach((orderItem, index) => {
+            this.addRowManufacturingPurchaseOrderItem(tbody, orderItem);
+        });
+        tblOrderItems.appendChild(tbody);
+        
+        let cell = DOM.getCellFromElement(element);
+        let cellNew = cell.cloneNode(false);
+        cellNew.appendChild(tblOrderItems);
+        row.replaceChild(cellNew, cell);
+        console.log("tblOrderItems: ", tblOrderItems);
+        this.hookupOrderItemsFields();
+    }
+    addRowManufacturingPurchaseOrderItem(tbody, orderItem) { //  productVariationTypeOptions, productVariationOptions, productCategoryOptions, productOptions, unitMeasurementOptions, 
+        console.log("addRowManufacturingPurchaseOrderItem: ", orderItem);
+
+        let tdDisplayOrder = document.createElement("td");
+        tdDisplayOrder.classList.add(flagDisplayOrder);
+        let inputDisplayOrder = document.createElement("input");
+        inputDisplayOrder.classList.add(flagDisplayOrder);
+        inputDisplayOrder.type = 'number';
+        inputDisplayOrder.step = 1;
+        DOM.setElementValuesCurrentAndPrevious(inputDisplayOrder, orderItem[flagDisplayOrder]);
+        tdDisplayOrder.appendChild(inputDisplayOrder);
+
+        let tdCategory = document.createElement("td");
+        tdCategory.classList.add(flagProductCategory);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdCategory, orderItem[attrIdProductCategory]);
+        let divCategory = document.createElement("div");
+        divCategory.classList.add(flagProductCategory);
+        // DOM.setElementAttributesValuesCurrentAndPrevious(divCategory, orderItem[attrIdProductCategory]);
+        divCategory.textContent = orderItem[flagProductCategory];
+        tdCategory.appendChild(divCategory);
+
+        let tdProduct = document.createElement("td");
+        tdProduct.classList.add(flagProduct);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdProduct, orderItem[attrIdProductCategory]);
+        let divProduct = document.createElement("div");
+        divProduct.classList.add(flagProduct);
+        // DOM.setElementAttributesValuesCurrentAndPrevious(divProduct, orderItem[attrIdProduct]);
+        divProduct.textContent = orderItem[flagProduct];
+        tdProduct.appendChild(divProduct);
+
+        let tdVariations = document.createElement("td");
+        tdVariations.classList.add(flagProductVariations);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdVariations, orderItem[attrIdProductCategory]);
+        let divVariations = document.createElement("div");
+        divVariations.classList.add(flagProductVariations);
+        // DOM.setElementAttributesValuesCurrentAndPrevious(divVariations, orderItem[attrIdProductVariation]);
+        divVariations.textContent = orderItem[flagProductVariations];
+        tdVariations.appendChild(divVariations);
+
+        let tdUnitQuantity = document.createElement("td");
+        tdUnitQuantity.classList.add(flagUnitMeasurementQuantity);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdUnitQuantity, orderItem[attrIdProductCategory]);
+        let divUnitQuantity = document.createElement("div");
+        divUnitQuantity.classList.add(flagUnitMeasurementQuantity);
+        // DOM.setElementValuesCurrentAndPrevious(divUnitQuantity, orderItem[flagUnitMeasurementQuantity]);
+        tdUnitQuantity.appendChild(divUnitQuantity);
+
+        let tdQuantityUsed = document.createElement("td");
+        tdQuantityUsed.classList.add(flagQuantityUsed);
+        let inputQuantityUsed = document.createElement("input");
+        inputQuantityUsed.classList.add(flagQuantityUsed);
+        inputQuantityUsed.type = 'number';
+        DOM.setElementAttributesValuesCurrentAndPrevious(inputQuantityUsed, orderItem[flagQuantityUsed]);
+        tdQuantityUsed.appendChild(inputQuantityUsed);
+
+        let tdQuantityProduced = document.createElement("td");
+        tdQuantityProduced.classList.add(flagQuantityProduced);
+        let inputQuantityProduced = document.createElement("input");
+        inputQuantityProduced.classList.add(flagQuantityProduced);
+        inputQuantityProduced.type = 'number';
+        DOM.setElementAttributesValuesCurrentAndPrevious(inputQuantityProduced, orderItem[flagQuantityProduced]);
+        tdQuantityProduced.appendChild(inputQuantityProduced);
+
+        let tdCostTotalLocalVatExcl = document.createElement("td");
+        tdCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
+        let inputCostTotalLocalVatExcl = document.createElement("input");
+        inputCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
+        inputCostTotalLocalVatExcl.type = 'number';
+        inputCostTotalLocalVatExcl.step = 0.01;
+        DOM.setElementAttributesValuesCurrentAndPrevious(inputCostTotalLocalVatExcl, orderItem[flagCostTotalLocalVatExcl]);
+        tdCostTotalLocalVatExcl.appendChild(inputCostTotalLocalVatExcl);
+
+        let tdCostTotalLocalVatIncl = document.createElement("td");
+        tdCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
+        let inputCostTotalLocalVatIncl = document.createElement("input");
+        inputCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
+        inputCostTotalLocalVatIncl.type = 'number';
+        inputCostTotalLocalVatIncl.step = 0.01;
+        DOM.setElementAttributesValuesCurrentAndPrevious(inputCostTotalLocalVatIncl, orderItem[flagCostTotalLocalVatIncl]);
+        tdCostTotalLocalVatIncl.appendChild(inputCostTotalLocalVatIncl);
+
+        let tdCostUnitLocalVatExcl = document.createElement("td");
+        tdCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
+        let divCostUnitLocalVatExcl = document.createElement("div");
+        divCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
+        DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, orderItem[flagCostUnitLocalVatExcl]);
+        tdCostUnitLocalVatExcl.appendChild(divCostUnitLocalVatExcl);
+
+        let tdCostUnitLocalVatIncl = document.createElement("td");
+        tdCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
+        let divCostUnitLocalVatIncl = document.createElement("div");
+        divCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
+        DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, orderItem[flagCostUnitLocalVatIncl]);
+        tdCostUnitLocalVatIncl.appendChild(divCostUnitLocalVatIncl);
+
+        let tdLatencyManufacture = document.createElement("td");
+        tdLatencyManufacture.classList.add(flagLatencyManufacture);
+        let inputLatencyManufacture = document.createElement("input");
+        inputLatencyManufacture.classList.add(flagLatencyManufacture);
+        inputLatencyManufacture.type = 'number';
+        inputLatencyManufacture.step = 1;
+        DOM.setElementAttributesValuesCurrentAndPrevious(inputLatencyManufacture, orderItem[flagLatencyManufacture]);
+        tdLatencyManufacture.appendChild(inputLatencyManufacture);
+
+        let tdActive = document.createElement("td");
+        tdActive.classList.add(flagActive);
+        let checkboxActive = document.createElement("input");
+        checkboxActive.classList.add(flagActive);
+        checkboxActive.type = 'checkbox';
+        DOM.setElementValuesCurrentAndPrevious(checkboxActive, orderItem[flagActive]);
+        tdActive.appendChild(checkboxActive);
+
+        let tdDelete = document.createElement("td");
+        tdDelete.classList.add(flagDelete);
+        let buttonDelete = document.createElement("button");
+        buttonDelete.classList.add(flagDelete);
+        buttonDelete.textContent = 'x';
+        tdDelete.appendChild(buttonDelete);
+
+        let tr = document.createElement("tr");
+        tr.classList.add(flagOrderItems);
+        tr.setAttribute(attrIdManufacturingPurchaseOrder, orderItem[attrIdManufacturingPurchaseOrder]);
+        tr.setAttribute(attrIdManufacturingPurchaseOrderProductLink, orderItem[attrIdManufacturingPurchaseOrderProductLink]);
+        tr.appendChild(tdDisplayOrder);
+        tr.appendChild(tdCategory);
+        tr.appendChild(tdProduct);
+        tr.appendChild(tdVariations);
+        tr.appendChild(tdUnitQuantity);
+        tr.appendChild(tdQuantityUsed);
+        tr.appendChild(tdQuantityProduced);
+        tr.appendChild(tdCostTotalLocalVatExcl);
+        tr.appendChild(tdCostTotalLocalVatIncl);
+        tr.appendChild(tdCostUnitLocalVatExcl);
+        tr.appendChild(tdCostUnitLocalVatIncl);
+        tr.appendChild(tdLatencyManufacture);
+        tr.appendChild(tdActive);
+        tr.appendChild(tdDelete);
+        tbody.appendChild(tr);
+    }
+    hookupFieldsOrderItemDisplayOrder() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagDisplayOrder + ' input');
+    }
+    hookupFieldsOrderItemProductCategory() {
+        this.hookupTableCellDdlPreviews(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductCategory
+            , Utils.getListFromDict(productCategories)
+            , (cellSelector) => { this.hookupProductCategoryDdls(cellSelector); }
+        );
+    }
+    hookupFieldsOrderItemProduct() {
+        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagProduct, Utils.getListFromDict(products));
+    }
+    hookupFieldsOrderItemProductVariations() {
+        this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductVariations, (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
+    }
+    handleChangeElementProductVariationsSubtableCell(event, element) {
+        this.handleChangeNestedElementCellTable(event, element); // , flagProductVariations);
+    }
+    hookupFieldsOrderItemUnitQuantity() {
+        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagUnitMeasurementQuantity, Utils.getListFromDict(unitMeasurements));
+    }
+    hookupFieldsOrderItemQuantityUsed() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityUsed + ' input');
+    }
+    hookupFieldsOrderItemQuantityProduced() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityProduced + ' input');
+    }
+    hookupFieldsOrderItemPriceTotalLocalVatExcl() {
+        this.hookupChangeHandlerTableCells(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatExcl + ' input'
+            , (event, element) => { 
+                this.handleChangeNestedElementCellTable(event, element);
+                this.updateFieldsPriceUnitLocalVatExcl(element);
+            }
+        );
+    }
+    hookupFieldsOrderItemPriceTotalLocalVatIncl() {
+        this.hookupChangeHandlerTableCells(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatIncl + ' input' 
+            , (event, element) => { 
+                this.handleChangeNestedElementCellTable(event, element);
+                this.updateFieldsPriceUnitLocalVatIncl(element);
+            }
+        );
+    }
+    updateFieldsPriceUnitLocalVatExcl(elementChanged) {
+        let row = elementChanged.closest('tr.' + flagOrderItems);
+        let inputPriceTotalLocalVatExcl = row.querySelector('td.' + flagPriceTotalLocalVatExcl + ' input');
+        let priceTotalLocalVatExcl = DOM.getElementValueCurrent(inputPriceTotalLocalVatExcl);
+        let inputQuantityUsed = row.querySelector('td.' + flagQuantityUsed + ' input');
+        let quantityUsed = DOM.getElementValueCurrent(inputQuantityUsed);
+
+        let divPriceUnitLocalVatExcl = row.querySelector('td.' + flagPriceUnitLocalVatExcl + ' div');
+        let priceUnitLocalVatExcl = quantityUsed == 0 ? 0 : priceTotalLocalVatExcl / quantityUsed;
+        DOM.setElementValuesCurrentAndPrevious(divPriceUnitLocalVatExcl, priceUnitLocalVatExcl);
+
+        let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
+        let divPriceGrandTotalLocalVatExcl = rowManufacturingPurchaseOrder.querySelector('td.' + flagPriceTotalLocalVatExcl + ' div');
+        let inputsPriceTotalLocalVatExcl = rowManufacturingPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatExcl + ' input');
+        let priceGrandTotalLocalVatExcl = Array.from(inputsPriceTotalLocalVatExcl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
+        DOM.setElementValueCurrent(divPriceGrandTotalLocalVatExcl, priceGrandTotalLocalVatExcl);
+    }
+    updateFieldsPriceUnitLocalVatIncl(elementChanged) {
+        let row = elementChanged.closest('tr.' + flagOrderItems);
+        let inputPriceTotalLocalVatIncl = row.querySelector('td.' + flagPriceTotalLocalVatIncl + ' input');
+        let priceTotalLocalVatIncl = DOM.getElementValueCurrent(inputPriceTotalLocalVatIncl);
+        let inputQuantityUsed = row.querySelector('td.' + flagQuantityUsed + ' input');
+        let quantityUsed = DOM.getElementValueCurrent(inputQuantityUsed);
+
+        let divPriceUnitLocalVatIncl = row.querySelector('td.' + flagPriceUnitLocalVatIncl + ' div');
+        let priceUnitLocalVatIncl = quantityUsed == 0 ? 0 : priceTotalLocalVatIncl / quantityUsed;
+        DOM.setElementValuesCurrentAndPrevious(divPriceUnitLocalVatIncl, priceUnitLocalVatIncl);
+
+        let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
+        let divPriceGrandTotalLocalVatIncl = rowManufacturingPurchaseOrder.querySelector('td.' + flagPriceTotalLocalVatIncl + ' div');
+        let inputsPriceTotalLocalVatIncl = rowManufacturingPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatIncl + ' input');
+        let priceGrandTotalLocalVatIncl = Array.from(inputsPriceTotalLocalVatIncl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
+        DOM.setElementValueCurrent(divPriceGrandTotalLocalVatIncl, priceGrandTotalLocalVatIncl);
+    }
+    hookupFieldsOrderItemPriceUnitLocalVatExcl() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceUnitLocalVatExcl + ' input');
+    }
+    hookupFieldsOrderItemPriceUnitLocalVatIncl() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceUnitLocalVatIncl + ' input');
+    }
+    hookupFieldsOrderItemUnitMeasurementLatencyManufacture() {
+        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagUnitMeasurementLatencyManufacture, Utils.getListFromDict(unitMeasurementsTime));
+    }
+    hookupFieldsOrderItemLatencyManufacture() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagLatencyManufacture + ' input');
+    }
+    hookupFieldsOrderItemActive() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' input.' + flagActive);
+    }
+    hookupFieldsOrderItemAddDelete() {
+        let selectorButton = idTableMain + ' td.' + flagOrderItems + ' td.' + flagOrderItems + ' button';
+        let selectorButtonDelete = selectorButton + '.' + flagDelete;
+        let selectorButtonUndelete = selectorButton + '.' + flagAdd;
+        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsOrderItemAdd();
+    }
+    hookupButtonsOrderItemAdd() {
+        this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' th button.' + flagAdd, (event, element) => {
+            let row = element.closest(idTableMain + ' > tbody > tr');
+            let idManufacturingPurchaseOrder = row.getAttribute(attrIdManufacturingPurchaseOrder);
+            let hasActiveOrderItem = row.querySelectorAll('td.' + flagOrderItems + ' input.' + flagActive + ':checked').length > 0;
+            let countManufacturingOrderItemes = row.querySelectorAll('td.' + flagOrderItems + ' td.' + flagManufacturingPurchaseOrder).length;
+            let manufacturingPurchaseOrderItem = {
+                [attrIdManufacturingPurchaseOrder]: idManufacturingPurchaseOrder,
+                [attrIdManufacturingPurchaseOrderProductLink]: -1 - countManufacturingOrderItemes,
+                [attrIdProductCategory]: 0,
+                [attrIdProduct]: 0,
+                [flagProductVariations]: '',
+                [attrIdUnitMeasurementQuantity]: 0,
+                [flagQuantityUsed]: '',
+                [flagQuantityProduced]: '',
+                [attrIdUnitMeasurementLatencyManufacture]: 0,
+                [flagLatencyManufacture]: '',
+                [flagDisplayOrder]: countManufacturingOrderItems + 1,
+                [flagActive]: !hasActiveOrderItem,
+            };
+            let tbody = row.querySelector('td.' + flagOrderItems + ' table tbody');
+            this.addRowManufacturingOrderItem(tbody, manufacturingPurchaseOrderItem);
+            /*
+            if (!hasActiveOrderItem) {
+                let tdOrderItem = row.querySelector('td.' + flagOrderItems);
+                // tdOrderItem.setAttribute(attrIdManufacturingOrderItem, manufacturingPurchaseOrderItem[attrIdManufacturingOrderItem]);
+                DOM.setElementAttributeValueCurrent(tdOrderItem, manufacturingPurchaseOrderItem[attrIdManufacturingOrderItem]);
+            }
+            */
+            this.hookupOrderItemsFields();
+        });
    }

    leave() {
--- a/static/js/pages/store/product_categories.js
+++ b/static/js/pages/store/product_categories.js
@@ -60,7 +60,7 @@ export default class PageStoreProductCategories extends TableBasePage {
        DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
        row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
        
-        let table = this.getTableMain();
+        let table = TableBasePage.getTableMain();
        let bodyTable = table.querySelector('tbody');
        bodyTable.appendChild(row);
    }
--- a/static/js/pages/store/product_permutations.js
+++ b/static/js/pages/store/product_permutations.js
@@ -1,6 +1,6 @@

 import API from "../../api.js";
-import BusinessObjects from "../../lib/business_objects.js";
+import BusinessObjects from "../../lib/business_objects/business_objects.js";
 import DOM from "../../dom.js";
 import Events from "../../lib/events.js";
 import TableBasePage from "../base_table.js";
@@ -69,7 +69,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
    loadRowTable(rowJson) {
        /*
        if (rowJson == null) return;
-        let tableMain = this.getTableMain();
+        let tableMain = TableBasePage.getTableMain();
        let row = _rowBlank.cloneNode(true);
        row.classList.remove(flagRowNew);
        console.log("applying data row: ", rowJson);
@@ -100,8 +100,8 @@ export default class PageStoreProductPermutations extends TableBasePage {
        DOM.setElementValuesCurrentAndPrevious(ddlCurrencyCost, rowJson[flagCurrencyCost]);
        let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputProfitLocalMin, rowJson[flagProfitLocalMin]);
-        let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufactureDays + ' input');
-        DOM.setElementValuesCurrentAndPrevious(inputLatencyManufactureDays, rowJson[flagLatencyManufactureDays]);
+        let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufacture + ' input');
+        DOM.setElementValuesCurrentAndPrevious(inputLatencyManufactureDays, rowJson[flagLatencyManufacture]);
        let inputQuantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityStock, rowJson[flagQuantityStock]);
        let inputQuantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
@@ -133,7 +133,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
        let inputCostLocal = row.querySelector('td.' + flagCostLocal + ' input');
        let tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
        let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
-        let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufactureDays + ' input');
+        let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufacture + ' input');
        let inputQuantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
        let inputQuantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
        let inputQuantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
@@ -158,7 +158,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
        jsonRow[flagCostLocal] = inputCostLocal.getAttribute(attrValueCurrent);
        jsonRow[flagCurrencyCost] = tdCurrencyCost.getAttribute(attrValueCurrent);
        jsonRow[flagProfitLocalMin] = inputProfitLocalMin.getAttribute(attrValueCurrent);
-        jsonRow[flagLatencyManufactureDays] = inputLatencyManufactureDays.getAttribute(attrValueCurrent);
+        jsonRow[flagLatencyManufacture] = inputLatencyManufactureDays.getAttribute(attrValueCurrent);
        jsonRow[flagQuantityStock] = inputQuantityStock.getAttribute(attrValueCurrent);
        jsonRow[flagQuantityMin] = inputQuantityMin.getAttribute(attrValueCurrent);
        jsonRow[flagQuantityMax] = inputQuantityMax.getAttribute(attrValueCurrent);
@@ -197,9 +197,9 @@ export default class PageStoreProductPermutations extends TableBasePage {

    hookupTableMain() {
        super.hookupTableMain();
-        this.hookupProductCategoryFields();
+        this.hookupFieldsProductCategory();
        this.hookupProductFields();
-        this.hookupProductPermutationVariationFields();
+        this.hookupFieldsProductPermutationVariation();
        this.hookupDescriptionTextareas();
        this.hookupCostFields();
        this.hookupLatencyManufactureInputs();
@@ -209,39 +209,16 @@ export default class PageStoreProductPermutations extends TableBasePage {
        this.hookupExpirationFields();
        this.hookupActiveCheckboxes();
    }
-    hookupProductCategoryFields() {
-        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProductCategory, Utils.getListFromDict(productCategories), (event, element) => { this.hookupProductCategoryDdls(event, element); });
-    }
-    hookupProductCategoryDdls(ddlSelector) {
-        this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeProductCategoryDdl(event, element); });
-    }
-    handleChangeProductCategoryDdl(event, ddlCategory) {
-        this.handleChangeTableCellDdl(event, ddlCategory);
-        let idProductCategorySelected = DOM.getElementValueCurrent(ddlCategory);
-        let row = DOM.getRowFromElement(ddlCategory);
-        let tdProduct = row.querySelector('td.' + flagProduct);
-        tdProduct.dispatchEvent(new Event('click'));
-        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
-        ddlProduct.innerHTML = '';
-        ddlProduct.appendChild(DOM.createOption(null));
-        let optionJson, option;
-        Utils.getListFromDict(products).forEach((product) => {
-            if (product[attrIdProductCategory] != idProductCategorySelected) return;
-            optionJson = BusinessObjects.getOptionJsonFromObjectJson(product);
-            option = DOM.createOption(optionJson);
-            ddlProduct.appendChild(option);
-        });
-        this.handleChangeTableCellDdl(event, ddlProduct);
+    hookupFieldsProductCategory() {
+        this.hookupTableCellDdlPreviews(
+            idTableMain + ' td.' + flagProductCategory
+            , Utils.getListFromDict(productCategories)
+            , (cellSelector) => { this.hookupProductCategoryDdls(cellSelector); }
+        );
    }
    hookupProductFields() {
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProduct, Utils.getListFromDict(products));
    }
-    handleClickButtonProductPermutationVariationsAdd(event, element) {
-        let row = DOM.getRowFromElement(element);
-        let tbody = row.querySelector('tbody');
-        let permutationVariation = PageStoreProductPermutations.createOptionUnselectedProductVariation();
-        this.addProductPermutationVariationRow(tbody, permutationVariation);
-    }

    hookupDescriptionTextareas() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDescription + ' textarea');
@@ -269,7 +246,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProfitLocalMin + ' input');
    }
    hookupLatencyManufactureInputs(){
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagLatencyManufactureDays + ' input');
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagLatencyManufacture + ' input');
    }
    hookupQuantityFields(){
        this.hookupQuantityMinInputs();
@@ -301,7 +278,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
    }
    hookupIsSubscriptionFields(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsSubscription + ' input', (event, element) => {
-            this.handleChangeElementCellTable(event, element);
+            this.handleChangeNestedElementCellTable(event, element);
            let isSubscription = DOM.getElementValueCurrent(element);
            let row = DOM.getRowFromElement(element);
            let inputCountIntervalRecurrence = row.querySelector('td.' + flagCountUnitMeasurementIntervalRecurrence + ' input');
@@ -333,7 +310,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
    }
    hookupDoesExpireFasterOnceUnsealedCheckboxes(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDoesExpireFasterOnceUnsealed + ' input', (event, element) => {
-            this.handleChangeElementCellTable(event, element);
+            this.handleChangeNestedElementCellTable(event, element);
            let doesExpireFasterOnceUnsealed = DOM.getElementValueCurrent(element);
            let row = DOM.getRowFromElement(element);
            let inputCountIntervalExpirationUnsealed = row.querySelector('td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
--- a/static/js/pages/store/products.js
+++ b/static/js/pages/store/products.js
@@ -61,7 +61,7 @@ export default class PageStoreProducts extends TableBasePage {
        DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
        row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
        
-        let table = this.getTableMain();
+        let table = TableBasePage.getTableMain();
        let bodyTable = table.querySelector('tbody');
        bodyTable.appendChild(row);
    }
--- a/static/js/pages/store/stock_items.js
+++ b/static/js/pages/store/stock_items.js
@@ -1,6 +1,6 @@

 import API from "../../api.js";
-import BusinessObjects from "../../lib/business_objects.js";
+import BusinessObjects from "../../lib/business_objects/business_objects.js";
 import DOM from "../../dom.js";
 import Events from "../../lib/events.js";
 import TableBasePage from "../base_table.js";
@@ -133,7 +133,7 @@ export default class PageStoreStockItems extends TableBasePage {
        super.hookupTableMain();
        this.hookupProductCategoryFields();
        this.hookupProductFields();
-        this.hookupProductPermutationVariationFields();
+        this.hookupFieldsProductPermutationVariation();
        this.hookupCurrencyCostFields();
        this.hookupCostInputs();
        this.hookupOrderDateInputs();
@@ -144,28 +144,11 @@ export default class PageStoreStockItems extends TableBasePage {
        this.hookupActiveCheckboxes();
    }
    hookupProductCategoryFields() {
-        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProductCategory, Utils.getListFromDict(productCategories), (event, element) => { this.hookupProductCategoryDdls(event, element); });
-    }
-    hookupProductCategoryDdls(ddlSelector) {
-        this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeProductCategoryDdl(event, element); });
-    }
-    handleChangeProductCategoryDdl(event, ddlCategory) {
-        this.handleChangeTableCellDdl(event, ddlCategory);
-        let idProductCategorySelected = DOM.getElementValueCurrent(ddlCategory);
-        let row = DOM.getRowFromElement(ddlCategory);
-        let tdProduct = row.querySelector('td.' + flagProduct);
-        tdProduct.dispatchEvent(new Event('click'));
-        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
-        ddlProduct.innerHTML = '';
-        ddlProduct.appendChild(DOM.createOption(null));
-        let optionJson, option;
-        Utils.getListFromDict(products).forEach((product) => {
-            if (product[attrIdProductCategory] != idProductCategorySelected) return;
-            optionJson = BusinessObjects.getOptionJsonFromObjectJson(product);
-            option = DOM.createOption(optionJson);
-            ddlProduct.appendChild(option);
-        });
-        this.handleChangeTableCellDdl(event, ddlProduct);
+        this.hookupTableCellDdlPreviews(
+            idTableMain + ' td.' + flagProductCategory
+            , Utils.getListFromDict(productCategories)
+            , (event, element) => { this.hookupProductCategoryDdls(event, element); }
+        );
    }
    hookupProductFields() {
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProduct, Utils.getListFromDict(products));
@@ -317,7 +300,7 @@ export default class PageStoreStockItems extends TableBasePage {
    }
    hookupIsSealedFields(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsSealed + ' input', (event, element) => {
-            this.handleChangeElementCellTable(event, element);
+            this.handleChangeNestedElementCellTable(event, element);
            let isSealed = DOM.getElementValueCurrent(element);
            let row = DOM.getRowFromElement(element);
            let inputDateUnsealed = row.querySelector('td.' + flagDateUnsealed + ' input');
@@ -342,7 +325,7 @@ export default class PageStoreStockItems extends TableBasePage {
    }
    hookupIsConsumedFields(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsConsumed + ' input', (event, element) => {
-            this.handleChangeElementCellTable(event, element);
+            this.handleChangeNestedElementCellTable(event, element);
            let isConsumed = DOM.getElementValueCurrent(element);
            let row = DOM.getRowFromElement(element);
            let inputDateConsumed = row.querySelector('td.' + flagDateConsumed + ' input');
--- a/static/js/pages/store/supplier_purchase_orders.js
+++ b/static/js/pages/store/supplier_purchase_orders.js
@@ -1,8 +1,9 @@

 import API from "../../api.js";
-import BusinessObjects from "../../lib/business_objects.js";
+import BusinessObjects from "../../lib/business_objects/business_objects.js";
 import DOM from "../../dom.js";
 import Events from "../../lib/events.js";
+import ProductPermutation from "../../lib/business_objects/store/product_permutation.js";
 import TableBasePage from "../base_table.js";
 import Utils from "../../lib/utils.js";
 import Validation from "../../lib/validation.js";
@@ -36,8 +37,8 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
        let tdCurrency = row.querySelector('td.' + flagCurrency);
        let inputCostTotalLocalVatExcl = row.querySelector('td.' + flagCostTotalLocalVatExcl + ' input');
        let inputCostTotalLocalVatIncl = row.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
-        let tdItems = row.querySelector('td.' + flagItems);
-        let checkboxActive = row.querySelector('td.' + flagActive + ' textarea');
+        let trsPurchaseOrderItem = row.querySelectorAll('tr.' + flagOrderItems);
+        let checkboxActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');

        let jsonRow = {};
        jsonRow[attrIdSupplierPurchaseOrder] = row.getAttribute(attrIdSupplierPurchaseOrder);
@@ -45,10 +46,47 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
        jsonRow[attrIdCurrency] = DOM.getElementAttributeValueCurrent(tdCurrency);
        jsonRow[flagCostTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatExcl);
        jsonRow[flagCostTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatIncl);
-        jsonRow[flagItems] = DOM.getElementAttributeValueCurrent(tdItems);
+        // jsonRow[flagOrderItems] = DOM.getElementAttributeValueCurrent(tdItems);
+        let orderItems = [];
+        if (trsPurchaseOrderItem != null) {
+            trsPurchaseOrderItem.forEach((tr) => {
+                orderItems.push(this.getJsonRowOrderItem(tr));
+            });
+        }
+        jsonRow[flagOrderItems] = orderItems;
        jsonRow[flagActive] = DOM.getElementAttributeValueCurrent(checkboxActive);
        return jsonRow;
    }
+    getJsonRowOrderItem(tr) {
+        let inputDisplayOrder = tr.querySelector('td.' + flagDisplayOrder + ' input');
+        let tdCategory = tr.querySelector('td.' + flagProductCategory);
+        let tdProduct = tr.querySelector('td.' + flagProduct);
+        let tdVariations = tr.querySelector('td.' + flagProductVariations);
+        let tdUnitQuantity = tr.querySelector('td.' + flagUnitMeasurementQuantity);
+        let inputQuantityOrdered = tr.querySelector('td.' + flagQuantityOrdered + ' input');
+        let inputQuantityReceived = tr.querySelector('td.' + flagQuantityReceived + ' input');
+        let inputCostTotalLocalVatExcl = tr.querySelector('td.' + flagCostTotalLocalVatExcl + ' input');
+        let inputCostTotalLocalVatIncl = tr.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
+        let inputLatencyDeliveryDays = tr.querySelector('td.' + flagLatencyDeliveryDays + ' input');
+        let checkboxActive = tr.querySelector('td.' + flagActive + ' input');
+
+        let jsonRow = {};
+        jsonRow[attrIdSupplierPurchaseOrder] = tr.getAttribute(attrIdSupplierPurchaseOrder);
+        jsonRow[attrIdSupplierPurchaseOrderProductLink] = tr.getAttribute(attrIdSupplierPurchaseOrderProductLink);
+        jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
+        jsonRow[attrIdProductCategory] = DOM.getElementAttributeValueCurrent(tdCategory);
+        jsonRow[attrIdProduct] = DOM.getElementAttributeValueCurrent(tdProduct);
+        jsonRow[flagProductVariations] = DOM.getElementAttributeValueCurrent(tdVariations);
+        jsonRow[attrIdUnitMeasurementQuantity] = DOM.getElementAttributeValueCurrent(tdUnitQuantity);
+        jsonRow[flagQuantityOrdered] = DOM.getElementAttributeValueCurrent(inputQuantityOrdered);
+        jsonRow[flagQuantityReceived] = DOM.getElementAttributeValueCurrent(inputQuantityReceived);
+        jsonRow[flagCostTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatExcl);
+        jsonRow[flagCostTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatIncl);
+        jsonRow[flagLatencyDeliveryDays] = DOM.getElementAttributeValueCurrent(inputLatencyDeliveryDays);
+        jsonRow[flagActive] = DOM.getElementAttributeValueCurrent(checkboxActive);
+
+        return jsonRow;
+    }
    initialiseRowNew(row) {
        super.initialiseRowNew(row);
    }
@@ -59,7 +97,7 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
        this.hookupCurrencyFields();
        this.hookupCostInputs();
        this.hookupOrderItemsFields();
-        this.hookupActiveCheckboxes();
+        this.hookupInputsActiveTable();
    }
    hookupSupplierFields() {
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagSupplier, Utils.getListFromDict(suppliers));
@@ -69,12 +107,416 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostTotalLocalVatIncl + ' input');
    }
    hookupOrderItemsFields() {
-        
+        this.hookupOrderItemsPreviews();
+        this.hookupFieldsOrderItemDisplayOrder();
+        this.hookupFieldsOrderItemProductCategory();
+        this.hookupFieldsOrderItemProduct();
+        // this.hookupFieldsOrderItemProductVariations();
+        this.hookupFieldsProductPermutationVariation();
+        this.hookupFieldsOrderItemUnitQuantity();
+        this.hookupFieldsOrderItemQuantityOrdered();
+        this.hookupFieldsOrderItemQuantityReceived();
+        this.hookupFieldsOrderItemCostTotalLocalVatExcl();
+        this.hookupFieldsOrderItemCostTotalLocalVatIncl();
+        this.hookupFieldsOrderItemLatencyDeliveryDays();
+        this.hookupFieldsOrderItemActive();
+        this.hookupFieldsOrderItemAddDelete();
    }
-    hookupActiveCheckboxes(){
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagActive + ' input');
+    hookupOrderItemsPreviews() {
+        this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems, (event, td) => {
+            if (!td.classList.contains(flagCollapsed)) return;
+            this.handleClickOrderItemsPreview(event, td);
+        });
    }
+    handleClickOrderItemsPreview(event, element) {
+        console.log("click order items preview");
+        this.toggleColumnHeaderCollapsed(flagOrderItems, false);
+        element.classList.remove(flagCollapsed);

+        let row = DOM.getRowFromElement(element);
+        let idSupplierPurchaseOrder = row.getAttribute(attrIdSupplierPurchaseOrder);
+        if (idSupplierPurchaseOrder == null || idSupplierPurchaseOrder < 1) return;
+        let supplierPurchaseOrder = supplierPurchaseOrders[idSupplierPurchaseOrder];
+        let tblOrderItems = document.createElement("table");
+        tblOrderItems.classList.add(flagOrderItems);
+        let thead = document.createElement("thead");
+        let tr = document.createElement("tr");
+        
+        let thDisplayOrder = document.createElement("th");
+        thDisplayOrder.classList.add(flagDisplayOrder);
+        thDisplayOrder.textContent = 'Display Order';
+        let thCategory = document.createElement("th");
+        thCategory.classList.add(flagProductCategory);
+        thCategory.textContent = 'Category';
+        let thProduct = document.createElement("th");
+        thProduct.classList.add(flagProduct);
+        thProduct.textContent = 'Product';
+        let thVariations = document.createElement("th");
+        thVariations.classList.add(flagProductVariations);
+        thVariations.classList.add(flagCollapsed);
+        thVariations.textContent = 'Variations';
+        let thUnitQuantity = document.createElement("th");
+        thUnitQuantity.classList.add(flagUnitMeasurementQuantity);
+        thUnitQuantity.textContent = 'Unit Quantity';
+        let thQuantityOrdered = document.createElement("th");
+        thQuantityOrdered.classList.add(flagQuantityOrdered);
+        thQuantityOrdered.textContent = 'Quantity Ordered';
+        let thQuantityReceived = document.createElement("th");
+        thQuantityReceived.classList.add(flagQuantityReceived);
+        thQuantityReceived.textContent = 'Quantity Received';
+        let thCostTotalLocalVatExcl = document.createElement("th");
+        thCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
+        thCostTotalLocalVatExcl.textContent = 'Cost Total Local VAT Excl';
+        let thCostTotalLocalVatIncl = document.createElement("th");
+        thCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
+        thCostTotalLocalVatIncl.textContent = 'Cost Total Local VAT Incl';
+        let thCostUnitLocalVatExcl = document.createElement("th");
+        thCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
+        thCostUnitLocalVatExcl.textContent = 'Cost Unit Local VAT Excl';
+        let thCostUnitLocalVatIncl = document.createElement("th");
+        thCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
+        thCostUnitLocalVatIncl.textContent = 'Cost Unit Local VAT Incl';
+        let thLatencyDeliveryDays = document.createElement("th");
+        thLatencyDeliveryDays.classList.add(flagLatencyDeliveryDays);
+        thLatencyDeliveryDays.textContent = 'Latency Delivery (Days)';
+        let thActive = document.createElement("th");
+        thActive.classList.add(flagActive);
+        thActive.textContent = 'Active';
+        let thAddDelete = document.createElement("th");
+        thAddDelete.classList.add(flagAdd);
+        let buttonAdd = document.createElement("button");
+        buttonAdd.classList.add(flagAdd);
+        buttonAdd.textContent = '+';
+        thAddDelete.appendChild(buttonAdd);
+
+        tr.appendChild(thDisplayOrder);
+        tr.appendChild(thCategory);
+        tr.appendChild(thProduct);
+        tr.appendChild(thVariations);
+        tr.appendChild(thUnitQuantity);
+        tr.appendChild(thQuantityOrdered);
+        tr.appendChild(thQuantityReceived);
+        tr.appendChild(thCostTotalLocalVatExcl);
+        tr.appendChild(thCostTotalLocalVatIncl);
+        tr.appendChild(thCostUnitLocalVatExcl);
+        tr.appendChild(thCostUnitLocalVatIncl);
+        tr.appendChild(thLatencyDeliveryDays);
+        tr.appendChild(thActive);
+        tr.appendChild(thAddDelete);
+        thead.appendChild(tr);
+        tblOrderItems.appendChild(thead);
+
+        let tbody = document.createElement("tbody");
+        supplierPurchaseOrder[flagOrderItems].forEach((orderItem, index) => {
+            this.addRowSupplierPurchaseOrderItem(tbody, orderItem);
+        });
+        tblOrderItems.appendChild(tbody);
+        
+        let cell = DOM.getCellFromElement(element);
+        let cellNew = cell.cloneNode(false);
+        cellNew.appendChild(tblOrderItems);
+        row.replaceChild(cellNew, cell);
+        console.log("tblOrderItems: ", tblOrderItems);
+        this.hookupOrderItemsFields();
+    }
+    addRowSupplierPurchaseOrderItem(tbody, orderItem) { //  productVariationTypeOptions, productVariationOptions, productCategoryOptions, productOptions, unitMeasurementOptions, 
+        console.log("addRowSupplierPurchaseOrderItem: ", orderItem);
+
+        let tdDisplayOrder = document.createElement("td");
+        tdDisplayOrder.classList.add(flagDisplayOrder);
+        let inputDisplayOrder = document.createElement("input");
+        inputDisplayOrder.classList.add(flagDisplayOrder);
+        inputDisplayOrder.type = 'number';
+        inputDisplayOrder.step = 1;
+        DOM.setElementValuesCurrentAndPrevious(inputDisplayOrder, orderItem[flagDisplayOrder]);
+        tdDisplayOrder.appendChild(inputDisplayOrder);
+
+        let tdCategory = document.createElement("td");
+        tdCategory.classList.add(flagProductCategory);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdCategory, orderItem[attrIdProductCategory]);
+        let divCategory = document.createElement("div");
+        divCategory.classList.add(flagProductCategory);
+        DOM.setElementAttributesValuesCurrentAndPrevious(divCategory, orderItem[attrIdProductCategory]);
+        // divCategory.textContent = orderItem[flagProductCategory];
+        let productCategory = productCategories[orderItem[attrIdProductCategory]];
+        divCategory.textContent = BusinessObjects.getObjectText(productCategory);
+        tdCategory.appendChild(divCategory);
+
+        let tdProduct = document.createElement("td");
+        tdProduct.classList.add(flagProduct);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdProduct, orderItem[attrIdProduct]);
+        let divProduct = document.createElement("div");
+        divProduct.classList.add(flagProduct);
+        DOM.setElementAttributesValuesCurrentAndPrevious(divProduct, orderItem[attrIdProduct]);
+        // divProduct.textContent = orderItem[flagProduct];
+        let product = products[orderItem[attrIdProduct]];
+        divProduct.textContent = BusinessObjects.getObjectText(product);
+        tdProduct.appendChild(divProduct);
+
+        let tdVariations = document.createElement("td");
+        tdVariations.classList.add(flagProductVariations);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdVariations, orderItem[attrIdProductVariation]);
+        let divVariations = document.createElement("div");
+        divVariations.classList.add(flagProductVariations);
+        DOM.setElementAttributesValuesCurrentAndPrevious(divVariations, orderItem[attrIdProductVariation]);
+        // divVariations.textContent = orderItem[flagProductVariations];
+        let variationsText = ProductPermutation.getProductVariationsPreviewFromIdCsv(orderItem[flagProductVariations]);
+        divVariations.textContent = variationsText;
+        tdVariations.appendChild(divVariations);
+
+        let tdUnitQuantity = document.createElement("td");
+        tdUnitQuantity.classList.add(flagUnitMeasurementQuantity);
+        DOM.setElementAttributesValuesCurrentAndPrevious(tdUnitQuantity, orderItem[attrIdUnitMeasurementQuantity]);
+        let divUnitQuantity = document.createElement("div");
+        divUnitQuantity.classList.add(flagUnitMeasurementQuantity);
+        DOM.setElementAttributesValuesCurrentAndPrevious(divUnitQuantity, orderItem[attrIdUnitMeasurementQuantity]);
+        let unitQuantity = unitMeasurements[orderItem[attrIdUnitMeasurementQuantity]];
+        divUnitQuantity.textContent = BusinessObjects.getObjectText(unitQuantity);
+        tdUnitQuantity.appendChild(divUnitQuantity);
+
+        let tdQuantityOrdered = document.createElement("td");
+        tdQuantityOrdered.classList.add(flagQuantityOrdered);
+        let inputQuantityOrdered = document.createElement("input");
+        inputQuantityOrdered.classList.add(flagQuantityOrdered);
+        inputQuantityOrdered.type = 'number';
+        DOM.setElementValuesCurrentAndPrevious(inputQuantityOrdered, orderItem[flagQuantityOrdered]);
+        tdQuantityOrdered.appendChild(inputQuantityOrdered);
+
+        let tdQuantityReceived = document.createElement("td");
+        tdQuantityReceived.classList.add(flagQuantityReceived);
+        let inputQuantityReceived = document.createElement("input");
+        inputQuantityReceived.classList.add(flagQuantityReceived);
+        inputQuantityReceived.type = 'number';
+        DOM.setElementValuesCurrentAndPrevious(inputQuantityReceived, orderItem[flagQuantityReceived]);
+        tdQuantityReceived.appendChild(inputQuantityReceived);
+
+        let tdCostTotalLocalVatExcl = document.createElement("td");
+        tdCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
+        let inputCostTotalLocalVatExcl = document.createElement("input");
+        inputCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
+        inputCostTotalLocalVatExcl.type = 'number';
+        inputCostTotalLocalVatExcl.step = 0.01;
+        DOM.setElementValuesCurrentAndPrevious(inputCostTotalLocalVatExcl, orderItem[flagCostTotalLocalVatExcl]);
+        tdCostTotalLocalVatExcl.appendChild(inputCostTotalLocalVatExcl);
+
+        let tdCostTotalLocalVatIncl = document.createElement("td");
+        tdCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
+        let inputCostTotalLocalVatIncl = document.createElement("input");
+        inputCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
+        inputCostTotalLocalVatIncl.type = 'number';
+        inputCostTotalLocalVatIncl.step = 0.01;
+        DOM.setElementValuesCurrentAndPrevious(inputCostTotalLocalVatIncl, orderItem[flagCostTotalLocalVatIncl]);
+        tdCostTotalLocalVatIncl.appendChild(inputCostTotalLocalVatIncl);
+
+        let tdCostUnitLocalVatExcl = document.createElement("td");
+        tdCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
+        let divCostUnitLocalVatExcl = document.createElement("div");
+        divCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
+        DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, orderItem[flagCostUnitLocalVatExcl]);
+        tdCostUnitLocalVatExcl.appendChild(divCostUnitLocalVatExcl);
+
+        let tdCostUnitLocalVatIncl = document.createElement("td");
+        tdCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
+        let divCostUnitLocalVatIncl = document.createElement("div");
+        divCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
+        DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, orderItem[flagCostUnitLocalVatIncl]);
+        tdCostUnitLocalVatIncl.appendChild(divCostUnitLocalVatIncl);
+
+        let tdLatencyDeliveryDays = document.createElement("td");
+        tdLatencyDeliveryDays.classList.add(flagLatencyDeliveryDays);
+        let inputLatencyDeliveryDays = document.createElement("input");
+        inputLatencyDeliveryDays.classList.add(flagLatencyDeliveryDays);
+        inputLatencyDeliveryDays.type = 'number';
+        inputLatencyDeliveryDays.step = 1;
+        DOM.setElementValuesCurrentAndPrevious(inputLatencyDeliveryDays, orderItem[flagLatencyDeliveryDays]);
+        tdLatencyDeliveryDays.appendChild(inputLatencyDeliveryDays);
+
+        let tdActive = document.createElement("td");
+        tdActive.classList.add(flagActive);
+        let checkboxActive = document.createElement("input");
+        checkboxActive.classList.add(flagActive);
+        checkboxActive.type = 'checkbox';
+        DOM.setElementValuesCurrentAndPrevious(checkboxActive, orderItem[flagActive]);
+        tdActive.appendChild(checkboxActive);
+
+        let tdDelete = document.createElement("td");
+        tdDelete.classList.add(flagDelete);
+        let buttonDelete = document.createElement("button");
+        buttonDelete.classList.add(flagDelete);
+        buttonDelete.textContent = 'x';
+        tdDelete.appendChild(buttonDelete);
+
+        let tr = document.createElement("tr");
+        tr.classList.add(flagOrderItems);
+        tr.setAttribute(attrIdSupplierPurchaseOrder, orderItem[attrIdSupplierPurchaseOrder]);
+        tr.setAttribute(attrIdSupplierPurchaseOrderProductLink, orderItem[attrIdSupplierPurchaseOrderProductLink]);
+        tr.appendChild(tdDisplayOrder);
+        tr.appendChild(tdCategory);
+        tr.appendChild(tdProduct);
+        tr.appendChild(tdVariations);
+        tr.appendChild(tdUnitQuantity);
+        tr.appendChild(tdQuantityOrdered);
+        tr.appendChild(tdQuantityReceived);
+        tr.appendChild(tdCostTotalLocalVatExcl);
+        tr.appendChild(tdCostTotalLocalVatIncl);
+        tr.appendChild(tdCostUnitLocalVatExcl);
+        tr.appendChild(tdCostUnitLocalVatIncl);
+        tr.appendChild(tdLatencyDeliveryDays);
+        tr.appendChild(tdActive);
+        tr.appendChild(tdDelete);
+        tbody.appendChild(tr);
+    }
+    hookupFieldsOrderItemDisplayOrder() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagDisplayOrder + ' input');
+    }
+    hookupFieldsOrderItemProductCategory() {
+        this.hookupTableCellDdlPreviews(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductCategory
+            , Utils.getListFromDict(productCategories)
+            , (cellSelector) => { this.hookupProductCategoryDdls(cellSelector); }
+        );
+    }
+    hookupFieldsOrderItemProduct() {
+        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagProduct, Utils.getListFromDict(products));
+    }
+    /*
+    hookupFieldsOrderItemProductVariations() {
+        this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductVariations, (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
+    }
+    */
+    handleChangeElementProductVariationsSubtableCell(event, element) {
+        this.handleChangeNestedElementCellTable(event, element); //  flagProductVariations);
+    }
+    hookupDdlsProductPermutationVariation() {
+        this.hookupTableCellDdls(
+            idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariation
+            , (event, element) => { this.handleChangeElementProductVariationsSubtableCell(event, element); }
+        );
+    }
+    hookupDdlsProductPermutationVariationType() {
+        this.hookupTableCellDdls(
+            idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariationType
+            , (event, element) => { this.handleChangeElementProductVariationsSubtableCell(event, element); }
+        );
+    }
+    hookupFieldsOrderItemUnitQuantity() {
+        this.hookupTableCellDdlPreviews(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagUnitMeasurementQuantity
+            , Utils.getListFromDict(unitMeasurements)
+        );
+    }
+    hookupFieldsOrderItemQuantityOrdered() {
+        this.hookupChangeHandlerTableCells(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityOrdered + ' input'
+        );
+    }
+    hookupFieldsOrderItemQuantityReceived() {
+        this.hookupChangeHandlerTableCells(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityReceived + ' input'
+        );
+    }
+    hookupFieldsOrderItemCostTotalLocalVatExcl() {
+        this.hookupChangeHandlerTableCells(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatExcl + ' input'
+            , (event, element) => { 
+                this.handleChangeNestedElementCellTable(event, element); //  flagCostTotalLocalVatExcl);
+                this.updateFieldsCostUnitLocalVatExcl(element);
+            }
+        );
+    }
+    hookupFieldsOrderItemCostTotalLocalVatIncl() {
+        this.hookupChangeHandlerTableCells(
+            idTableMain + ' td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatIncl + ' input' 
+            , (event, element) => { 
+                this.handleChangeNestedElementCellTable(event, element); //  flagCostTotalLocalVatIncl);
+                this.updateFieldsCostUnitLocalVatIncl(element);
+            }
+        );
+    }
+    updateFieldsCostUnitLocalVatExcl(elementChanged) {
+        let row = elementChanged.closest('tr.' + flagOrderItems);
+        let inputCostTotalLocalVatExcl = row.querySelector('td.' + flagCostTotalLocalVatExcl + ' input');
+        let costTotalLocalVatExcl = DOM.getElementValueCurrent(inputCostTotalLocalVatExcl);
+        let inputQuantityOrdered = row.querySelector('td.' + flagQuantityOrdered + ' input');
+        let quantityOrdered = DOM.getElementValueCurrent(inputQuantityOrdered);
+
+        let divCostUnitLocalVatExcl = row.querySelector('td.' + flagCostUnitLocalVatExcl + ' div');
+        let costUnitLocalVatExcl = quantityOrdered == 0 ? 0 : costTotalLocalVatExcl / quantityOrdered;
+        DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, costUnitLocalVatExcl);
+
+        let rowSupplierPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
+        let divCostGrandTotalLocalVatExcl = rowSupplierPurchaseOrder.querySelector('td.' + flagCostTotalLocalVatExcl + ' div');
+        let inputsCostTotalLocalVatExcl = rowSupplierPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatExcl + ' input');
+        let costGrandTotalLocalVatExcl = Array.from(inputsCostTotalLocalVatExcl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
+        DOM.setElementValueCurrent(divCostGrandTotalLocalVatExcl, costGrandTotalLocalVatExcl);
+    }
+    updateFieldsCostUnitLocalVatIncl(elementChanged) {
+        let row = elementChanged.closest('tr.' + flagOrderItems);
+        let inputCostTotalLocalVatIncl = row.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
+        let costTotalLocalVatIncl = DOM.getElementValueCurrent(inputCostTotalLocalVatIncl);
+        let inputQuantityOrdered = row.querySelector('td.' + flagQuantityOrdered + ' input');
+        let quantityOrdered = DOM.getElementValueCurrent(inputQuantityOrdered);
+
+        let divCostUnitLocalVatIncl = row.querySelector('td.' + flagCostUnitLocalVatIncl + ' div');
+        let costUnitLocalVatIncl = quantityOrdered == 0 ? 0 : costTotalLocalVatIncl / quantityOrdered;
+        DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, costUnitLocalVatIncl);
+
+        let rowSupplierPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
+        let divCostGrandTotalLocalVatIncl = rowSupplierPurchaseOrder.querySelector('td.' + flagCostTotalLocalVatIncl + ' div');
+        let inputsCostTotalLocalVatIncl = rowSupplierPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatIncl + ' input');
+        let costGrandTotalLocalVatIncl = Array.from(inputsCostTotalLocalVatIncl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
+        DOM.setElementValueCurrent(divCostGrandTotalLocalVatIncl, costGrandTotalLocalVatIncl);
+    }
+    hookupFieldsOrderItemLatencyDeliveryDays() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagLatencyDeliveryDays + ' input');
+    }
+    hookupFieldsOrderItemActive() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' input.' + flagActive);
+    }
+    hookupFieldsOrderItemAddDelete() {
+        let selectorButton = idTableMain + ' td.' + flagOrderItems + ' td.' + flagOrderItems + ' button';
+        let selectorButtonDelete = selectorButton + '.' + flagDelete;
+        let selectorButtonUndelete = selectorButton + '.' + flagAdd;
+        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsOrderItemAdd();
+    }
+    hookupButtonsOrderItemAdd() {
+        this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' th button.' + flagAdd, (event, element) => {
+            let row = element.closest(idTableMain + ' > tbody > tr');
+            let idSupplierPurchaseOrder = row.getAttribute(attrIdSupplierPurchaseOrder);
+            let hasActiveOrderItem = row.querySelectorAll('td.' + flagOrderItems + ' input.' + flagActive + ':checked').length > 0;
+            let countSupplierOrderItems = row.querySelectorAll('td.' + flagOrderItems + ' td.' + flagSupplierPurchaseOrder).length;
+            let supplierOrderItem = {
+                [attrIdSupplierPurchaseOrder]: idSupplierPurchaseOrder,
+                [attrIdSupplierPurchaseOrderProductLink]: -1 - countSupplierOrderItems,
+                [attrIdProductCategory]: 0,
+                [attrIdProduct]: 0,
+                [flagProductVariations]: '',
+                [attrIdUnitMeasurementQuantity]: 0,
+                [flagQuantityOrdered]: '',
+                [flagQuantityReceived]: '',
+                [flagCostTotalLocalVatExcl]: '',
+                [flagCostTotalLocalVatIncl]: '',
+                [flagCostUnitLocalVatExcl]: '',
+                [flagCostUnitLocalVatIncl]: '',
+                [flagLatencyDeliveryDays]: '',
+                [flagDisplayOrder]: countSupplierOrderItems + 1,
+                [flagActive]: !hasActiveOrderItem,
+            };
+            let tbody = row.querySelector('td.' + flagOrderItems + ' table tbody');
+            this.addRowSupplierPurchaseOrderItem(tbody, supplierOrderItem);
+            /*
+            if (!hasActiveOrderItem) {
+                let tdOrderItem = row.querySelector('td.' + flagOrderItems);
+                // tdOrderItem.setAttribute(attrIdSupplierOrderItem, supplierOrderItem[attrIdSupplierOrderItem]);
+                DOM.setElementAttributeValueCurrent(tdOrderItem, supplierOrderItem[attrIdSupplierPurchaseOrderProductLink]);
+            }
+            */
+            this.hookupOrderItemsFields();
+        });
+    }
+    
    leave() {
        super.leave();
    }
--- a/static/js/pages/store/suppliers.js
+++ b/static/js/pages/store/suppliers.js
@@ -1,6 +1,6 @@

 import API from "../../api.js";
-import BusinessObjects from "../../lib/business_objects.js";
+import BusinessObjects from "../../lib/business_objects/business_objects.js";
 import DOM from "../../dom.js";
 import Events from "../../lib/events.js";
 import TableBasePage from "../base_table.js";
@@ -60,7 +60,7 @@ export default class PageStoreSuppliers extends TableBasePage {
    }
    getSupplierAddressesFromRow(row) {
        let supplierAddresses = [];
-        let trs = row.querySelectorAll('td.' + flagAddress + ' tr');
+        let trs = row.querySelectorAll('td.' + flagAddress + ' tbody tr');
        let address, inputPostcode, inputAddressLine1, inputAddressLine2, inputCity, inputCounty, ddlRegion, inputActive;
        trs.forEach((tr) => {
            inputPostcode = tr.querySelector('td.' + flagPostcode + ' textarea');
@@ -72,6 +72,7 @@ export default class PageStoreSuppliers extends TableBasePage {
            inputActive = tr.querySelector('td.' + flagActive + ' input');
            address = {
                [attrIdSupplierAddress]: tr.getAttribute(attrIdSupplierAddress),
+                [attrIdSupplier]: row.getAttribute(attrIdSupplier),
                [flagPostcode]: DOM.getElementAttributeValueCurrent(inputPostcode),
                [flagAddressLine1]: DOM.getElementAttributeValueCurrent(inputAddressLine1),
                [flagAddressLine2]: DOM.getElementAttributeValueCurrent(inputAddressLine2),
@@ -99,7 +100,7 @@ export default class PageStoreSuppliers extends TableBasePage {
        this.hookupEmailInputs();
        this.hookupWebsiteInputs();
        this.hookupCurrencyFields();
-        this.hookupActiveCheckboxes();
+        this.hookupInputsActiveTable();
    }
    hookupNameCompanyInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagNameCompany + ' textarea');
@@ -239,6 +240,8 @@ export default class PageStoreSuppliers extends TableBasePage {
        let ddlRegion = document.createElement("select");
        ddlRegion.classList.add(flagRegion);
        let optionJson, option;
+        option = DOM.createOption(null);
+        ddlRegion.appendChild(option);
        regionOptions.forEach((regionOption) => {
            optionJson = BusinessObjects.getOptionJsonFromObjectJson(regionOption);
            option = DOM.createOption(optionJson);
@@ -264,6 +267,7 @@ export default class PageStoreSuppliers extends TableBasePage {

        let tr = document.createElement("tr");
        tr.setAttribute(attrIdSupplierAddress, supplierAddress[attrIdSupplierAddress]);
+        tr.setAttribute(attrIdSupplier, supplierAddress[attrIdSupplier]);
        tr.appendChild(tdPostcode);
        tr.appendChild(tdAddressLine1);
        tr.appendChild(tdAddressLine2);
@@ -275,25 +279,28 @@ export default class PageStoreSuppliers extends TableBasePage {
        tbody.appendChild(tr);
    }
    hookupAddressPostcodeInputs() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagPostcode);
+        this.handleChangeElementAddressSubtableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagPostcode);
+    }
+    handleChangeElementAddressSubtableCells(event, element) {
+        this.handleChangeNestedElementCellTable(event, element); //  flagAddress);
    }
    hookupAddressLine1Inputs() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine1);
+        this.handleChangeElementAddressSubtableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine1);
    }
    hookupAddressLine2Inputs() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine2);
+        this.handleChangeElementAddressSubtableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine2);
    }
    hookupAddressCityInputs() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCity);
+        this.handleChangeElementAddressSubtableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCity);
    }
    hookupAddressCountyInputs() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCounty);
+        this.handleChangeElementAddressSubtableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCounty);
    }
    hookupAddressRegionDdls() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' select.' + flagRegion);
+        this.handleChangeElementAddressSubtableCells(idTableMain + ' td.' + flagAddress + ' select.' + flagRegion);
    }
    hookupAddressActiveCheckboxes() {
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' input.' + flagActive, (event, element) => {
+        this.handleChangeElementAddressSubtableCells(idTableMain + ' td.' + flagAddress + ' input.' + flagActive, (event, element) => {
            let rowSupplierAddress = element.closest('tr');
            let idAddress = rowSupplierAddress.getAttribute(attrIdSupplierAddress);
            DOM.setElementAttributeValueCurrent(rowSupplierAddress, idAddress);
@@ -313,6 +320,13 @@ export default class PageStoreSuppliers extends TableBasePage {
            */
        });
    }
+    hookupFieldsAddressAddDelete() {
+        let selectorButton = idTableMain + ' td.' + flagAddress + ' button';
+        let selectorButtonDelete = selectorButton + '.' + flagDelete;
+        let selectorButtonUndelete = selectorButton + '.' + flagAdd;
+        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
+    }
    hookupAddressDeleteButtons() {
        this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress + ' button.' + flagDelete, (event, element) => {
            let row = DOM.getRowFromElement(element);
@@ -377,9 +391,6 @@ export default class PageStoreSuppliers extends TableBasePage {
    hookupWebsiteInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagWebsite + ' textarea');
    }
-    hookupActiveCheckboxes(){
-        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagActive + ' input');
-    }

    leave() {
        super.leave();