Did mass revitalization of navbar!

application/access_module/access_api.py

@@ -15,11 +15,13 @@ access_api = Blueprint('access_api', __name__, template_folder="templates", stat
 
 
 def update_session_user():
-    database_config = config()
-    with psycopg2.connect(**database_config) as conn:
-        user = postsqldb.LoginsTable.get_washed_tuple(conn, (session['user_id'],))
+    user = access_database.selectLoginsTupleByID((session['user_id'],))
+    user = access_database.washUserDictionary(user)
     session['user'] = user
 
+    print(user)
+
+
 def login_required(func):
     @wraps(func)
     def wrapper(*args, **kwargs):
@@ -44,16 +46,28 @@ def auth():
         'Authorization': f'Bearer {access_token}',
     }
     response = requests.get(userinfo_endpoint, headers=headers)
-    if response.status_code == 200:
-        user_email = response.json()['email']
-        user = access_database.selectUserByEmail((user_email,))
+    
+    if response.status_code != 200:
+        print("Failed to fetch user info:", response.status_code, response.text)
+        return redirect('/access/login')
+
+    external_user = response.json()
+    user = access_database.selectUserByEmail((external_user['email'],))
+
+    if user['login_type'] == "External":
+        payload = {
+            'id': user['id'],
+            'update': {
+                'username': external_user['preferred_username'],
+                'profile_pic_url': external_user['picture']
+            }
+        }
+        user = access_database.updateLoginsTuple(payload)
         user = access_database.washUserDictionary(user)
         session['user_id'] = user['id']
         session['user'] = user
-        session['login_type'] = 'External'
         return redirect('/')
-    else:
-        print("Failed to fetch user info:", response.status_code, response.text)
+
     return redirect('/access/login')
 
 @access_api.route('/login/oidc')

application/access_module/access_database.py

@@ -10,9 +10,39 @@ def washUserDictionary(user):
           'sites': user['sites'],
           'site_roles': user['site_roles'],
           'system_admin': user['system_admin'],
-          'flags': user['flags']
+          'flags': user['flags'],
+          'profile_pic_url': user['profile_pic_url'],
+          'login_type': user['login_type']
     }
 
+def selectLoginsTupleByID(payload, convert=True, conn=None):
+    """ payload = (id,)"""
+    self_conn = False
+    user = ()
+    sql = f"SELECT * FROM logins WHERE id=%s;"
+    try:
+        if not conn:
+            database_config = config.config()
+            conn = psycopg2.connect(**database_config)
+            conn.autocommit = True
+            self_conn = True
+
+        with conn.cursor() as cur:
+            cur.execute(sql, payload)
+            rows = cur.fetchone()
+            if rows and convert:
+                user = postsqldb.tupleDictionaryFactory(cur.description, rows)
+            elif rows and not convert:
+                user = rows
+
+        if self_conn:
+            conn.commit()
+            conn.close()
+        
+        return user
+    except Exception as error:
+        raise postsqldb.DatabaseError(error, payload, sql)
+
 def selectUserByEmail(payload, convert=True, conn=None):
     """ payload = (email,)"""
     self_conn = False
@@ -40,3 +70,34 @@ def selectUserByEmail(payload, convert=True, conn=None):
         return user
     except Exception as error:
         raise postsqldb.DatabaseError(error, payload, sql)
+    
+
+def updateLoginsTuple(payload, convert=True, conn=None):
+    """ payload = {'id': user_id, 'update': {...}}"""
+    self_conn = False
+    user = ()
+    set_clause, values = postsqldb.updateStringFactory(payload['update'])
+    values.append(payload['id'])
+    sql = f"UPDATE logins SET {set_clause} WHERE id=%s RETURNING *;"
+    try:
+        if not conn:
+            database_config = config.config()
+            conn = psycopg2.connect(**database_config)
+            conn.autocommit = True
+            self_conn = True
+
+        with conn.cursor() as cur:
+            cur.execute(sql, values)
+            rows = cur.fetchone()
+            if rows and convert:
+                user = postsqldb.tupleDictionaryFactory(cur.description, rows)
+            elif rows and not convert:
+                user = rows
+        
+        if self_conn:
+            conn.commit()
+            conn.close()
+
+        return user
+    except Exception as error:
+        raise postsqldb.DatabaseError(error, payload, sql)

application/administration/static/js/adminHandler.js

@@ -46,7 +46,7 @@ var sites_current_page = 1
 var sites_end_page = 10
 var sites_limit = 25
 async function fetchSites(){
-    const url = new URL('/admin/api/getSites', window.location.origin)
+    const url = new URL('/administration/api/getSites', window.location.origin)
     url.searchParams.append('page', sites_current_page)
     url.searchParams.append('limit', sites_limit)
     const response = await fetch(url)
@@ -75,7 +75,7 @@ async function replenishSitesTable(sites){
         let editOp = document.createElement('a')
         editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
         editOp.innerHTML = "edit"
-        editOp.href = `/admin/site/${sites[i].id}`
+        editOp.href = `/administration/site/${sites[i].id}`
 
         let deleteOp = document.createElement('a')
         deleteOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
@@ -176,7 +176,7 @@ async function postDeleteSite(site_id, item_name){
     let valid = document.getElementById('delete_input')
     if(valid.value==item_name){
         valid.classList.remove('uk-form-danger')
-        const response = await fetch(`/admin/api/site/postDeleteSite`, {
+        const response = await fetch(`/administration/api/site/postDeleteSite`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -214,7 +214,7 @@ var roles_current_page = 1
 var roles_end_page = 10
 var roles_limit = 25
 async function fetchRoles(){
-    const url = new URL('/admin/api/getRoles', window.location.origin)
+    const url = new URL('/administration/api/getRoles', window.location.origin)
     url.searchParams.append('page', roles_current_page)
     url.searchParams.append('limit', roles_limit)
     const response = await fetch(url)
@@ -245,7 +245,7 @@ async function replenishRolesTable(roles){
         let editOp = document.createElement('a')
         editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
         editOp.innerHTML = "edit"
-        editOp.href = `/admin/role/${roles[i].id}`
+        editOp.href = `/administration/role/${roles[i].id}`
 
         let deleteOp = document.createElement('a')
         deleteOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
@@ -348,7 +348,7 @@ var logins_current_page = 1
 var logins_end_page = 10
 var logins_limit = 25
 async function fetchLogins(){
-    const url = new URL('/admin/api/getLogins', window.location.origin)
+    const url = new URL('/administration/api/getLogins', window.location.origin)
     url.searchParams.append('page', logins_current_page)
     url.searchParams.append('limit', logins_limit)
     const response = await fetch(url)
@@ -383,7 +383,7 @@ async function replenishLoginsTable(logins){
         let editOp = document.createElement('a')
         editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
         editOp.innerHTML = "edit"
-        editOp.href = `/admin/user/${logins[i].id}`
+        editOp.href = `/administration/user/${logins[i].id}`
 
         let deleteOp = document.createElement('a')
         deleteOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')

application/administration/templates/admin.html

@@ -1,449 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
-        <title>Admin</title>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css" />
-        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
-        <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
-        <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
-    </head>
-    <style>
-        header, main, footer, body {
-            padding-left: 300px;
-            }
-        
-            @media only screen and (max-width : 992px) {
-            header, main, footer, body {
-                padding-left: 0;
-            }
-            }
-            .dropdown-disabled {
-                pointer-events: none;
-            }
-            .item :hover{
-                cursor: pointer;
-                background-color: whitesmoke;
-            } 
-        
-        .custom_row:hover{
-            background-color: rgb(230, 230, 230) !important;
-            cursor: pointer;
-        }
-        .my_btn:hover{
-            background-color: rgb(230, 230, 230) !important;
-            cursor: pointer;
-        }
-    </style>
-    <ul id="slide-out" class="sidenav sidenav-fixed z-depth-0" style="width: 250px; border-right: 2px;">
-        <div class="center-align" style="padding-top: 10px; padding-bottom: 10px;">
-            <img src="{{ url_for('static', filename='pictures/logo.jpg') }}" alt="Description" class="responsive-img circle center-align" style="width: 30%; height: auto;">
-        </div>
-        <li><a onclick="openSection('sites')">Sites</a></li>
-        <li><a onclick="openSection('roles')">Roles</a></li>
-        <li><a onclick="openSection('users')">Users</a></li>
-        <li><a href="#!">Instance Settings</a></li>
-    </ul>
-    <body>
-        <div class="container">
-            <div class="section">
-                <div class="row">
-                    <div class="col s12">
-                        <button class="btn btn-flat sidenav-trigger hide-on-large-only" data-target="slide-out"><i class="material-symbols-outlined">side_navigation</i></button>
-                        <a href="/items" class="btn btn-flat right">home</a>
-                        <a href="/profile" class="btn btn-flat right">Profile</a>
-                    </div>              
-                    <div class="col s12" id="main_body">
-                        <div id="sites" class="row hide">
-                            <div class="col s12">
-                                <h1>Your Sites</h1>
-                            </div>
-                            <div class="col s12">
-                                <p class="flow-text">Listed below are all the sites within your instance of MyPantry. Clicking on one will allow you
-                                    edit most of the attributes inherited by the site.</p>
-                                </div>
-                                <div class="col s12" id="sites_div">
-                                    <table id="sites_table">
-                                        <tr>
-                                            <th>Site</th>
-                                            <th>Description</th>
-                                        </tr>
-                                    </table>
-                                </div>
-                            <div class="col s12 center-align" style="padding-top: 10px;">
-                                <span class="center-align"><button data-target="add_site"class="btn btn-flat center-align modal-trigger" style="width: 100%; border-radius: 10px;"><i class="large material-symbols-outlined" style="font-size: 2rem;">add_circle</i></button></span>
-                            </div>
-                        </div>
-                        <div id="roles" class="row hide">
-                            <div class="col s12">
-                                <h1>Your Roles</h1>
-                            </div>
-                            <div class="col s12">
-                                <p class="flow-text">Listed below are all the roles within your instance of MyPantry. Clicking on one will allow you
-                                    edit most of the attributes inherited by the role.</p>
-                                </div>
-                            <div class="col s12" id="roles_div">
-                                <table id="roles_table">
-                                    <tr>
-                                        <th>Site</th>
-                                        <th>Role</th>
-                                        <th>Role Description</th>
-                                    </tr>
-                                </table>
-                            </div>
-                            <div class="col s12 center-align" style="padding-top: 10px;">
-                                <span class="center-align"><button data-target="add_role"class="btn btn-flat center-align modal-trigger" style="width: 100%; border-radius: 10px;"><i class="large material-symbols-outlined" style="font-size: 2rem;">add_circle</i></button></span>
-                            </div>
-                        </div>
-                        <div id="users" class="row hide">
-                            <div class="col s12">
-                                <h1>Your Users</h1>
-                            </div>
-                            <div class="col s12">
-                                <p class="flow-text">Listed below is all the users that have access to your instance.</p>
-                                </div>
-                            <div class="col s12" id="users_div">
-                                <table id="users_table">
-                                    <tr>
-                                        <th>Username</th>
-                                        <th>Email</th>
-                                    </tr>
-                                </table>
-                            </div>
-                            <div class="col s12 center-align" style="padding-top: 10px;">
-                                <span class="center-align"><button data-target="add_role"class="btn btn-flat center-align modal-trigger" style="width: 100%; border-radius: 10px;"><i class="large material-symbols-outlined" style="font-size: 2rem;">add_circle</i></button></span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div id="add_site" class="modal">
-            <div class="modal-content">
-                <h4>Create Site</h4>
-                <div class="card-panel green lighten-4 z-depth-0">
-                    <span class="black-text">A site is a main component to your instance. Each site is a boudry property meaning that all parts
-                        made within the site is not accessible within other sites beyond cross-site features. Think of them like <b>House A</b>, 
-                        <b>Garage</b>, or <b>Warehouse</b>.
-                    </span>
-                </div>
-                <div class="row" style="gap: 10px;">
-                    <div class="s12 m6 input-field">
-                        <input id="site_name" type="text" placeholder="main" maxlength="20">
-                        <label for="site_name">Site Name</label>
-                        <span class="supporting-text">Supporting Text</span>
-                    </div>
-                    <div class="s12 m6 input-field">
-                        <i class="material-icons prefix">account_circle</i>
-                        <input id="site_owner" type="text" placeholder=" " value="{{username}}" disabled>
-                        <label for="site_owner">Site Ownser</label>
-                    </div>
-                    <div class="input-field col s12">
-                        <textarea id="site_description" class="materialize-textarea" placeholder=" "></textarea>
-                        <label for="site_description">Site Description</label>
-                    </div>
-                    <div class="s12 m6 input-field">
-                        <input id="default_zone" type="text" placeholder="DEFAULT" value="DEFAULT" maxlength="20">
-                        <label for="default_zone">Default Zone</label>
-                    </div>
-                    <div class="s12 m6 input-field">
-                        <input id="default_location" type="text" placeholder="ALL" value="ALL" maxlength="20">
-                        <label for="default_location">Default Location</label>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-              <button onclick="addSite()" class="modal-close waves-effect btn-flat green lighten-4">Submit</button>
-            </div>
-        </div>
-
-        <div id="add_role" class="modal">
-            <div class="modal-content">
-                <h4>Create Role</h4>
-                <div class="card-panel green lighten-4 z-depth-0">
-                    <span class="black-text">A Site Role is used to define and assign general permissions to users for that specific site. This could be important 
-                        as a user's permission to access certain sites is determined by their roles.
-
-                    </span>
-                </div>
-                <div class="row" style="gap: 10px;">
-                    <div class="s12 m6 input-field">
-                        <input id="role_name" type="text" placeholder="main" maxlength="20">
-                        <label for="role_name">Role Name</label>
-                        <span class="supporting-text">Supporting Text</span>
-                    </div>
-                    <div class="s12 m6 input-field">
-                        <select id="selected_site">
-                            <option value="" disabled selected>Choose your option</option>
-                            <option value="1">Option 1</option>
-                            <option value="2">Option 2</option>
-                            <option value="3">Option 3</option>
-                          </select>
-                          <label for="selected_site">Role's Site</label>
-                    </div>
-                    <div class="input-field col s12">
-                        <textarea id="role_description" class="materialize-textarea" placeholder=" "></textarea>
-                        <label for="role_description">Role Description</label>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-              <button onclick="addRole()" class="modal-close waves-effect btn-flat green lighten-4">Submit</button>
-            </div>
-        </div>
-        <div id="edit_role" class="modal">
-            <div class="modal-content">
-                <h4>Edit Role</h4>
-                <div class="card-panel green lighten-4 z-depth-0">
-                    <span class="black-text">A Site Role is used to define and assign general permissions to users for that specific site. This could be important 
-                        as a user's permission to access certain sites is determined by their roles.
-                    </span>
-                </div>
-                <div class="row" style="gap: 10px;">
-                    
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button onclick="" class="modal-close waves-effect btn-flat red lighten-4">Delete</button>
-                <button onclick="" class="modal-close waves-effect btn-flat green lighten-4">Update</button>
-            </div>
-        </div>
-
-
-    </body>
-    <script src="{{ url_for('static', filename='adminHandler.js') }}"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', async function() {
-            var elems = document.querySelectorAll('.sidenav');
-            var instances = M.Sidenav.init(elems);
-            var elems = document.querySelectorAll('.dropdown-trigger');
-            var instances = M.Dropdown.init(elems, {});
-            var elems = document.querySelectorAll('.collapsible');
-            var instances = M.Collapsible.init(elems, {});
-            var elems = document.querySelectorAll('.modal');
-            var instances = M.Modal.init(elems, {});
-            var elems = document.querySelectorAll('select');
-            var instances = M.FormSelect.init(elems, {})
-            M.AutoInit();
-            await openSection('sites')
-          });
-
-        async function openSection(section){
-            let sections = ['sites', 'roles', 'users']
-            for (i=0; i < sections.length; i++){
-                document.getElementById(sections[i]).classList.add("hide");
-            }
-            document.getElementById(section).classList.remove("hide");
-            if (section == "sites"){
-                var sites = await fetchSites()
-                await populateSites(sites)
-            } else if (section == "roles") {
-                await fetchPopulateRoles()
-            } else if (section == "users"){
-                var users = await fetchUsers(50, 1)
-                await populateUsers(users)
-            }
-        }
-
-        async function fetchPopulateSites(){
-            const url = new URL('/admin/getSites', window.location.origin);
-            await fetch(url)
-            .then(response => response.json())
-            .then(data => {
-
-                const collection = document.getElementById('sites_collection')
-                collection.innerHTML = ""
-                data.sites.forEach(site => {
-                    console.log(site)
-
-                    let list_item = document.createElement('li')
-                    list_item.classList.add('collection-item')
-                    list_item.classList.add('avatar')
-                    list_item.onclick = function(){
-                        selectSite(site[0])
-                    };
-                    list_item.id = site[0]
-                    list_item.style = "border-radius: 10px;"
-                    list_item.innerHTML = `
-                    <i class="material-icons circle green">insert_chart</i>                    
-                    <span class="title" style="font-size:16pt;">${site[1]}</span>
-                    <p>${site[3]}<br>${site[2]}</p>`
-                    collection.append(list_item)
-                })
-            })
-        }
-
-        async function populateSites(sites){
-            const table = document.getElementById("sites_table")
-            while (table.rows.length > 1) {
-                table.deleteRow(1);
-            };
-            
-            let reference_state = 1
-            for(let i = 0; i < sites.length; i++){
-                var row = table.insertRow();
-                
-                var row_name = row.insertCell();
-                var row_desc = row.insertCell();
-                row_name.style = "display: inline-flex; align-items: center;"
-
-
-                row_name.innerHTML = `<i class="material-symbols-outlined" style="padding-right: 5px;">wysiwyg</i>${sites[i][1]}`
-                row_desc.innerHTML = `${sites[i][2]}`
-
-                
-                if ((reference_state % 2) == 0){
-                    row.classList.add('green')
-                    row.classList.add('lighten-5')
-                }
-                row.classList.add("custom_row")
-                row.addEventListener('click', function(){
-                    clickRoleRow(sites[i][0])
-                })
-                reference_state++
-            }
-        }
-
-        async function populateUsers(users){
-            const table = document.getElementById("users_table")
-            while (table.rows.length > 1) {
-                table.deleteRow(1);
-            };
-            let reference_state = 1
-            for(let i = 0; i < users.length; i++){
-                var row = table.insertRow();
-                var row_username = row.insertCell();
-                var row_email = row.insertCell();
-
-
-                row_username.style = "display: inline-flex; align-items: center;"
-                row_username.innerHTML = `<i class="material-symbols-outlined" style="padding-right: 5px;">person</i>${users[i][1]}`
-                row_email.innerHTML = `${users[i][3]}`
-
-
-                if ((reference_state % 2) == 0){
-                    row.classList.add('green')
-                    row.classList.add('lighten-5')
-                }
-                row.classList.add("custom_row")
-                row.addEventListener('click', function(){
-                    clickRoleRow(users[i][0])
-                })
-                reference_state++
-            }
-        }
-
-        async function fetchPopulateRoles(){
-            const Rolesurl = new URL('/getRoles', window.location.origin);
-            await fetch(Rolesurl)
-            .then(response => response.json())
-            .then(data => {
-                console.log(data.sites)
-                
-                const table = document.getElementById("roles_table")
-
-                while (table.rows.length > 1) {
-                    table.deleteRow(1);
-                };
-
-                let reference_state = 1
-
-                for (let key in data.sites){
-                    for (let i = 0; i < data.sites[key].length; i++){
-                        var row = table.insertRow();
-                        var row_site = row.insertCell();
-                        var row_name = row.insertCell();
-                        var row_description = row.insertCell();
-
-                        row_site.style = "display: inline-flex; align-items: center;"
-
-                        row_site.innerHTML = `<i class="material-symbols-outlined" style="padding-right: 5px;">group</i>${key}`
-                        row_name.innerHTML = `${data.sites[key][i][1]}`
-                        row_description.innerHTML = `${data.sites[key][i][2]}`
-
-
-                        if ((reference_state % 2) == 0){
-                            row.classList.add('green')
-                            row.classList.add('lighten-5')
-                        }
-                        row.classList.add("custom_row")
-                        row.addEventListener('click', function(){
-                            clickRoleRow(data.sites[key][i][0])
-                        })
-                        reference_state++
-                        
-                    }
-                }
-            })
-
-            var selectElement = document.getElementById('selected_site');
-            selectElement.innerHTML = '';
-
-            const SitesURL = new URL('/admin/getSites', window.location.origin);
-            await fetch(SitesURL)
-            .then(response => response.json())
-            .then(data => {
-                console.log(data)
-                data.sites.forEach(site => {
-                    var newOption = document.createElement('option')
-                    newOption.value = site[0];
-                    newOption.text = site[1];
-                    selectElement.appendChild(newOption);
-                })
-            })
-            M.FormSelect.init(selectElement);
-
-        }
-
-        function selectSite(id){
-            console.log(id)
-        }
-
-        
-        async function addSite(){
-            var site_name = document.getElementById('site_name').value
-            var site_description = document.getElementById('site_description').value
-            var default_zone = document.getElementById('default_zone').value
-            var default_location = document.getElementById('default_location').value
-            
-            await fetch(`/addSite`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    site_name: site_name,
-                    site_description: site_description,
-                    default_zone: default_zone,
-                    default_location: default_location,
-                }),
-            });
-
-            // var sites = await fetchSites()
-            // await populateSites(sites)
-            location.reload()
-            M.toast({text: "Site has been added Successfully!", classes: "rounded green lighten-4 black-text"});
-        }
-
-        async function addRole(){
-            var role_name = document.getElementById('role_name').value
-            var role_description = document.getElementById('role_description').value
-            var selected_site_id = Number(document.getElementById('selected_site').value)
-            
-            await fetch(`/addRole`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    role_name: role_name,
-                    role_description: role_description,
-                    site_id: selected_site_id
-                }),
-            });
-            await fetchPopulateRoles()
-            M.toast({text: "Role has been added Successfully!", classes: "rounded green lighten-4 black-text"});
-        }
-    </script>
-</html>

application/administration/templates/admin_index.html

@@ -16,69 +16,60 @@
         <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <!-- to color the navbar i have to stlye this element the nav element -->
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li>
-                                        <a href="/workshop">
-                                            <div class="uk-active">Workshop<div class="uk-nav-subtitle" disabled>Building in the workshop...</div>
-                                        </div></a>
-                                    </li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li class="uk-disabled" hidden><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@s">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default;"><span><strong>Administration</strong></span></li>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled"><span>Administration</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li class="uk-active"><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>        
-        </div>
         <div class="uk-section uk-margin-left">
             <div class="uk-child-width-1-1" uk-grid>
                 <div>

application/administration/templates/role.html

@@ -19,7 +19,7 @@
         <div class="uk-container uk-section">
             <div uk-grid>
                 <div class="uk-width-1-1" >
-                    <a href="/admin" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
+                    <a href="/administration" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
                     <a onclick="toggleDarkMode()" class="uk-button uk-button-small uk-align-right"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
                 </div>
                 <div class="uk-width-1-1">
@@ -78,7 +78,7 @@
 
         document.addEventListener('DOMContentLoaded', async function() {
             let mode = "edit"
-            if(path == "/admin/role/new"){
+            if(path == "/administration/role/new"){
                 mode = "new"
             }
             await replenishForm(role, mode)
@@ -132,7 +132,7 @@
                 site_id: document.getElementById('site_id').value,
             }
 
-            const response = await fetch(`/admin/api/role/postAddRole`, {
+            const response = await fetch(`/administration/api/role/postAddRole`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -150,7 +150,7 @@
                 update: {role_name: document.getElementById('role_name').value, role_description: document.getElementById('role_description').value}
             }
 
-            const response = await fetch(`/admin/api/role/postEditRole`, {
+            const response = await fetch(`/administration/api/role/postEditRole`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

application/administration/templates/site.html

@@ -19,7 +19,7 @@
         <div class="uk-container uk-section uk-margin-remove-top">
             <div uk-grid>
                 <div class="uk-width-1-1" >
-                    <a href="/admin" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
+                    <a href="/administration" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
                     <a onclick="toggleDarkMode()" class="uk-button uk-button-small uk-align-right"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
                 </div>
                 <div class="uk-width-1-1">
@@ -144,7 +144,7 @@
     <script>
         document.addEventListener('DOMContentLoaded', async function() {
             let mode = "edit"
-            if(path == "/admin/site/new"){
+            if(path == "/administration/site/new"){
                 mode = "new"
             }
             replenishForm(site, mode)
@@ -207,7 +207,7 @@
                 default_primary_location: document.getElementById('new_default_primary_location').value
             }
 
-            const response = await fetch(`/admin/api/site/postAddSite`, {
+            const response = await fetch(`/administration/api/site/postAddSite`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -226,7 +226,7 @@
                 site_description: document.getElementById('site_description').value}
             }
 
-            const response = await fetch(`/admin/api/site/postEditSite`, {
+            const response = await fetch(`/administration/api/site/postEditSite`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

application/administration/templates/user.html

@@ -20,7 +20,7 @@
             <div class="uk-container uk-container-xsmall">
                 <div class="uk-grid-small" uk-grid>
                     <div class="uk-width-1-1" >
-                        <a href="/admin" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
+                        <a href="/administration" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
                         <a onclick="toggleDarkMode()" class="uk-button uk-button-small uk-align-right"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
                     </div>
                     <div class="uk-width-1-1">
@@ -191,7 +191,7 @@
         }
         document.addEventListener('DOMContentLoaded', async function() {
             let mode = "edit"
-            if(path == "/admin/user/new"){
+            if(path == "/administration/user/new"){
                 mode = "new"
             }
             console.log(user)
@@ -256,7 +256,7 @@
                 row_type: document.getElementById('login_type').value,
             }
 
-            const response = await fetch(`/admin/api/user/postAddLogin`, {
+            const response = await fetch(`/administration/api/user/postAddLogin`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -277,7 +277,7 @@
                 });
             } else {
                 console.log(data.user)
-                window.location.href = `/admin/user/${data.user.id}`
+                window.location.href = `/administration/user/${data.user.id}`
             }
         }
 
@@ -288,7 +288,7 @@
                 update: {password: document.getElementById('old_login_password_new').value}
             }
 
-            const response = await fetch(`/admin/api/user/postEditLoginPassword`, {
+            const response = await fetch(`/administration/api/user/postEditLoginPassword`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -336,7 +336,7 @@
                 }
             }
 
-            const response = await fetch(`/admin/api/user/postEditLogin`, {
+            const response = await fetch(`/administration/api/user/postEditLogin`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

application/items/templates/index.html

@@ -22,56 +22,39 @@
 
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
-                                    <li><a href="/recipes">Recipes</a></li>
-                                    <li class="uk-nav-header">Logistics</li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/items">
-                                            <div class="uk-active">Items<div class="uk-nav-subtitle" disabled>You are currently browsing items here...</div>
-                                        </div>
-                                    </a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
+                                        <li class="uk-nav-header">Logistics</li>
+                                        <li class="uk-active"><a href="/items">Items</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                    <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                    <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default;"><span><strong>{{current_site}}</strong></span>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site  %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -82,22 +65,33 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
                             <li class="uk-disabled"><span>Items</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                    {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/items/templates/item_new.html

@@ -38,59 +38,77 @@
         }
     </style>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <!-- to color the navbar i have to stlye this element the nav element -->
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
-                                    <li><a href="/recipes">Recipes</a></li>
-                                    <li class="uk-nav-header">Logistics</li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/items">
-                                            <div class="uk-active">Items<div class="uk-nav-subtitle" disabled>You are currently editing an item...</div>
-                                        </div>
-                                    </a>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
-                                    <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
-                                </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
-                            </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-small" uk-icon="icon: menu" uk-toggle> menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default; user-select: none;"><span><strong>{{current_site}}</strong></span></li>
-                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
+                                        <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                <li class="uk-disabled"><span>Editing Item</span></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
+                                        <li><a href="/receipts">Receipts</a></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
+                            </li>
+                        </ul>
+
+                    </div>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                                <div uk-dropdown="mode: hover">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
+                                        {% for site in sites %}
+                                        {% if site == current_site %}
+                                        <li><a class="uk-disabled" href="#">{{site}}</a></li>
+                                        {% else %}
+                                        <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
+                                        {% endif %}
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            </li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
+                            <li class="uk-disabled"><span>Items</span></li>
+                            <li class="uk-disabled"><span>Editing</span></li>
+                        </ul>
+                    </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/items/templates/itemlink.html

@@ -21,60 +21,77 @@
     </head>
 
   <body>
-    <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-      <!-- to color the navbar i have to stlye this element the nav element -->
-      <nav id="navbar" class="uk-navbar-container">
+    <nav class="uk-navbar-container">
         <div class="uk-container uk-container-expand">
-              <div uk-navbar="dropbar: true">
-                  <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                      <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                          <ul class="uk-nav uk-nav-secondary">  
-                              <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                              <li class="uk-nav-header">Apps</li>
-                              <li><a href="/shopping-lists">Shopping Lists</a></li>
-                              <li><a href="/groups">Groups</a></li>
-                              <li><a href="/recipes">Recipes</a></li>
-                              <li class="uk-nav-header">Logistics</li>
+            <div class="uk-navbar uk-navbar-primary">
+                <!-- Application Navigation-->
+                <div class="uk-navbar-left">
+                    <ul class="uk-navbar-nav">
                         <li>
-                                  <a href="/items">
-                                      <div class="uk-active">Items<div class="uk-nav-subtitle" disabled>You are currently editing a linked item...</div>
-                                  </div>
-                              </a></li>
-                              <li><a href="/workshop">Workshop</a></li>
-                              <li><a href="/transaction">Add Transaction</a></li>
-                              <li><a href="/receipts">Receipts</a></li>
-                              <li class="uk-nav-header">System Management</li>
-                              {% if system_admin %}
-                              <li><a href="/admin">Administration</a></li>
-                              {% endif %}
-                              <li><a href="" class="">{{username}}</a></li>
-                          </ul>
-                          <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
-                      </div>
-                  </div>
-                  <div class="uk-navbar-left uk-margin-small">
-                      <a href="#offcanvas-slide" class="uk-button uk-button-small" uk-icon="icon: menu" uk-toggle> menu</a>
-                  </div>
-                  <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                      <ul class="uk-breadcrumb">
-                          <li style="cursor: default; user-select: none;"><span><strong>{{current_site}}</strong></span></li>
-                          <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
+                            <a href>Apps</a>
+                            <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                <ul class="uk-nav uk-navbar-dropdown-nav">
+                                    <li><a href="/recipes">Recipes</a></li>
+                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                                    <li class="uk-nav-header">Logistics</li>
                                     <li><a href="/items">Items</a></li>
-                          <li class="uk-disabled"><span>Editing Linked Item</span></li>
+                                    <li><a href="/items/transaction">Transaction</a></li>
+                                    <li><a href="/receipts">Receipts</a></li>
+                                    <li class="uk-nav-header">Points of Ease</li>
+                                    <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                    <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                 </ul>
                             </div>
+                        </li>
+                    </ul>
+
+                </div>
+                <!-- Breadcrumbs Navigation -->
+                <div class="uk-navbar-center uk-visible@m">
+                    <ul class="uk-breadcrumb uk-margin-remove">
+                        <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                            <div uk-dropdown="mode: hover">
+                                <ul class="uk-nav uk-dropdown-nav">
+                                    <li class="uk-nav-header">Select Site</li>
+                                    <li class="uk-nav-divider"></li>
+                                    {% for site in sites %}
+                                    {% if site == current_site %}
+                                    <li><a class="uk-disabled" href="#">{{site}}</a></li>
+                                    {% else %}
+                                    <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
+                                    {% endif %}
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        </li>
+                        <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
+                        <li class="uk-disabled"><span>Items</span></li>
+                        <li class="uk-disabled"><span>Editing Item Link</span></li>
+                    </ul>
+                </div>
+                <!-- Profile/Management Navigation-->
                 <div class="uk-navbar-right">
-                      <div>
-                          <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                      </div>
-                      <div>
-                          <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                    <ul class="uk-navbar-nav">
+                        <li>
+                            <a href="#">
+                                <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                        {{username}}
+                            </a>
+                            <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                <ul class="uk-nav uk-navbar-dropdown-nav">
+                                    <li><a href="/profile">Profile</a></li>
+                                    <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                    <li><a href="/site-management">Site Management</a></li>
+                                    <li><a href="/administration">System Management</a></li>
+                                    <li><a href="/access/logout">Logout</a></li>
+                                </ul>
                             </div>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
     </nav>
-  </div>
 
 
 

application/items/templates/transaction.html

@@ -25,57 +25,39 @@
         }
     </style>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <!-- to color the navbar i have to stlye this element the nav element -->
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li>
-                                        <a href="/transaction">
-                                            <div class="uk-active">Add Transaction<div class="uk-nav-subtitle" disabled>You are adding transactions...</div>
-                                        </div></a>
-                                    </li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@s">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default;"><span><strong>{{current_site}}</strong></span>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -86,23 +68,33 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
-                                <li><a href="/items">Items</a></li>
-                                <li class="uk-disabled"><span>Add Transaction</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
+                            <li class="uk-disabled"><span>Manual Transaction Entry</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container uk-section">
             
             

application/items/templates/transactions.html

@@ -21,55 +21,77 @@
 
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
         <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
-                                    <li><a href="/groups">Groups</a></li>
-                                    <li><a href="/recipes">Recipes</a></li>
-                                    <li class="uk-nav-header">Logistics</li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                    <a href="/items">
-                                        <div class="uk-active">Items<div class="uk-nav-subtitle" disabled>You are currently viewing transactions...</div>
-                                    </div>
-                                    </a>
-                                    </li>
-                                    <li><a href="/add_transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
-                                    <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
-                                </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
-                            </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle></a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default; user-select: none;"><span><strong>{{current_site}}</strong></span></li>
-                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
+                                        <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                <li class="uk-disabled"><span>Viewing Transactions</span></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
+                                        <li><a href="/receipts">Receipts</a></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
+                            </li>
+                        </ul>
+
+                    </div>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                                <div uk-dropdown="mode: hover">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
+                                        {% for site in sites %}
+                                        {% if site == current_site %}
+                                        <li><a class="uk-disabled" href="#">{{site}}</a></li>
+                                        {% else %}
+                                        <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
+                                        {% endif %}
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            </li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
+                            <li class="uk-disabled"><span>Items</span></li>
+                            <li class="uk-disabled"><span>Transactions</span></li>
+                        </ul>
+                    </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <nav aria-label="Pagination">

application/poe/templates/receipts.html

@@ -25,57 +25,39 @@
         }
     </style>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <!-- to color the navbar i have to stlye this element the nav element -->
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li>
-                                        <a href="/transaction">
-                                            <div class="uk-active">Add Transaction<div class="uk-nav-subtitle" disabled>You are adding transactions...</div>
-                                        </div></a>
-                                    </li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li class="uk-active"><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@s">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default;"><span><strong>{{current_site}}</strong></span>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -86,22 +68,33 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li class="uk-disabled"><span>Point of Ease</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Point of Ease</span></li>
                             <li class="uk-disabled"><span>Scan to Receipt</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container uk-section">
             <div class="uk-grid-small" uk-grid>
                     <div class="uk-width-1-1">

application/poe/templates/scanner.html

@@ -25,57 +25,39 @@
         }
     </style>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <!-- to color the navbar i have to stlye this element the nav element -->
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li>
-                                        <a href="/transaction">
-                                            <div class="uk-active">Add Transaction<div class="uk-nav-subtitle" disabled>You are adding transactions...</div>
-                                        </div></a>
-                                    </li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li class="uk-active"><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@s">
-                            <ul class="uk-breadcrumb">
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
                             <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -86,22 +68,33 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li class="uk-disabled"><span>Point of Ease</span></li>
-                                <li class="uk-disabled"><span>Scan To Transaction</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Point of Ease</span></li>
+                            <li class="uk-disabled"><span>Scan to Transaction</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container uk-section">
             <div class="uk-grid-small" uk-grid>
                 <div class="uk-width-1-1 uk-visible@m">

application/receipts/static/js/receiptHandler.js

@@ -15,7 +15,7 @@ async function refreshReceipt() {
 async function replenishFields(receipt) {
     if (receipt){
         document.getElementById('title').innerHTML = receipt.receipt_id
-        document.getElementById('crumbID').innerHTML = receipt.receipt_id
+        // document.getElementById('crumbID').innerHTML = receipt.receipt_id
         document.getElementById('receipt_id').innerHTML = receipt.receipt_id
         document.getElementById('database_id').value = receipt.id
         document.getElementById('date_submitted').value = receipt.date_submitted

application/receipts/templates/receipt.html

@@ -23,49 +23,77 @@
 
 
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
         <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
-                                    <li><a href="/receipts"><div class="uk-active">Receipts<div class="uk-nav-subtitle" disabled>You are currently editing a Receipt...</div></div></a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
-                                </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
-                            </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle></a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default; user-select: none;"><span><strong>{{current_site}}</strong></span></li>
-                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                <li class="uk-disabled"><span id="crumbID"></span></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
+                            </li>
+                        </ul>
+
+                    </div>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                                <div uk-dropdown="mode: hover">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
+                                        {% for site in sites %}
+                                        {% if site == current_site %}
+                                        <li><a class="uk-disabled" href="#">{{site}}</a></li>
+                                        {% else %}
+                                        <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
+                                        {% endif %}
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            </li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
+                            <li class="uk-disabled"><span>Receipts</span></li>
+                            <li class="uk-disabled"><span>Processing Receipt</span></li>
+                        </ul>
+                    </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/receipts/templates/receipts_index.html

@@ -21,52 +21,39 @@
 
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
         <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
-                                    <li><a href="/receipts"><div class="uk-active">Receipts<div class="uk-nav-subtitle" disabled>You are currently viewing Receipts...</div></div></a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li><a href="/items/transaction">Transaction</a></li>
+                                        <li class="uk-active"><a href="/receipts">Receipts</a></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle>Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default;"><span><strong>{{current_site}}</strong></span>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -77,17 +64,33 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Logistics</span></li>
                             <li class="uk-disabled"><span>Receipts</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/recipes/static/js/recipeEditHandler.js

@@ -29,7 +29,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
 async function replenishRecipe() {
     document.getElementById('title').innerHTML = `${recipe.name}`
-    document.getElementById('breadcrumb').innerHTML = `${recipe.name}`
+    //document.getElementById('breadcrumb').innerHTML = `${recipe.name}`
 
     document.getElementById('recipeName').value = `${recipe.name}`
     document.getElementById('recipeCreationDate').value = `${recipe.creation_date}`

application/recipes/static/js/recipeViewHandler.js

@@ -27,7 +27,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
 async function replenishRecipe() {
     document.getElementById('title').innerHTML = `${recipe.name}`
-    document.getElementById('breadcrumb').innerHTML = `${recipe.name}`
+    // document.getElementById('breadcrumb').innerHTML = `${recipe.name}`
     document.getElementById('recipeTitle').innerHTML = `${recipe.name}`
     document.getElementById('recipeAuthor').innerHTML = `${recipe.author}`
     document.getElementById('recipeDescription').innerHTML = `${recipe.description}`

application/recipes/templates/recipe_edit.html

@@ -23,57 +23,77 @@
         <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
     </head>
     <body>     
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/recipes">
-                                            <div class="uk-active">Recipes<div class="uk-nav-subtitle" disabled>You are currently Editing a Recipe here...</div></div>
-                                        </a>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+
+                    </div>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                                <div uk-dropdown="mode: hover">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
+                                        {% for site in sites %}
+                                        {% if site == current_site %}
+                                        <li><a class="uk-disabled" href="#">{{site}}</a></li>
+                                        {% else %}
+                                        <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
                                         {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
-                                </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
-                            </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span><strong>{{current_site}}</strong></span></li>
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Apps</span></li>
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Recipes</span></li>
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span id="breadcrumb"></span></li>
+                                        {% endfor %}
                                     </ul>
                                 </div>
+                            </li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Modules</span></li>
+                            <li class="uk-disabled"><span>Recipes</span></li>
+                            <li class="uk-disabled"><span>Editing Recipe</span></li>
+                        </ul>
+                    </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/recipes/templates/recipe_view.html

@@ -30,57 +30,77 @@
         }
     </style>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/recipes">
-                                            <div class="uk-active">Recipes<div class="uk-nav-subtitle" disabled>You are currently Viewing a Recipe here...</div></div>
-                                        </a>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+
+                    </div>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                                <div uk-dropdown="mode: hover">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
+                                        {% for site in sites %}
+                                        {% if site == current_site %}
+                                        <li><a class="uk-disabled" href="#">{{site}}</a></li>
+                                        {% else %}
+                                        <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
                                         {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
-                                </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
-                            </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span><strong>{{current_site}}</strong></span></li>
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Apps</span></li>
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Recipes</span></li>
-                                <li style="cursor: default; user-select: none;" class="uk-disabled"><span id="breadcrumb"></span></li>
+                                        {% endfor %}
                                     </ul>
                                 </div>
+                            </li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Modules</span></li>
+                            <li class="uk-disabled"><span>Recipes</span></li>
+                            <li class="uk-disabled"><span>Viewing Recipe</span></li>
+                        </ul>
+                    </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/recipes/templates/recipes_index.html

@@ -22,55 +22,39 @@
 
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
-                                    <li><a href="/shopping-lists">Shopping Lists</a></li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/recipes">
-                                            <div class="uk-active">Recipes<div class="uk-nav-subtitle" disabled>You are currently browsing Recipes here...</div></div>
-                                        </a>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li class="uk-active"><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: default;"><span><strong>{{current_site}}</strong></span>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -81,22 +65,33 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li style="cursor: default; user-select: none;"><span>Apps</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Modules</span></li>
                             <li class="uk-disabled"><span>Recipes</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/shoppinglists/templates/edit.html

@@ -23,44 +23,39 @@
 
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/shopping-lists">
-                                            <div class="uk-active">Shopping Lists<div class="uk-nav-subtitle" disabled>You are currently browsing shopping lists here...</div></div>
-                                        </a>
-                                    </li>
-                                    <li><a href="/groups">Groups</a></li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
                                 </div>
+                            </li>
+                        </ul>
+
                     </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle></a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -71,22 +66,34 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li style="cursor: default; user-select: none;"><span>Apps</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Modules</span></li>
                             <li class="uk-disabled"><span>Shopping Lists</span></li>
+                            <li class="uk-disabled"><span>Editing Shopping List</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div style="margin-top: 10px; margin-right: 10px;" class="uk-align-right">
                 <button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-flip"><span uk-icon="question"></span>  help</button>

application/shoppinglists/templates/lists.html

@@ -23,56 +23,39 @@
 
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/shopping-lists">
-                                            <div class="uk-active">Shopping Lists<div class="uk-nav-subtitle" disabled>You are currently browsing shopping lists here...</div></div>
-                                        </a>
-                                    </li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li class="uk-active"><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    <li><a><div>{{current_site}}<div class="uk-nav-subtitle">This is the current site you are viewing...</div></div></a>
-                                        <div uk-dropdown="mode: click">
-                                            <ul class="uk-nav uk-dropdown-nav">
-                                                {% for site in sites %}
-                                                {% if site == current_site  %}
-                                                <li><a class="uk-disabled" href="#">{{site}}</a></li>
-                                                {% else %}
-                                                <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
-                                                {% endif %}
-                                                {% endfor %}
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
                                 </div>
                             </li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
                         </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
+
                     </div>
-                        </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
                             <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -83,22 +66,33 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li style="cursor: default; user-select: none;"><span>Apps</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Modules</span></li>
                             <li class="uk-disabled"><span>Shopping Lists</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div uk-grid>

application/shoppinglists/templates/view.html

@@ -23,44 +23,39 @@
 
     </head>
     <body>
-        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-            <nav id="navbar" class="uk-navbar-container">
+        <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
-                    <div uk-navbar="dropbar: true">
-                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
-                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-                                <ul class="uk-nav uk-nav-secondary">  
-                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
-                                    <li class="uk-nav-header">Apps</li>
+                <div class="uk-navbar uk-navbar-primary">
+                    <!-- Application Navigation-->
+                    <div class="uk-navbar-left">
+                        <ul class="uk-navbar-nav">
                             <li>
-                                        <a href="/shopping-lists">
-                                            <div class="uk-active">Shopping Lists<div class="uk-nav-subtitle" disabled>You are currently viewing a shopping list...</div></div>
-                                        </a>
-                                    </li>
-                                    <li><a href="/groups">Groups</a></li>
+                                <a href>Apps</a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li><a href="/recipes">Recipes</a></li>
+                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                         <li class="uk-nav-header">Logistics</li>
                                         <li><a href="/items">Items</a></li>
-                                    <li><a href="/transaction">Add Transaction</a></li>
-                                    <li><a href="/workshop">Workshop</a></li>
+                                        <li><a href="/items/transaction">Transaction</a></li>
                                         <li><a href="/receipts">Receipts</a></li>
-                                    <li class="uk-nav-header">System Management</li>
-                                    {% if system_admin %}
-                                    <li><a href="/admin">Administration</a></li>
-                                    {% endif %}
-                                    <li><a href="" class="">{{username}}</a></li>
+                                        <li class="uk-nav-header">Points of Ease</li>
+                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
+                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                     </ul>
-                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
                                 </div>
+                            </li>
+                        </ul>
+
                     </div>
-                        <div class="uk-navbar-left uk-margin-small">
-                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle></a>
-                        </div>
-                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
-                            <ul class="uk-breadcrumb">
-                                <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
+                    <!-- Breadcrumbs Navigation -->
+                    <div class="uk-navbar-center uk-visible@m">
+                        <ul class="uk-breadcrumb uk-margin-remove">
+                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                 <div uk-dropdown="mode: hover">
                                     <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-nav-header">Select Site</li>
+                                        <li class="uk-nav-divider"></li>
                                         {% for site in sites %}
                                         {% if site == current_site %}
                                         <li><a class="uk-disabled" href="#">{{site}}</a></li>
@@ -71,22 +66,34 @@
                                     </ul>
                                 </div>
                             </li>
-                                <li style="cursor: default; user-select: none;"><span>Apps</span></li>
+                            <li style="cursor: default; user-select: none;" class="uk-disabled"><span>Modules</span></li>
                             <li class="uk-disabled"><span>Shopping Lists</span></li>
+                            <li class="uk-disabled"><span>Viewing Shopping List</span></li>
                         </ul>
                     </div>
+                    <!-- Profile/Management Navigation-->
                     <div class="uk-navbar-right">
-                            <div>
-                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
-                            </div>
-                            <div>
-                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
+                        <ul class="uk-navbar-nav">
+                            <li>
+                                <a href="#">
+                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
+                                            {{username}}
+                                </a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li><a href="/profile">Profile</a></li>
+                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
+                                        <li><a href="/site-management">Site Management</a></li>
+                                        <li><a href="/administration">System Management</a></li>
+                                        <li><a href="/access/logout">Logout</a></li>
+                                    </ul>
                                 </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </nav>
-        </div>
         <div class="uk-container">
             <div class="uk-section">
                 <div class="uk-grid-small" uk-grid>

application/site_management/static/js/site_management_handler.js

@@ -71,7 +71,7 @@ let zones_current_page = 1
 let zones_end_page = 10
 let zones_limit = 25
 async function fetchZones(){
-    const url = new URL('/site_management/api/getZones', window.location.origin)
+    const url = new URL('/site-management/api/getZones', window.location.origin)
     url.searchParams.append('page', zones_current_page)
     url.searchParams.append('limit', zones_limit)
     const response = await fetch(url)
@@ -220,7 +220,7 @@ async function postAddZone() {
     let zoneName = `${document.getElementById('ZoneName').value}`
     let description = `${document.getElementById('ZoneDescription').value}`
 
-    const response = await fetch(`/site_management/api/postAddZone`, {
+    const response = await fetch(`/site-management/api/postAddZone`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -251,7 +251,7 @@ async function postAddZone() {
 async function postEditZone(zone_id) {
     let description = `${document.getElementById('ZoneDescription').value}`
 
-    const response = await fetch(`/site_management/api/postEditZone`, {
+    const response = await fetch(`/site-management/api/postEditZone`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -284,7 +284,7 @@ let locations_current_page = 1
 let locations_end_page = 10
 let locations_limit = 25
 async function fetchLocations(){
-    const url = new URL('/site_management/api/getLocations', window.location.origin)
+    const url = new URL('/site-management/api/getLocations', window.location.origin)
     url.searchParams.append('page', locations_current_page)
     url.searchParams.append('limit', locations_limit)
     const response = await fetch(url)
@@ -451,7 +451,7 @@ let vendors_current_page = 1
 let vendors_end_page = 10
 let vendors_limit = 25
 async function fetchVendors(){
-    const url = new URL('/site_management/api/getVendors', window.location.origin)
+    const url = new URL('/site-management/api/getVendors', window.location.origin)
     url.searchParams.append('page', vendors_current_page)
     url.searchParams.append('limit', vendors_limit)
     const response = await fetch(url)
@@ -604,7 +604,7 @@ async function postAddVendor() {
     let vendor_phone_number = document.getElementById('VendorPhoneNumber').value
     let vendor_address = document.getElementById('VendorAddress').value
 
-    const response = await fetch(`/site_management/api/postAddVendor`, {
+    const response = await fetch(`/site-management/api/postAddVendor`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -638,7 +638,7 @@ async function postEditVendor(vendor_id) {
     let vendor_phone_number = document.getElementById('VendorPhoneNumber').value
     let vendor_address = document.getElementById('VendorAddress').value
 
-    const response = await fetch(`/site_management/api/postEditVendor`, {
+    const response = await fetch(`/site-management/api/postEditVendor`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -671,7 +671,7 @@ let brands_current_page = 1
 let brands_end_page = 10
 let brands_limit = 25
 async function fetchBrands(){
-    const url = new URL('/site_management/api/getBrands', window.location.origin)
+    const url = new URL('/site-management/api/getBrands', window.location.origin)
     url.searchParams.append('page', brands_current_page)
     url.searchParams.append('limit', brands_limit)
     const response = await fetch(url)
@@ -813,7 +813,7 @@ async function openEditBrandsModal(brand) {
 async function postAddBrand() {
     let brand_name = document.getElementById('BrandName').value
 
-    const response = await fetch(`/site_management/api/postAddBrand`, {
+    const response = await fetch(`/site-management/api/postAddBrand`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -843,7 +843,7 @@ async function postAddBrand() {
 async function postEditBrand(brand_id) {
     let brand_name = document.getElementById('BrandName').value
 
-    const response = await fetch(`/site_management/api/postEditBrand`, {
+    const response = await fetch(`/site-management/api/postEditBrand`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -876,7 +876,7 @@ let prefix_current_page = 1
 let prefix_end_page = 10
 let prefix_limit = 25
 async function fetchPrefixes(){
-    const url = new URL('/site_management/api/getPrefixes', window.location.origin)
+    const url = new URL('/site-management/api/getPrefixes', window.location.origin)
     url.searchParams.append('page', prefix_current_page)
     url.searchParams.append('limit', prefix_limit)
     const response = await fetch(url)
@@ -1029,7 +1029,7 @@ async function postAddPrefix() {
     let prefix_name = document.getElementById('PrefixName').value
     let prefix_description = document.getElementById('PrefixDescription').value
 
-    const response = await fetch(`/site_management/api/postAddPrefix`, {
+    const response = await fetch(`/site-management/api/postAddPrefix`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -1063,7 +1063,7 @@ async function postEditPrefix(prefix_id) {
     let prefix_name = document.getElementById('PrefixName').value
     let prefix_description = document.getElementById('PrefixDescription').value
 
-    const response = await fetch(`/site_management/api/postEditPrefix`, {
+    const response = await fetch(`/site-management/api/postEditPrefix`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',

logs/database.log

@@ -0,0 +1,4 @@
+
+2025-08-03 08:25:07.786121 --- ERROR --- DatabaseError(message=''int' object does not support indexing',
+                                         payload=1,
+                                         sql='SELECT * FROM logins WHERE id=%s;')

webserver.py

@@ -40,10 +40,10 @@ oauth.register(
 assets = Environment(app)
 app.secret_key = '11gs22h2h1a4h6ah8e413a45'
 app.register_blueprint(access_api.access_api, url_prefix="/access")
-app.register_blueprint(administration_api.admin_api, url_prefix='/admin')
+app.register_blueprint(administration_api.admin_api, url_prefix='/administration')
 app.register_blueprint(items_API.items_api, url_prefix='/items')
 app.register_blueprint(poe_api.point_of_ease, url_prefix='/poe')
-app.register_blueprint(site_management_api.site_management_api, url_prefix="/site_management")
+app.register_blueprint(site_management_api.site_management_api, url_prefix="/site-management")
 app.register_blueprint(receipts_api.receipt_api, url_prefix='/receipts')
 app.register_blueprint(shoplist_api.shopping_list_api, url_prefix="/shopping-lists")
 app.register_blueprint(recipes_api.recipes_api, url_prefix='/recipes')
@@ -60,7 +60,7 @@ def inject_user():
         with psycopg2.connect(**database_config) as conn:
             try:
                 with conn.cursor() as cur:
-                    sql = f"SELECT id, username, sites, site_roles, system_admin, flags FROM logins WHERE id=%s;"
+                    sql = f"SELECT id, username, sites, site_roles, system_admin, flags, profile_pic_url, login_type FROM logins WHERE id=%s;"
                     cur.execute(sql, (session['user_id'],))
                     user = cur.fetchone()
                     user = database.tupleDictionaryFactory(cur.description, user)