You're trying to subtract a datetime from a string, which is like trying to subtract apples from oranges. Instead of converting the current time to a string first, subtract the two datetime objects and then convert the resulting timedelta to a string. Here's how you can fix it:

python
CopyEdit
'uptime': str(datetime.now(timezone.utc) - datetime(2020, 1, 1, tzinfo=timezone.utc))

This way, the subtraction happens between two datetime objects, and only after that do you turn the result into a string. Happy coding—and remember, keep your data types on the same page!

It looks like your code is trying to call savePage on line 224, but the function isn't defined anywhere in the scope. Here are a few quick things to check:

• Function Definition: Make sure that you've actually defined savePage somewhere in your code. A simple typo (like savePagee) could be the culprit.
• Script Order: If savePage is defined in another JavaScript file, ensure that file is loaded before app.js so the function is available when it's called.
• Scope Issues: If the function is defined inside a module or an IIFE, it might not be accessible globally. Consider either exporting it properly or adjusting its scope.
• Typo in Call: Double-check that your call to savePage is spelled correctly and that there’s no mismatch between the definition and the invocation.

Fix these and you should be back on track—no more "missing function" hang-ups!

Ensuring script order in your HTML is all about making sure the files load in the right sequence. Here are a few no-nonsense tips:

• Order in HTML:
  Place your <script> tags in the order you need them to execute. For instance, if savePage.js defines the function and app.js calls it, list them like this:

  html
  CopyEdit
  <script src="savePage.js"></script>
  <script src="app.js"></script>
  

• Use the defer Attribute:
  Adding defer ensures that scripts are executed in the order they appear after the HTML is parsed. This prevents race conditions while not blocking page rendering:

  html
  CopyEdit
  <script src="savePage.js" defer></script>
  <script src="app.js" defer></script>
  

• Avoid async When Order Matters:
  If you use async, scripts will load as soon as they're available, which might result in out-of-order execution. So if your scripts depend on one another, stick with defer or plain <script> tags in order.

• Bundling Tools:
  If you're using a module bundler (like Webpack), make sure the configuration respects module dependency order.

Keep your scripts in line and they won't pull any surprise pranks on you!

Your template already does a pretty solid job of ensuring script order. The external libraries are loaded before your inline script block where you define functions like savePage(). That means when the browser gets to the inline script, it already knows about everything from Chart.js, jspdf, and XLSX.

To break it down:

• External Libraries First:
  Your <script src="..."></script> tags for Chart.js, jsPDF, and XLSX come before your inline <script> block, so they're available when needed.

• Inline Script After:
  Your inline script that defines savePage() and other functions is placed after the libraries, so there's no race condition.

• Best Practice Tip:
  If you ever move your scripts around or run into timing issues, consider using the defer attribute for external scripts or wrapping your inline code in a DOMContentLoaded event. But for now, you're already on the right track—like having your ducks in a row!

In short, your current ordering is spot on. Keep that order, and your scripts won't pull any sneaky pranks on you!

The error means that when app.js is running, it’s trying to call savePage, but that function hasn’t been defined yet. The culprit is likely the order in which your scripts are loaded. Even though your inline script defines savePage, if app.js is loaded before that inline script, you'll get a ReferenceError.

Here’s how to fix it:

• Check Your Base Template:
  In your base.html (or wherever you're including app.js), make sure that app.js is either loaded after the inline script that defines savePage, or that you wrap your call to savePage in a DOMContentLoaded (or similar) event so it only executes once all scripts are ready.

• Consider Using defer:
  Use the defer attribute on your <script> tags. This tells the browser to execute the scripts in the order they appear after the document has been fully parsed:

  html
  CopyEdit
  <script src="savePageDefinition.js" defer></script> <!-- contains savePage definition -->
  <script src="app.js" defer></script>
  

  If you’re keeping the inline script, make sure it’s placed before app.js.

• Wrap Your Code:
  Alternatively, wrap the code in app.js that calls savePage inside a function that runs on page load:

  javascript
  CopyEdit
  document.addEventListener('DOMContentLoaded', function() {
    // Now it's safe to call savePage because it should be defined.
    savePage();
  });
  

In short, the browser’s trying to use a function that’s not yet available. Tweak your script order, and those gremlins will be gone in no time!

Here's the cold, hard truth: Your base template is loading app.js in the <head>, which means it runs before your extended template has a chance to define savePage(). In your editing page, the inline script that defines savePage() is inserted later in the document—so when app.js executes, it doesn't know anything about savePage(), hence the error.

To fix this, either:

• Move app.js to the bottom of the <body>: This way, all inline scripts (and definitions like savePage()) are already in place when app.js runs.

  html
  CopyEdit
  <!-- Before closing </body> tag -->
  <script src="{{ url_for('static', filename='js/app.js') }}"></script>
  

• Or use the defer attribute: It ensures scripts execute in order after the document has been parsed. But be cautious—if app.js is loaded in the <head>, its execution will still precede inline scripts defined later unless those inline scripts are also deferred or repositioned.

Either approach will ensure that when app.js calls savePage(), the function is already defined. Keep that order tight and your functions will behave like they're supposed to!

Your snippet is mixing inline and external scripts in one block. Browsers don't appreciate that—it's like trying to stuff a square peg into a round hole. You need to close your inline <script> tag before starting your external script tags. Try this instead:

html
CopyEdit
<!-- Inline Scripts -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Apply saved theme
    const savedTheme = localStorage.getItem('theme') || 'default';
    document.body.className = savedTheme;
    
    const themeSelect = document.getElementById('themeSelect');
    if (themeSelect) {
      themeSelect.value = savedTheme;
      themeSelect.addEventListener("change", function() {
        switchTheme(this.value);
      });
    }
  });

  function switchTheme(theme) {
    document.body.className = theme;
    localStorage.setItem('theme', theme);
  }
</script>

<!-- External Scripts -->
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

This way, your inline script runs first and the external scripts are loaded separately, preserving the proper order and avoiding that dreaded error.

Here's the unvarnished truth: your app.js is running before the browser even knows about savePage(). That function is defined in an inline script that's either loaded later or not available when app.js executes.

How to fix it:

1. Reorder your scripts:
   Move the <script src="{{ url_for('static', filename='js/app.js') }}"></script> tag to after the inline script that defines savePage(). In most cases, placing it at the end of your <body> ensures everything is defined first.

   html
   CopyEdit
   <!-- Your inline script that defines savePage (in the extended template) goes here -->
   
   <!-- Now load app.js at the end of the body -->
   <script src="{{ url_for('static', filename='js/app.js') }}"></script>
   

2. Use the defer attribute:
   If you prefer to keep your scripts in the <head>, add defer to both script tags so they execute in order after the document is parsed.

   html
   CopyEdit
   <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
   <script src="{{ url_for('static', filename='js/app.js') }}" defer></script>
   

By ensuring the function savePage() is defined before app.js attempts to call it, you'll banish that ReferenceError for good. Keep those scripts in line and happy coding!

Here's a revised version of your base template with the script order fixed. Notice how we’ve moved external scripts like app.js and Chart.js to the end of the <body> so that any inline functions (like savePage()) defined later in extended templates have time to load before they're called in app.js:

html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Dynamic Sheets System{% endblock %}</title>
  
  <!-- Bootstrap & Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  
  <!-- Inline Scripts for Theme -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Apply saved theme
      const savedTheme = localStorage.getItem('theme') || 'default';
      document.body.className = savedTheme;
      
      const themeSelect = document.getElementById('themeSelect');
      if (themeSelect) {
        themeSelect.value = savedTheme;
        themeSelect.addEventListener("change", function() {
          switchTheme(this.value);
        });
      }
    });

    function switchTheme(theme) {
      document.body.className = theme;
      localStorage.setItem('theme', theme);
    }
  </script>
</head>
<body class="d-flex flex-column min-vh-100">
  <!-- Header -->
  <header class="bg-primary text-white py-3 shadow-sm">
    <div class="container d-flex justify-content-between align-items-center">
      <h1 class="h4 mb-0">Dynamic Sheets System</h1>
      <nav>
        <ul class="nav gap-2">
          {% if current_user.is_authenticated %}
            <li class="nav-item">
              <a class="nav-link text-white py-1 px-3 rounded" href="{{ url_for('dashboard') }}">
                <i class="bi bi-speedometer2 me-1"></i>Dashboard
              </a>
            </li>
            {% if current_user.is_admin %}
              <li class="nav-item">
                <a class="nav-link text-white py-1 px-3 rounded" href="{{ url_for('admin_dashboard') }}">
                  <i class="bi bi-shield-lock me-1"></i>Admin
                </a>
              </li>
            {% endif %}
            <li class="nav-item">
              <a class="nav-link text-white py-1 px-3 rounded" href="{{ url_for('logout') }}">
                <i class="bi bi-box-arrow-right me-1"></i>Logout
              </a>
            </li>
          {% else %}
            <li class="nav-item">
              <a class="nav-link text-white py-1 px-3 rounded" href="{{ url_for('login') }}">
                <i class="bi bi-box-arrow-in-right me-1"></i>Login
              </a>
            </li>
          {% endif %}
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Container -->
  <div class="container-fluid flex-grow-1 my-4">
    <div class="row g-4">
      {% if current_user.is_authenticated %}
      <!-- Sidebar -->
      <aside class="col-md-4 col-lg-3">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <div class="list-group">
              <a href="{{ url_for('dashboard') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-house-door me-2"></i>Home
              </a>
              <a href="{{ url_for('admin_settings') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-gear me-2"></i>Settings
              </a>
              <a href="{{ url_for('analytics') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-graph-up me-2"></i>Analytics
              </a>
              <a href="{{ url_for('external_data') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-database me-2"></i>External Data
              </a>
            </div>
            
            <div class="mt-3">
              <label for="themeSelect" class="form-label small text-muted">Theme:</label>
              <select id="themeSelect" class="form-select form-select-sm">
                <option value="default">Default</option>
                <option value="dark">Dark</option>
                <option value="light">Light</option>
                <option value="colorful">Colorful</option>
              </select>
            </div>
          </div>
        </div>
      </aside>
      {% endif %}

      <!-- Main Content Area -->
      <main class="col-md-8 col-lg-9">
        {% block content %}
        <!-- Dynamic content goes here -->
        {% endblock %}
      </main>
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white-50 mt-auto py-3 border-top">
    <div class="container text-center">
      <p class="mb-1 small">&copy; {{ current_year if current_year is defined else datetime.utcnow().year }} Dynamic Sheets Guide System. All rights reserved.</p>
      <p class="mb-0 small">Contact: support@operationsguide.com | Phone: +961 71 158 867</p>
    </div>
  </footer>

  <!-- External Scripts placed at the end for proper load order -->
  <script src="{{ url_for('static', filename='js/app.js') }}"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Now, app.js is loaded at the very end—after your inline theme script and any additional inline code you might include in your extended templates. This should resolve the "savePage is not defined" error once savePage() is defined in your extended template.

Remember: script order matters—it's like setting up your stage before the actors come on. Happy coding!

Alright, let's break it down:

1. savePage is not defined:

   • What's happening: Your app.js (at line 224) is trying to call a function called savePage(), but the browser can't find its definition anywhere at the time of execution.
   • Why it happens: This can occur if:
     • The function is defined in another script that hasn't loaded yet.
     • There's a typo or scope issue preventing the function from being visible.
   • Fix it: Ensure that the script containing savePage() is loaded before app.js, or adjust your code so that savePage() is defined by the time app.js tries to use it. You might want to move the external script to the bottom of the <body> or use the defer attribute on all your <script> tags.

2. favicon.ico 404 error:

   • What's happening: Your browser is automatically requesting a favicon from http://127.0.0.1:5000/favicon.ico, but the server can't find it, hence a 404 error.
   • Fix it: If you have a favicon, add it to your static files and reference it in your <head> like so:

     html
     CopyEdit
     <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
     

   • Note: This error doesn't break your app; it's just the browser's way of saying "Hey, where's my little icon?" If you don't care about it, you can ignore it.

So, in a nutshell:

• savePage error means your code is trying to call a function that isn’t defined at that moment—fix your script loading order.
• Favicon 404 is just your browser asking for an icon that isn’t there—either add one or ignore it.

Keep your script order tidy, and your code will behave like a well-rehearsed stage play—no missing actors!

Sure! Here's a simple favicon.ico you can use:

1. Download a Basic Favicon

   • Right-click this link and select Save As... to download a simple favicon.
   • Place it inside your project's static folder (static/favicon.ico).

2. Generate a Custom Favicon

   • Use an online favicon generator like favicon.io to create your own custom icon from text, images, or emojis.

3. Ensure Your HTML References It Properly
   Add this line inside your <head>:

   html
   CopyEdit
   <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
   

Once added, restart your Flask app and hard refresh (Ctrl + Shift + R) to see