1. New Router and Base Page Class architecture to avoid circular references and conform to module bundler requirements. \n 2. Relative path bug fix for lib/validation.js file to work using module bundler.

.babelrc

@@ -1,3 +1,4 @@
 {
-    "presets": ["@babel/preset-env"]
-  }
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}

models/model_view_accessibility_report.py

@@ -0,0 +1,24 @@
+"""
+Project:    PARTS Website
+Author:     Edward Middleton-Smith
+            Precision And Research Technology Systems Limited
+
+Technology: Legal View Models
+Feature:    Accessibility Report View Model
+
+Description:
+Data model for accessibility report view
+"""
+
+# internal
+from models.model_view_base import Model_View_Base
+# from routes import bp_home
+# external
+
+class Model_View_Accessibility_Report(Model_View_Base):
+    @property
+    def title(self):
+        return 'Accessibility Report'
+    def __init__(self, hash_page_current=Model_View_Base.HASH_PAGE_ACCESSIBILITY_REPORT):
+        super().__init__(hash_page_current=hash_page_current)
+    

models/model_view_accessibility_statement.py

@@ -0,0 +1,24 @@
+"""
+Project:    PARTS Website
+Author:     Edward Middleton-Smith
+            Precision And Research Technology Systems Limited
+
+Technology: Legal View Models
+Feature:    Accessibility Statement View Model
+
+Description:
+Data model for accessibility statement view
+"""
+
+# internal
+from models.model_view_base import Model_View_Base
+# from routes import bp_home
+# external
+
+class Model_View_Accessibility_Statement(Model_View_Base):
+    @property
+    def title(self):
+        return 'Accessibility Statement'
+    def __init__(self, hash_page_current=Model_View_Base.HASH_PAGE_ACCESSIBILITY_STATEMENT):
+        super().__init__(hash_page_current=hash_page_current)
+    

models/model_view_base.py

@@ -111,11 +111,11 @@ class Model_View_Base(BaseModel, ABC):
     HASH_PAGE_ACCESSIBILITY_STATEMENT: ClassVar[str] = '/accessibility-statement'
     HASH_PAGE_ADMIN_HOME: ClassVar[str] = '/admin'
     HASH_PAGE_CONTACT: ClassVar[str] = '/contact'
+    HASH_PAGE_DATA_RETENTION_SCHEDULE: ClassVar[str] = '/retention-schedule'
     HASH_PAGE_ERROR_NO_PERMISSION: ClassVar[str] = '/error'
     HASH_PAGE_HOME: ClassVar[str] = '/'
     HASH_PAGE_LICENSE: ClassVar[str] = '/license'
     HASH_PAGE_PRIVACY_POLICY: ClassVar[str] = '/privacy-policy'
-    HASH_PAGE_DATA_RETENTION_SCHEDULE: ClassVar[str] = '/retention-schedule'
     HASH_PAGE_SERVICES: ClassVar[str] = '/services'
     # HASH_PAGE_STORE_ADMIN: ClassVar[str] = '/store/admin'
     HASH_PAGE_STORE_BASKET: ClassVar[str] = '/store/basket'

models/model_view_home.py

@@ -3,35 +3,22 @@ Project:    PARTS Website
 Author:     Edward Middleton-Smith
             Precision And Research Technology Systems Limited
 
-Technology: View Models
+Technology: Core View Models
 Feature:    Home View Model
 
 Description:
 Data model for home view
 """
 
-# IMPORTS
-# VARIABLE INSTANTIATION
-# METHODS
-
-# IMPORTS
 # internal
 from models.model_view_base import Model_View_Base
 # from routes import bp_home
 # external
 
-
-# VARIABLE INSTANTIATION
-
-
-# CLASSES
 class Model_View_Home(Model_View_Base):
-    # Attributes
     @property
     def title(self):
         return 'Home'
-    
     def __init__(self, hash_page_current=Model_View_Base.HASH_PAGE_HOME):
-        # Constructor
         super().__init__(hash_page_current=hash_page_current)
     

models/model_view_license.py

@@ -0,0 +1,24 @@
+"""
+Project:    PARTS Website
+Author:     Edward Middleton-Smith
+            Precision And Research Technology Systems Limited
+
+Technology: Legal View Models
+Feature:    License View Model
+
+Description:
+Data model for license view
+"""
+
+# internal
+from models.model_view_base import Model_View_Base
+# from routes import bp_home
+# external
+
+class Model_View_License(Model_View_Base):
+    @property
+    def title(self):
+        return 'License'
+    def __init__(self, hash_page_current=Model_View_Base.HASH_PAGE_LICENSE):
+        super().__init__(hash_page_current=hash_page_current)
+    

models/model_view_privacy_policy.py

@@ -0,0 +1,24 @@
+"""
+Project:    PARTS Website
+Author:     Edward Middleton-Smith
+            Precision And Research Technology Systems Limited
+
+Technology: Legal View Models
+Feature:    Privacy Policy View Model
+
+Description:
+Data model for privacy policy view
+"""
+
+# internal
+from models.model_view_base import Model_View_Base
+# from routes import bp_home
+# external
+
+class Model_View_Privacy_Policy(Model_View_Base):
+    @property
+    def title(self):
+        return 'Privacy Policy'
+    def __init__(self, hash_page_current=Model_View_Base.HASH_PAGE_PRIVACY_POLICY):
+        super().__init__(hash_page_current=hash_page_current)
+    

models/model_view_retention_schedule.py

@@ -0,0 +1,24 @@
+"""
+Project:    PARTS Website
+Author:     Edward Middleton-Smith
+            Precision And Research Technology Systems Limited
+
+Technology: Legal View Models
+Feature:    Retention Schedule View Model
+
+Description:
+Data model for retention schedule view
+"""
+
+# internal
+from models.model_view_base import Model_View_Base
+# from routes import bp_home
+# external
+
+class Model_View_Retention_Schedule(Model_View_Base):
+    @property
+    def title(self):
+        return 'Retention Schedule'
+    def __init__(self, hash_page_current=Model_View_Base.HASH_PAGE_DATA_RETENTION_SCHEDULE):
+        super().__init__(hash_page_current=hash_page_current)
+    

package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "devDependencies": {
         "@babel/core": "^7.25.2",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/preset-env": "^7.25.4",
         "babel-loader": "^9.1.3",
         "css-loader": "^7.1.2",

package.json

@@ -24,6 +24,7 @@
   "homepage": "https://github.com/Teddy-1024/parts_website#readme",
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.25.4",
     "babel-loader": "^9.1.3",
     "css-loader": "^7.1.2",

routing/legal.py

@@ -12,7 +12,12 @@ Initializes the Flask application, sets the configuration based on the environme
 
 # IMPORTS
 # internal
-from models.model_view_home import Model_View_Home
+# from models.model_view_home import Model_View_Home
+from models.model_view_license import Model_View_License
+from models.model_view_privacy_policy import Model_View_Privacy_Policy
+from models.model_view_accessibility_report import Model_View_Accessibility_Report
+from models.model_view_accessibility_statement import Model_View_Accessibility_Statement
+from models.model_view_retention_schedule import Model_View_Retention_Schedule
 import lib.argument_validation as av
 # external
 from flask import Flask, render_template, jsonify, request,  render_template_string, send_from_directory, redirect, url_for, session, Blueprint, current_app
@@ -29,7 +34,7 @@ routes_legal = Blueprint('routes_legal', __name__)
 @routes_legal.route('/license', methods=['GET'])
 def license():
     try:
-        model = Model_View_Home()
+        model = Model_View_License()
         html_body = render_template('pages/legal/_license.html', model = model)
     except Exception as e:
         return str(e)
@@ -37,7 +42,7 @@ def license():
 @routes_legal.route('/accessibility-statement', methods=['GET'])
 def accessibility_statement():
     try:
-        model = Model_View_Home()
+        model = Model_View_Accessibility_Statement()
         html_body = render_template('pages/legal/_accessibility_statement.html', model = model)
     except Exception as e:
         return str(e)
@@ -45,7 +50,7 @@ def accessibility_statement():
 @routes_legal.route('/accessibility-report', methods=['GET'])
 def accessibility_report():
     try:
-        model = Model_View_Home()
+        model = Model_View_Accessibility_Report()
         html_body = render_template('pages/legal/_accessibility_report.html', model = model)
     except Exception as e:
         return str(e)
@@ -53,16 +58,16 @@ def accessibility_report():
 @routes_legal.route('/retention-schedule', methods=['GET'])
 def retention_schedule():
     try:
-        model = Model_View_Home()
+        model = Model_View_Retention_Schedule()
         html_body = render_template('pages/legal/_retention_schedule.html', model = model)
     except Exception as e:
         return str(e)
     return html_body
-@routes_legal.route('/privacy-notice', methods=['GET'])
-def privacy_notice():
+@routes_legal.route('/privacy-policy', methods=['GET'])
+def privacy_policy():
     try:
-        model = Model_View_Home()
-        html_body = render_template('pages/legal/_privacy_notice.html', model = model)
+        model = Model_View_Privacy_Policy()
+        html_body = render_template('pages/legal/_privacy_policy.html', model = model)
     except Exception as e:
         return str(e)
     return html_body

static/dist/css/466.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/core_admin_home.bundle.css

@@ -1,4 +1,3 @@
-
 #pageBody > .card:first-of-type {
     width: 80%;
 }

static/dist/css/core_contact.bundle.css

@@ -1,5 +1,4 @@
 
-
 #pageBody > .card:first-of-type{
     flex-grow: 1;
 }

static/dist/css/core_home.bundle.css

@@ -1,6 +1,5 @@
 
-
-.page-body > * {
+#pageBody > * {
     height: 100%;
 }
 #pageBody > * :first-child{
@@ -24,3 +23,11 @@ img {
   background-image: url("/static/images/Tag_Molly1.png");
 }
 */
+
+#pageBody h2 {
+    width: 100%;
+}
+#pageBody button.navContact {
+    width: fit-content;
+}
+

static/dist/css/core_services.bundle.css

@@ -1,4 +1,3 @@
-
 #pageBody > .card {
     padding-left: 5vw;
     padding-right: 5vw;

static/dist/css/legal_accessibility_statement.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/legal_accessibility_statement.css

@@ -0,0 +1,2 @@
+
+

static/dist/css/legal_license.bundle.css

@@ -1,5 +1,4 @@
 
-
 .page-body > * {
 }
 #pageBody > * :first-child{

static/dist/css/legal_privacy_policy.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/legal_privacy_policy.css

@@ -0,0 +1,2 @@
+
+

static/dist/css/legal_retention_schedule.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/legal_retention_schedule.css

@@ -0,0 +1,2 @@
+
+

static/dist/css/main.bundle.css

@@ -0,0 +1,702 @@
+
+
+
+
+
+
+
+
+
+
+
+
+#overlayConfirm {
+    position: absolute;
+    left: 25vw;
+    width: 50vw;
+    height: 50vh;
+}
+.img-product {
+    max-width: 20vh;
+    max-height: 20vh;
+    border-radius: 3vh;
+    justify-self: left;
+}
+
+.img-thumbnail {
+    max-width: 10vh;
+    max-height: 10vh;
+    border-radius: 3vh;
+    justify-self: left;
+}
+
+.buttonAdd2Basket {
+    background-color: var(--c_blue_pastel);
+    color: var(--c_blue_dark);
+    border-color: var(--c_blue_dark);
+}
+
+#buttonCheckout, .buttonBuyNow {
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark);
+    border-color: var(--c_purple_dark);
+}
+
+.button-increment, .button-decrement {
+    border: 2px solid darkgrey;
+    background-color: lightgray;
+    margin: 1vh 1vh;
+    width: 2.5vh;
+    height: 2.5vh;
+    border-radius: 1.25vh;
+    font-size: 2vh;
+}
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+#basket {
+    max-width: 100%;
+}
+
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/*
+/* Base styles *
+@import 'lib/reset.css';
+@import 'lib/typography.css';
+@import 'lib/variables.css';
+@import 'lib/utils.css';
+
+/* Layout styles *
+@import 'layouts/header.css';
+@import 'layouts/footer.css';
+
+/* Component styles *
+@import 'components/button.css';
+@import 'components/card.css';
+@import 'components/dialog.css';
+@import 'components/form.css';
+@import 'components/modal.css';
+@import 'components/navigation.css';
+@import 'components/overlay.css';
+
+/* Section styles *
+@import 'sections/store.css';
+
+/* Page-specific styles *
+@import 'pages/page_admin.css';
+@import 'pages/page_contact.css';
+@import 'pages/page_home.css';
+@import 'pages/page_license.css';
+@import 'pages/page_services.css';
+@import 'pages/page_store_home.css';
+@import 'pages/page_store_product_permutations.css';
+@import 'pages/page_store_stock_items.css';
+*
+
+/* Theme styles *
+@import 'themes/light.css';
+/* Uncomment the line below to enable dark theme *
+/* @import 'themes/dark.css'; *
+
+
+*/
+
+/* Custom styles */
+/* Add any custom styles or overrides here */
+
+body {
+    /* Example of using a CSS variable defined in variables.css */
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: var(--font-family-base);
+}
+
+/* You can add more global styles here */
+
+
+:root {
+    /* Declare global variables */
+    --c_purple: #5B29FF;
+    --c_purple_pastel: #D1D1FF;
+    --c_purple_light: #C6BDFF;
+    --c_purple_dark: #4700B3;
+    --c_blue: #0044FF;
+    --c_blue_pastel: #B8E0FF;
+    --c_blue_light: #73E8FF;
+    --c_blue_dark: #003ADB;
+}
+
+*{
+    /*box-sizing: border-box; */
+    margin: 0;
+}
+
+script, link {
+    display: none !important;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    font-family: Arial;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */
+    height: 100vh;
+    max-height: 100%;
+}
+
+/*
+h1, h2, h3, h4, h5, p, a, label {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+*/
+
+h1 {
+    font-size: 24px;
+}
+
+h2 {
+    font-size: 22px;
+}
+
+h3 {
+    font-size: 18px;
+    margin-top: 1vh;
+}
+
+h4 {
+    font-size: 13px;
+    margin: 1vh;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h5 {
+    font-size: 11px;
+    margin: 1vh;
+}
+
+/* Style the top navigation bar */
+.topnav {
+    /* overflow: hidden; */
+    /* background-color: var(--c_purple); */
+    border-bottom-left-radius: 2.5vh;
+    border-bottom-right-radius: 2.5vh;
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    flex-direction: row;
+    font-weight: bold;
+    font-size: 1vh;
+    max-height: 15vh;
+    height: 15vh;
+    align-items: flex-start;
+}
+
+/* Style the topnav links */
+.topnav a, .topnav label, .topnav p, .topnav h1 {
+    float: left;
+    display: flex;
+    color: white;
+    text-align: center;
+    /* padding: 14px 16px; */
+    text-decoration: none;
+    width: 100%;
+    max-height: 15vh;
+    font-weight: normal;
+    /* font-size: 20px; */
+    justify-content: center;
+}
+/*
+.topnav a {
+    padding: 3vh 2vw;
+}
+*/
+
+/* Change color on hover */
+.topnav a:hover {
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark);
+}
+
+.topnav > .container {
+    max-width: 50%;
+    height: 100%;
+    align-items: center;
+    align-self: center;
+    /* align-content: center; */
+    /* width: fit-content; */
+    display: flex;
+}
+
+.topnav select {
+    padding: 1vh;
+    margin: 1vh;
+    border-radius: 1vh;
+    /* background-color: var(--c_purple_light); */
+    color: var(--c_purple_dark);
+    border: 2px solid white;
+    font-weight: bold;
+    text-align: center;
+}
+.topnav select .collapsed {
+    width: 5vw;
+}
+.topnav select .expanded {
+    width: 25vw;
+}
+
+
+.company-name {
+    font-size: min(28px, calc(1vh * 7));
+    color: white;
+}
+@media screen and (max-width: 450px) {
+    .company-name {
+        font-size: min(24px, calc(1vh * 7));
+    }
+}
+
+
+#pageBody {
+    height: 69vh !important;
+    padding: 1vh;
+    padding-left: 1vw;
+    padding-right: 1vw;
+    margin: 1vh;
+    margin-left: 0;
+    margin-right: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 98vw;
+
+}
+
+.page-body > * {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    align-self: center;
+    font-size: min(20px, calc(1vh * 6));
+}
+#pageBody > * > * {
+    width: 100%;
+    align-self: center;
+    padding-top: 1vh;
+    padding-bottom: 1vh;
+    color: var(--c_purple_dark);
+}
+#pageBody > .card {
+    height: fit-content;
+    margin-top: 1vh;
+}
+#pageBody > .card:first-of-type{
+    margin-top: 0vh;
+    top: 0;
+}
+#pageBody > .card:last-of-type {
+    /* margin-bottom: 1vh; */
+}
+/* Create two unequal columns that floats next to each other *
+/* Left column *
+.leftcolumn {   
+    float: left;
+    width: 70%;
+    display: flex;
+    flex-wrap: wrap;
+    /* min-width: fit-content; *
+    align-items: center;
+    justify-content: center;
+}
+
+/* Right column *
+.rightcolumn {
+    float: left;
+    width: 30%;
+    display: flex;
+    flex-wrap: wrap;
+    /* min-width: fit-content; only on store?? *
+    /* background-color: #f1f1f1; *
+    padding-left: 20px;
+    height: fit-content;
+    align-items: center;
+    justify-content: center;
+}
+*/
+
+/* Fake image */
+.fakeimg {
+    background-color: var(--c_purple_light);
+    width: 100%;
+    padding: 20px;
+}
+
+img, video {
+    border-radius: 3vh;
+}
+
+/* header image */
+img.header-logo {
+    max-height: 15vh;
+    max-width: 20vw;
+    cursor: pointer;
+    border-radius: 5vh !important;
+}
+
+/* icon images */
+.img-icon {
+    max-width: 16vh;
+    max-height: 8vh;
+    border-radius: 0;
+}
+
+.container-icon-label {
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.container-icon-label > * {
+    display: inline-flex;
+    margin-left: 1vh;
+    margin-right: 1vh;
+}
+
+.header > .container:first-of-type {
+    max-width: 25%;
+    justify-self: left;
+}
+.header > .container:last-of-type {
+    max-width: 75%;
+    justify-self: left;
+}
+
+/* Add a card effect for articles */
+.card {
+    background-color: var(--c_purple_pastel);
+    padding: 1vh;
+    margin: 1vh;
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 4vh;
+    /* min-width: fit-content; */
+    position: relative;
+    height: fit-content;
+    max-width: 80vw;
+    padding-left: 2.5vw;
+    padding-right: 2.5vw;
+}
+
+.card.subcard {
+    margin-top: 0;
+}
+
+.header.card {
+    border-radius: 2.5vh;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.container {
+    flex: 1;
+    margin: 0px;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: flex-start;
+    /* max-width: 100%; */
+    /* min-width: fit-content; */
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.row {
+    display: flex; 
+    flex-direction: row;
+    width: 100%;
+    /* min-width: fit-content; */
+}
+
+.container > .card:first-of-type {
+    margin-top: none;
+}
+
+
+/* Clear floats after the columns 
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+*/
+/* Footer */
+.footer {
+    padding: 1vh;
+    padding-left: 1vw;
+    padding-right: 1vw;
+    text-align: center;
+    margin: 0;
+    height: 8vh !important;
+    overflow-y: auto;
+    background-color: var(--c_purple_pastel);
+    border-top-left-radius: 2.5vh;
+    border-top-right-radius: 2.5vh;
+    position: absolute;
+    /* top: 2.5vh; */
+    bottom: 0;
+    width: 98vw;
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+
+/*
+/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *
+@media screen and (max-width: 800px) {
+    .leftcolumn, .rightcolumn {   
+        width: 100%;
+        /* padding: 0; *
+    }
+}
+
+/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *
+@media screen and (max-width: 400px) {
+    .topnav a {
+        float: none;
+        width: 100%;
+    }
+}
+*/
+
+/* input container 
+    margin-top: 3vh;
+    */
+.container-input {
+    padding: 1vh;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.container-input > label {
+    width: 100%;
+    margin-bottom: 1vh;
+    margin-top: 0;
+}
+
+.container-input:not(:nth-child(3)) > label {
+    margin-top: 1vh;
+}
+
+.container-input > input, .container-input > textarea {
+    border: 2px solid var(--c_purple);
+    max-width: 66%;
+    min-width: 20%;
+    padding: 1vh;
+}
+
+.label-title {
+    width: 100%;
+}
+
+button, .button-submit, input[type="submit"] {
+    font-size: 20px;
+    font-weight: bold;
+    border: 4px solid;
+    border-radius: 2vh;
+    padding: 1vh 2vh 1vh 2vh;
+    margin: 0.5vh;
+    /*
+    background-color: var(--c_blue_pastel);
+    color: var(--c_blue_dark);
+    border-color: var(--c_blue_dark);
+    */
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark);
+    border-color: var(--c_purple_dark);
+}
+button.navContactUs {
+    border: 4px solid var(--c_purple_dark);
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark) !important;
+    border-radius: 2vh;
+    width: 180px !important;
+}
+button:hover, input[type="submit"]:hover, #overlayHamburger .row *:hover {
+    text-decoration: underline;
+}
+#buttonHamburger:hover {
+    text-decoration: none;
+}
+
+.delete {
+    text-decoration: underline;
+}
+
+
+/* Overlay modal */
+.overlay {
+    /*
+    display: none;
+    */
+    position: fixed;
+    top: 15vh;
+    right: 0;
+    width: 100px;
+    /* height: 50%; */ 
+    background: var(--c_purple_pastel);
+    justify-content: right;
+    align-items: right;
+    align-self: right;
+    z-index: 999;
+}
+.overlay.expanded {
+    display: block !important;
+}
+.collapsed {
+    display: none !important;
+}
+
+#overlayHamburger {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 80%;
+}
+.hamburger {
+    border: 2px solid var(--c_purple_dark);
+    border-radius: 4px;
+}
+.hamburger:first-child {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+.hamburger:last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.hamburger > * {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    color: var(--c_purple_dark);
+    font-weight: bold;
+    font-size: 18px;
+    /* height: 18px; */
+}
+.hamburger > :hover {
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark);
+}
+.hamburger > * > * {
+    width: 100%;
+    /*
+    margin-top: 4.5px;
+    margin-bottom: 4.5px;
+    */
+}
+.hamburger > .container {
+    padding-top: 4.5px;
+    padding-bottom: 4.5px;
+}
+
+ul {
+    max-width: 90%;
+}
+li {
+    text-align: left;
+    font-size: 18px;
+}
+
+
+.dirty {
+    /* color: var(--c_purple_dark); */
+    border-color: var(--c_purple_dark);
+}
+td.dirty {
+    background-color: var(--c_purple_dark);
+}
+
+
+/* Tables */
+#pageBody > *, button {
+    font-size: min(14px, calc(1vh * 5)) !important;
+}
+thead, tbody {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
+
+th {
+    
+}
+td {
+    font-size: min(14px, calc(1vh * 5));
+}
+
+th, td {
+    min-width: fit-content;
+}
+tr:not(:last-child) > td {
+    border-bottom: 1px dashed var(--c_purple_dark);
+}
+td > table > tbody > tr > td {
+    border: none !important;
+}
+tr {
+    min-height: 1px;
+    border-bottom: 1px solid var(--c_purple_dark);
+    border-top: 1px solid var(--c_purple_dark);
+    padding-bottom: 1vh;
+    background-color: transparent;
+}
+
+/*
+.row-new {
+    visibility: hidden;
+}
+*/
+

static/dist/css/main.css

@@ -69,13 +69,28 @@
     min-width: fit-content;
 }
 
-/* Base styles */
+/*
+/* Base styles *
+@import 'lib/reset.css';
+@import 'lib/typography.css';
+@import 'lib/variables.css';
+@import 'lib/utils.css';
 
-/* Layout styles */
+/* Layout styles *
+@import 'layouts/header.css';
+@import 'layouts/footer.css';
 
-/* Component styles */
+/* Component styles *
+@import 'components/button.css';
+@import 'components/card.css';
+@import 'components/dialog.css';
+@import 'components/form.css';
+@import 'components/modal.css';
+@import 'components/navigation.css';
+@import 'components/overlay.css';
 
-/* Section styles */
+/* Section styles *
+@import 'sections/store.css';
 
 /* Page-specific styles *
 @import 'pages/page_admin.css';
@@ -86,12 +101,15 @@
 @import 'pages/page_store_home.css';
 @import 'pages/page_store_product_permutations.css';
 @import 'pages/page_store_stock_items.css';
-*/
+*
 
 /* Theme styles *
 @import 'themes/light.css';
-/* Uncomment the line below to enable dark theme */
-/* @import 'themes/dark.css'; */
+/* Uncomment the line below to enable dark theme *
+/* @import 'themes/dark.css'; *
+
+
+*/
 
 /* Custom styles */
 /* Add any custom styles or overrides here */

static/dist/css/store_home.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/store_product_categories.bundle.css

@@ -0,0 +1,62 @@
+
+
+td.display-order, th.display-order {
+    width: 8% !important;
+}
+td.code, th.code {
+    width: 15% !important;
+}
+td.name, th.name {
+    width: 25% !important;
+}
+td.description, th.description {
+    width: 35% !important;
+}
+td.access_level, th.access_level {
+    width: 10% !important;
+}
+td.active, th.active {
+    width: 7% !important;
+}
+
+/*
+.row-new {
+    visibility: hidden;
+}
+*/
+
+textarea {
+    width: 95% !important;
+}
+
+select {
+    width: 100% !important;
+}
+
+input {
+    width: 90% !important;
+}
+
+td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
+    border: 2px solid var(--c_purple);
+    border-radius: 0.5vh;
+}
+
+#tableMain tbody tr td button {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    text-decoration: none;
+}
+
+#tableMain tbody tr td table thead tr th.id_variation_type, #tableMain tbody tr td table tbody tr td.id_variation_type, #tableMain tbody tr td table thead tr th.id_variation, #tableMain tbody tr td table tbody tr td.id_variation {
+    width: 47.5%;
+}
+
+
+/*
+select.id_variation, select.id_variation_type {
+    max-width: 40% !important;
+}
+*/
+

static/dist/css/store_product_permutations.bundle.css

@@ -0,0 +1,61 @@
+
+
+td.category, th.category {
+    width: 16% !important;
+}
+td.product, th.product {
+    width: 23% !important;
+}
+td.variations, th.variations {
+    width: 19% !important;
+}
+td.quantity-stock, th.quantity-stock {
+    width: 10% !important;
+}
+td.quantity-min, th.quantity-min {
+    width: 10% !important;
+}
+td.quantity-max, th.quantity-max {
+    width: 10% !important;
+}
+td.cost-local-VAT-incl, th.cost-local-VAT-incl {
+    width: 6% !important;
+}
+td.detail, th.detail {
+    width: 6% !important;
+}
+
+textarea {
+    width: 95% !important;
+}
+
+select {
+    width: 100% !important;
+}
+
+input {
+    width: 90% !important;
+}
+
+td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
+    border: 2px solid var(--c_purple);
+    border-radius: 0.5vh;
+}
+
+#tableMain tbody tr td button {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    text-decoration: none;
+}
+
+#tableMain tbody tr td table thead tr th.id_variation_type, #tableMain tbody tr td table tbody tr td.id_variation_type, #tableMain tbody tr td table thead tr th.id_variation, #tableMain tbody tr td table tbody tr td.id_variation {
+    width: 47.5%;
+}
+
+/*
+select.id_variation, select.id_variation_type {
+    max-width: 40% !important;
+}
+*/
+

static/dist/css/store_stock_items.bundle.css

@@ -0,0 +1,40 @@
+
+th, td {
+    min-width: fit-content;
+}
+
+
+
+.category {
+    width: 12%;
+}
+.product {
+    width: 12%;
+}
+.variations {
+    width: 12%;
+}
+.currency {
+    width: 12%;
+}
+.cost-local-VAT-incl {
+    width: 10%;
+}
+.date-puchased, .date-received, .date-unsealed, .date-expiration, .date-consumed {
+    width: 6%;
+}
+.storage-location {
+    width: 12%;
+}
+.active {
+    width: 5%;
+}
+
+.row-new {
+    visibility: hidden;
+}
+
+textarea, select, input {
+    width: 100% !important;
+}
+

static/dist/js/legal_accessibility_statement.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var r,e={780:()=>{},711:()=>{}},o={};function t(r){var a=o[r];if(void 0!==a)return a.exports;var n=o[r]={exports:{}};return e[r](n,n.exports,t),n.exports}t.m=e,r=[],t.O=(e,o,a,n)=>{if(!o){var i=1/0;for(f=0;f<r.length;f++){for(var[o,a,n]=r[f],p=!0,v=0;v<o.length;v++)(!1&n||i>=n)&&Object.keys(t.O).every((r=>t.O[r](o[v])))?o.splice(v--,1):(p=!1,n<i&&(i=n));if(p){r.splice(f--,1);var s=a();void 0!==s&&(e=s)}}return e}n=n||0;for(var f=r.length;f>0&&r[f-1][2]>n;f--)r[f]=r[f-1];r[f]=[o,a,n]},t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={841:0,466:0};t.O.j=e=>0===r[e];var e=(e,o)=>{var a,n,[i,p,v]=o,s=0;if(i.some((e=>0!==r[e]))){for(a in p)t.o(p,a)&&(t.m[a]=p[a]);if(v)var f=v(t)}for(e&&e(o);s<i.length;s++)n=i[s],t.o(r,n)&&r[n]&&r[n][0](),r[n]=0;return t.O(f)},o=self.webpackChunkapp=self.webpackChunkapp||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),t.O(void 0,[466],(()=>t(711)));var a=t.O(void 0,[466],(()=>t(780)));a=t.O(a)})();

static/dist/js/legal_privacy_policy.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var r,e={713:()=>{},711:()=>{}},o={};function t(r){var a=o[r];if(void 0!==a)return a.exports;var n=o[r]={exports:{}};return e[r](n,n.exports,t),n.exports}t.m=e,r=[],t.O=(e,o,a,n)=>{if(!o){var i=1/0;for(f=0;f<r.length;f++){for(var[o,a,n]=r[f],p=!0,v=0;v<o.length;v++)(!1&n||i>=n)&&Object.keys(t.O).every((r=>t.O[r](o[v])))?o.splice(v--,1):(p=!1,n<i&&(i=n));if(p){r.splice(f--,1);var s=a();void 0!==s&&(e=s)}}return e}n=n||0;for(var f=r.length;f>0&&r[f-1][2]>n;f--)r[f]=r[f-1];r[f]=[o,a,n]},t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={364:0,466:0};t.O.j=e=>0===r[e];var e=(e,o)=>{var a,n,[i,p,v]=o,s=0;if(i.some((e=>0!==r[e]))){for(a in p)t.o(p,a)&&(t.m[a]=p[a]);if(v)var f=v(t)}for(e&&e(o);s<i.length;s++)n=i[s],t.o(r,n)&&r[n]&&r[n][0](),r[n]=0;return t.O(f)},o=self.webpackChunkapp=self.webpackChunkapp||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),t.O(void 0,[466],(()=>t(711)));var a=t.O(void 0,[466],(()=>t(713)));a=t.O(a)})();

static/dist/js/legal_retention_schedule.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var r,e={930:()=>{},711:()=>{}},o={};function t(r){var a=o[r];if(void 0!==a)return a.exports;var n=o[r]={exports:{}};return e[r](n,n.exports,t),n.exports}t.m=e,r=[],t.O=(e,o,a,n)=>{if(!o){var i=1/0;for(f=0;f<r.length;f++){for(var[o,a,n]=r[f],p=!0,v=0;v<o.length;v++)(!1&n||i>=n)&&Object.keys(t.O).every((r=>t.O[r](o[v])))?o.splice(v--,1):(p=!1,n<i&&(i=n));if(p){r.splice(f--,1);var s=a();void 0!==s&&(e=s)}}return e}n=n||0;for(var f=r.length;f>0&&r[f-1][2]>n;f--)r[f]=r[f-1];r[f]=[o,a,n]},t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={607:0,466:0};t.O.j=e=>0===r[e];var e=(e,o)=>{var a,n,[i,p,v]=o,s=0;if(i.some((e=>0!==r[e]))){for(a in p)t.o(p,a)&&(t.m[a]=p[a]);if(v)var f=v(t)}for(e&&e(o);s<i.length;s++)n=i[s],t.o(r,n)&&r[n]&&r[n][0](),r[n]=0;return t.O(f)},o=self.webpackChunkapp=self.webpackChunkapp||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),t.O(void 0,[466],(()=>t(711)));var a=t.O(void 0,[466],(()=>t(930)));a=t.O(a)})();

static/dist/js/license.bundle.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

static/dist/js/services.bundle.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

static/js/DEPRECATED/routing.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation";
+import Validation from "./lib/validation.js";
 
 function mapHashToController(hash) {
     if (hash == null) return mapHashToController(hashPageHome);

static/js/components/input_date.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation";
+import Validation from "./lib/validation.js";
 
 
 // Date picker inputs

static/js/components/table.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation";
+import Validation from "./lib/validation.js";
 
 
 export default class Table {

static/js/components/textarea.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation";
+import Validation from "./lib/validation.js";
 
 export default class TextArea {
     removeBlankTextAreaLines(textarea) {

static/js/dom.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation";
+import Validation from "./lib/validation.js";
 
 // Module for DOM manipulation
 export default class DOM {

static/js/lib/common.js

@@ -1,5 +1,5 @@
 
-import Validation from "./validation";
+import Validation from "./validation.js";
 
 export default class Common {
     static parseCSSPropertyToFloat(element, propertyName) {

static/js/lib/local_storage.js

@@ -1,5 +1,5 @@
 
-import Validation from "./validation";
+import Validation from "./validation.js";
 
 export default class LocalStorage {
 /*

static/js/pages/base.js

@@ -3,10 +3,16 @@ import Events from "../lib/events.js";
 import LocalStorage from "../lib/local_storage.js";
 import API from "../api.js";
 import DOM from "../dom.js";
-import { router } from "../router.js";
 
-export class BasePage {
-    constructor() {
+export default class BasePage {
+    constructor(router) {
+        if (!router) {
+            throw new Error("Router is required");
+        }
+        else {
+            console.log("initialising with router: ", router);
+        }
+        this.router = router;
         this.title = titlePageCurrent;
         // this.hash = hashPageCurrent;
         if (this.constructor === BasePage) {
@@ -74,51 +80,51 @@ export class BasePage {
         this.hookupButtonNavAdminHome();
     }
     hookupButtonNavHome() {
-        Events.initialiseEventHandler('.' + flagNavHome, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavHome, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageHome);
+                this.router.navigateToHash(hashPageHome);
             });
         });
     }
     hookupButtonNavServices() {        
-        Events.initialiseEventHandler('.' + flagNavServices, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavServices, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
                 console.log('going to services page');
-                router.navigateToHash(hashPageServices);
+                this.router.navigateToHash(hashPageServices);
             });
         });
     }
     hookupButtonNavContact() {        
-        Events.initialiseEventHandler('.' + flagNavContact, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavContact, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageContact);
+                this.router.navigateToHash(hashPageContact);
             });
         });
     }
     hookupButtonNavUserAccount() {        
-        Events.initialiseEventHandler('.' + flagNavUserAccount, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavUserAccount, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageUserAccount);
+                this.router.navigateToHash(hashPageUserAccount);
             });
         });
     }
     hookupButtonNavUserLogout() {        
-        Events.initialiseEventHandler('.' + flagNavUserLogout, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavUserLogout, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageUserLogout);
+                this.router.navigateToHash(hashPageUserLogout);
             });
         });
     }
     hookupButtonNavUserLogin() {        
-        Events.initialiseEventHandler('.' + flagNavUserLogin, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavUserLogin, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                // router.navigateToHash(hashPageUserLogin);
+                // this.router.navigateToHash(hashPageUserLogin);
                 /*
                 let dataRequest = {};
                 dataRequest[keyCallback] = hashPageCurrent;
@@ -128,7 +134,7 @@ export class BasePage {
                 API.loginUser()
                     .then(function(response) {
                     if (response.Success) {
-                        window.app.router.navigateToUrl(response[keyCallback], null, false);
+                        this.router.navigateToUrl(response[keyCallback], null, false); // window.app.
                     } else {
                         DOM.alertError("Error", response.Message);
                     }
@@ -137,76 +143,76 @@ export class BasePage {
         });
     }
     hookupButtonNavStoreHome() {        
-        Events.initialiseEventHandler('.' + flagNavStoreHome, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavStoreHome, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageStoreHome);
+                this.router.navigateToHash(hashPageStoreHome);
             });
         });
     }
     hookupButtonNavStoreProductCategories() {
-        Events.initialiseEventHandler('.' + flagNavStoreProductCategories, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductCategories, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageStoreProductCategories);
+                this.router.navigateToHash(hashPageStoreProductCategories);
             });
         });
     }
     hookupButtonNavStoreProducts() {
-        Events.initialiseEventHandler('.' + flagNavStoreProducts, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavStoreProducts, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageStoreProducts);
+                this.router.navigateToHash(hashPageStoreProducts);
             });
         });
     }
     hookupButtonNavStoreProductPermutations() {
-        Events.initialiseEventHandler('.' + flagNavStoreProductPermutations, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductPermutations, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageStoreProductPermutations);
+                this.router.navigateToHash(hashPageStoreProductPermutations);
             });
         });
     }
     hookupButtonNavStoreProductPrices() {
-        Events.initialiseEventHandler('.' + flagNavStoreProductPrices, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductPrices, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageStoreProductPrices);
+                this.router.navigateToHash(hashPageStoreProductPrices);
             });
         });
     }
     hookupButtonNavStoreProductVariations() {
-        Events.initialiseEventHandler('.' + flagNavStoreProductVariations, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductVariations, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageStoreProductVariations);
+                this.router.navigateToHash(hashPageStoreProductVariations);
             });
         });
     }
     hookupButtonNavStoreStockItems() {
-        Events.initialiseEventHandler('.' + flagNavStoreStockItems, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavStoreStockItems, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageStoreStockItems);
+                this.router.navigateToHash(hashPageStoreStockItems);
             });
         });
     }
     hookupButtonNavAdminHome() {
-        Events.initialiseEventHandler('.' + flagNavAdminHome, flagInitialised, function(navigator) {
-            navigator.addEventListener("click", function(event) {
+        Events.initialiseEventHandler('.' + flagNavAdminHome, flagInitialised, (navigator) => {
+            navigator.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageAdminHome);
+                this.router.navigateToHash(hashPageAdminHome);
             });
         });
     }
 
     hookupImagesLogo() {
         let selectorImagesLogo = "img." + flagImageLogo;
-        Events.initialiseEventHandler(selectorImagesLogo, flagInitialised, function(imageLogo) {
-            imageLogo.addEventListener("click", function(event) {
+        Events.initialiseEventHandler(selectorImagesLogo, flagInitialised, (buttonImageLogo) => {
+            buttonImageLogo.addEventListener("click", (event) => {
                 event.stopPropagation();
-                router.navigateToHash(hashPageHome);
+                this.router.navigateToHash(hashPageHome);
             });
         });
     }

static/js/pages/base_table.js

@@ -1,17 +1,17 @@
 
 import Events from "../lib/events.js";
 import LocalStorage from "../lib/local_storage.js";
-import Validation from "../lib/validation";
-import { BasePage } from "./base.js";
+import Validation from "../lib/validation.js";
+import BasePage from "./base.js";
 import API from "../api.js";
 import DOM from "../dom.js";
 
-export class TableBasePage extends BasePage {
+export default class TableBasePage extends BasePage {
     // callFilterTableContent
     // callSaveTableContent
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
         /*
         if (!this.constructor.callFilterTableContent) {
             throw new Error(`Class ${this.constructor.name} must have a static callFilterTableContent method attribute that takes a single argument - the filters as json.`);

static/js/pages/core/admin_home.js

@@ -1,13 +1,12 @@
 
 import Events from "../../lib/events.js";
-import { BasePage } from "../base.js";
-// import { router } from "../../router.js";
+import BasePage from "../base.js";
 
-export class PageAdminHome extends BasePage {
+export default class PageAdminHome extends BasePage {
     static hash = hashPageAdminHome;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {
@@ -29,14 +28,14 @@ export class PageAdminHome extends BasePage {
     hookupButtonNavAdminStoreStripeProducts() {
         Events.initialiseEventHandler('.' + flagNavAdminStoreStripeProducts, flagInitialised, function(navigator) {
             navigator.addEventListener("click", function(event) {
-                router.navigateToHash(hashPageAdminStoreStripeProducts);
+                this.router.navigateToHash(hashPageAdminStoreStripeProducts);
             });
         });
     }
     hookupButtonNavAdminStoreStripePrices() {
         Events.initialiseEventHandler('.' + flagNavAdminStoreStripePrices, flagInitialised, function(navigator) {
             navigator.addEventListener("click", function(event) {
-                router.navigateToHash(hashPageAdminStoreStripePrices);
+                this.router.navigateToHash(hashPageAdminStoreStripePrices);
             });
         });
     }

static/js/pages/core/contact.js

@@ -1,11 +1,11 @@
 
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageContact extends BasePage {
+export default class PageContact extends BasePage {
     static hash = hashPageContact;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/core/home.js

@@ -1,11 +1,11 @@
 
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageHome extends BasePage {
+export default class PageHome extends BasePage {
     static hash = hashPageHome;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/core/services.js

@@ -1,11 +1,11 @@
 
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageServices extends BasePage {
+export default class PageServices extends BasePage {
     static hash = hashPageServices;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/legal/accessibility_report.js

@@ -0,0 +1,17 @@
+import BasePage from "../base.js";
+
+export default class PageAccessibilityReport extends BasePage {
+    static hash = hashPageAccessibilityReport;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/legal/accessibility_statement.js

@@ -1,10 +1,10 @@
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageAccessibilityStatement extends BasePage {
+export default class PageAccessibilityStatement extends BasePage {
     static hash = hashPageAccessibilityStatement;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/legal/license.js

@@ -1,11 +1,11 @@
 
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageLicense extends BasePage {
+export default class PageLicense extends BasePage {
     static hash = hashPageLicense;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/legal/privacy_policy.js

@@ -0,0 +1,18 @@
+
+import BasePage from "../base.js";
+
+export default class PagePrivacyPolicy extends BasePage {
+    static hash = hashPagePrivacyPolicy;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/legal/retention_schedule.js

@@ -0,0 +1,17 @@
+import BasePage from "../base.js";
+
+export default class PageRetentionSchedule extends BasePage {
+    static hash = hashPageDataRetentionSchedule;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/store/base.js

@@ -1,14 +1,13 @@
 
 import Events from "../../lib/events.js";
 import LocalStorage from "../../lib/local_storage.js";
-import Validation from "../../lib/validation";
-// import { BasePage } from "../base.js";
+import Validation from "../../lib/validation.js";
+// import BasePage from "../base.js";
 import DOM from "../../dom.js";
 import { isEmpty } from "../../lib/utils.js";
 
-export class StoreMixinPage { // extends BasePage {
+export default class StoreMixinPage {
     constructor() {
-        // super();
     }
 
     initialize(thisPage) {

static/js/pages/store/basket.js

@@ -1,13 +1,13 @@
 
 import Events from "../../lib/events.js";
 import LocalStorage from "../../lib/local_storage.js";
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageStoreBasket extends BasePage {
+export default class PageStoreBasket extends BasePage {
     static hash = hashPageStoreBasket;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/store/home.js

@@ -1,11 +1,11 @@
 
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageStoreHome extends BasePage {
+export default class PageStoreHome extends BasePage {
     static hash = hashPageStoreHome;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/store/product_categories.js

@@ -1,16 +1,16 @@
 
 import Events from "../../lib/events.js";
-import { TableBasePage } from "../base_table.js";
+import TableBasePage from "../base_table.js";
 import API from "../../api.js";
 import DOM from "../../dom.js";
 
-export class PageStoreProductCategories extends TableBasePage {
+export default class PageStoreProductCategories extends TableBasePage {
     static hash = hashPageStoreProductCategories;
     callFilterTableContent = API.getCategoriesByFilters;
     callSaveTableContent = API.saveCategories;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/store/product_permutations.js

@@ -1,14 +1,14 @@
 
 import Events from "../../lib/events.js";
-import { BasePage } from "../base.js";
-import Validation from "../../lib/validation";
+import BasePage from "../base.js";
+import Validation from "../../lib/validation.js";
 
 
-export class PageStoreProductPermutations extends BasePage {
+export default class PageStoreProductPermutations extends BasePage {
     static hash = hashPageStoreProductPermutations;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/pages/store/stock_items.js

@@ -1,14 +1,14 @@
 
 
 import Events from "../../lib/events.js";
-import Validation from "../../lib/validation";
-import { BasePage } from "../base.js";
+import Validation from "../../lib/validation.js";
+import BasePage from "../base.js";
 
-export class PageStoreStockItems extends BasePage {
+export default class PageStoreStockItems extends BasePage {
     static hash = hashPageStoreStockItems;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {
@@ -374,7 +374,7 @@ export class PageStoreStockItems extends BasePage {
 }
 
 
-import { TableBasePage } from "../base_table.js";
+import TableBasePage from "../base_table.js";
 import API from "../../api.js";
 import DOM from "../../dom.js";
 

static/js/pages/user/user.js

@@ -1,11 +1,11 @@
 
-import { BasePage } from "../base.js";
+import BasePage from "../base.js";
 
-export class PageUser extends BasePage {
+export default class PageUser extends BasePage {
     static hash = hashPageUser;
 
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
     }
 
     initialize() {

static/js/router.js

@@ -1,20 +1,30 @@
 
+// Pages
+// Core
+import PageAdminHome from './pages/core/admin_home.js';
+import PageHome from './pages/core/home.js';
+import PageContact from './pages/core/contact.js';
+import PageServices from './pages/core/services.js';
+// Legal
+import PageAccessibilityReport from './pages/legal/accessibility_report.js';
+import PageAccessibilityStatement from './pages/legal/accessibility_statement.js';
+import PageLicense from './pages/legal/license.js';
+// Store
+import PageStoreBasket from './pages/store/basket.js';
+import PageStoreHome from './pages/store/home.js';
+import PageStoreProductCategories from './pages/store/product_categories.js';
+import PageStoreProductPermutations from './pages/store/product_permutations.js';
+// import PageStoreProductPrices from './pages/store/product_prices.js';
+// import PageStoreProducts from './pages/store/products.js';
+// import PageStoreProductVariations from './pages/store/product_variations.js';
+import PageStoreStockItems from './pages/store/stock_items.js';
+// User
+// import PageUserLogin from './pages/user/login.js';
+// import PageUserLogout from './pages/user/logout.js';
+// import PageUserAccount from './pages/user/account.js';
+
+
 /*
-import { PageAdminHome } from './pages/core/admin_home.js';
-import { PageHome } from './pages/core/home.js';
-import { PageContact } from './pages/core/contact.js';
-import { PageAccessibilityStatement } from './pages/legal/accessibility_statement.js';
-import { PageLicense } from './pages/legal/license.js';
-import { PageServices } from './pages/core/services.js';
-import { PageStoreBasket } from './pages/store/basket.js';
-import { PageStoreHome } from './pages/store/home.js';
-import { PageStoreProductCategories } from './pages/store/product_categories.js';
-import { PageStoreProductPermutations } from './pages/store/product_permutations.js';
-// import { PageStoreProductPrices } from './pages/store/product_prices.js';
-// import { PageStoreProducts } from './pages/store/products.js';
-// import { PageStoreProductVariations } from './pages/store/product_variations.js';
-import { PageStoreStockItems } from './pages/store/stock_items.js';
-*/
 import "./lib/common.js";
 import "./lib/constants.js";
 import "./lib/events.js";
@@ -23,11 +33,15 @@ import "./lib/extras.js";
 import "./lib/local_storage.js";
 import "./lib/utils.js";
 import "./lib/validation.js";
+*/
+
 import API from './api.js';
 import DOM from './dom.js';
+import PagePrivacyPolicy from './pages/legal/privacy_policy.js';
+import PageRetentionSchedule from './pages/legal/retention_schedule.js';
 
 // Create a context for the pages
-const pagesContext = require.context('./pages', true, /\.js$/);
+// const pagesContext = require.context('./pages', true, /\.js$/);
 
 /*
 const pageModules = {
@@ -53,23 +67,26 @@ export default class Router {
         // Pages
         this.pages = {};
         // Core
-        this.pages[hashPageHome] = { name: 'PageHome', pathModule: './core/home.js' };
-        this.pages[hashPageContact] = { name: 'PageContact', pathModule: './core/contact.js' };
-        this.pages[hashPageServices] = { name: 'PageServices', pathModule: './core/services.js' };
-        this.pages[hashPageAdminHome] = { name: 'PageAdminHome', pathModule: './core/admin_home.js' };
+        this.pages[hashPageHome] = { name: 'PageHome', module: PageAdminHome }; //  importModule: () => import(/* webpackChunkName: "page_core_home" */ './pages/core/home.js') , pathModule: './pages/core/home.js'
+        this.pages[hashPageContact] = { name: 'PageContact', module: PageContact }; // pathModule: './pages/core/contact.js' };
+        this.pages[hashPageServices] = { name: 'PageServices', module: PageServices }; // pathModule: './pages/core/services.js' };
+        this.pages[hashPageAdminHome] = { name: 'PageAdminHome', module: PageAdminHome }; // pathModule: './pages/core/admin_home.js' };
         // Legal
-        this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', pathModule: './legal/accessibility_statement.js' };
-        this.pages[hashPageLicense] = { name: 'PageLicense', pathModule: './legal/license.js' };
+        this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', module: PageAccessibilityStatement }; // pathModule: '../../static/js/pages/legal/accessibility_statement.js' }; // , page: PageAccessibilityStatement
+        this.pages[hashPageDataRetentionSchedule] = { name: 'PageDataRetentionSchedule', module: PageRetentionSchedule }; // pathModule: './pages/legal/data_retention_schedule.js' };
+        this.pages[hashPageLicense] = { name: 'PageLicense', module: PageLicense }; // pathModule: './pages/legal/license.js' };
+        this.pages[hashPagePrivacyPolicy] = { name: 'PagePrivacyPolicy', module: PagePrivacyPolicy }; // pathModule: './pages/legal/privacy_policy.js' }; // importModule: () => {return import(/* webpackChunkName: "page_privacy_policy" */ './pages/legal/privacy_policy.js'); }
         // Store
-        this.pages[hashPageStoreProductCategories] = { name: 'PageStoreProductCategories', pathModule: './store/product_categories.js' };
-        this.pages[hashPageStoreProductPermutations] = { name: 'PageStoreProductPermutations', pathModule: './store/product_permutations.js' };
-        // this.pages[hashPageStoreProductPrices] = { name: 'PageStoreProductPrices', pathModule: './store/product_prices.js' };
-        this.pages[hashPageStoreProducts] = { name: 'PageStoreProducts', pathModule: './store/products.js' };
-        // this.pages[hashPageStoreProductVariations] = { name: 'PageStoreProductVariations', pathModule: './store/product_variations.js' };
+        this.pages[hashPageStoreProductCategories] = { name: 'PageStoreProductCategories', module: PageStoreProductCategories }; // pathModule: './pages/store/product_categories.js' };
+        this.pages[hashPageStoreProductPermutations] = { name: 'PageStoreProductPermutations', module: PageStoreProductPermutations }; // pathModule: './pages/store/product_permutations.js' };
+        // this.pages[hashPageStoreProductPrices] = { name: 'PageStoreProductPrices', module: PageStoreProductPrices }; // pathModule: './pages/store/product_prices.js' };
+        // this.pages[hashPageStoreProducts] = { name: 'PageStoreProducts', module: PageStoreProducts }; // pathModule: './pages/store/products.js' };
+        // this.pages[hashPageStoreProductVariations] = { name: 'PageStoreProductVariations', module: PageStoreProductVariations }; // pathModule: './pages/store/product_variations.js' };
+        this.pages[hashPageStoreStockItems] = { name: 'PageStoreStockItems', module: PageStoreStockItems };
         // User
-        // this.pages[hashPageUserLogin] = { name: 'PageUserLogin', pathModule: './user/login.js' };
-        // this.pages[hashPageUserLogout] = { name: 'PageUserLogout', pathModule: './user/logout.js' };
-        // this.pages[hashPageUserAccount] = { name: 'PageUserAccount', pathModule: './user/account.js' };
+        // this.pages[hashPageUserLogin] = { name: 'PageUserLogin', module: PageUserLogin }; // pathModule: './pages/user/login.js' };
+        // this.pages[hashPageUserLogout] = { name: 'PageUserLogout', module: PageUserLogout }; // pathModule: './pages/user/logout.js' };
+        // this.pages[hashPageUserAccount] = { name: 'PageUserAccount', module: PageUserAccount }; // pathModule: './pages/user/account.js' };
         
         // Routes
         this.routes = {};
@@ -80,7 +97,9 @@ export default class Router {
         this.routes[hashPageAdminHome] = (isPopState = false) => this.navigateToHash(hashPageAdminHome, isPopState);
         // Legal
         this.routes[hashPageAccessibilityStatement] = (isPopState = false) => this.navigateToHash(hashPageAccessibilityStatement, isPopState);
+        this.routes[hashPageDataRetentionSchedule] = (isPopState = false) => this.navigateToHash(hashPageDataRetentionSchedule, isPopState);
         this.routes[hashPageLicense] = (isPopState = false) => this.navigateToHash(hashPageLicense, isPopState);
+        this.routes[hashPagePrivacyPolicy] = (isPopState = false) => this.navigateToHash(hashPagePrivacyPolicy, isPopState);
         // Store
         this.routes[hashPageStoreProductCategories] = (isPopState = false) => this.navigateToHash(hashPageStoreProductCategories, isPopState);
         this.routes[hashPageStoreProductPermutations] = (isPopState = false) => this.navigateToHash(hashPageStoreProductPermutations, isPopState);
@@ -97,7 +116,7 @@ export default class Router {
         console.log("loadPage: " + hashPage);
         const PageClass = await this.getClassPageFromHash(hashPage);
         console.log("PageClass: ", PageClass);
-        this.currentPage = new PageClass();
+        this.currentPage = new PageClass(this);
         console.log("this.currentPage: ", this.currentPage);
         this.currentPage.initialize(isPopState);
     }
@@ -106,11 +125,19 @@ export default class Router {
         let pageJson = this.pages[hashPage];
         console.log("pageJson: ", pageJson);
         try {
+            /*
             const module = await pagesContext(pageJson.pathModule);
             console.log("module: ", module);
             return module[pageJson.name];
+            */
+            // const module = await import(pageJson.pathModule); //  pageJson.page;
+            // const module = () => import(pageJson.pathModule);
+            const module = pageJson.module; // importModule;
+            console.log("module: ", module);
+            return module; // [pageJson.name];
         }
         catch (error) {
+            console.log("this.pages: ", this.pages);
             console.error('Page not found:', hashPage);
             throw error;
         }
@@ -144,12 +171,12 @@ export default class Router {
         */
         let url = API.getUrlFromHash(hash, params);
         // if (!isPopState) 
-        history.pushState(data, '', url);
+        history.pushState({data: data, params: params}, '', hash);
         API.goToUrl(url, data);
     }
     async beforeLeave() {
         const ClassPageCurrent = await this.getClassPageFromHash(DOM.getHashPageCurrent());
-        const pageCurrent = new ClassPageCurrent();
+        const pageCurrent = new ClassPageCurrent(this);
         pageCurrent.leave();
     }