improvements

2025-08-31 18:09:07 -04:00
parent b6717e0cb1
commit ae7f3989fc
49 changed files with 838 additions and 91 deletions
--- a/index.html
+++ b/index.html
@@ -1,18 +1,124 @@
 <!doctype html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Phenix Customer Portal" />
+    <!-- Performance Monitoring -->
    <script>
-      __phenixPageLoadTime = new Date().getTime();
+      window.__phenixPageLoadTime = new Date().getTime();
+    </script>
+
+    <!-- Basic Meta Tags -->
+    <meta charset="utf-8" />
+    <title>Customer Portal - Phenix</title>
+    <meta name="description" content="Phenix Real Time Solutions Customer Portal" />
+    <meta name="author" content="Phenix Real Time Solutions" />
+
+    <!-- Mobile & Display -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="./phenix.ico" />
+    <link rel="icon" type="image/x-icon" href="./phenix.ico" />
+
+    <!-- Base Path Configuration for React Router -->
+    <script>
+      (function () {
+        'use strict';
+
+        // Define main application routes
+        const APP_ROUTES = ['channels', 'login', 'rooms', 'analytics', 'qos', 'dashboard'];
+
+        // Get current URL path and split into segments
+        const currentPath = window.location.pathname;
+        const pathSegments = currentPath.split('/').filter(segment => segment.length > 0);
+
+        // Find the first segment that matches an app route
+        const routeIndex = pathSegments.findIndex(segment => APP_ROUTES.includes(segment));
+
+        // Calculate base path for the application
+        let basePath = '/';
+
+        if (routeIndex >= 0) {
+          // Extract segments up to (but not including) the route
+          // Special handling for login route
+          const includeRouteSegment = pathSegments[routeIndex] === 'login';
+          const baseSegments = pathSegments.slice(0, routeIndex + (includeRouteSegment ? 1 : 0));
+
+          if (baseSegments.length > 0) {
+            basePath = '/' + baseSegments.join('/') + '/';
+          }
+        }
+
+        // Set the base href for the application
+        document.write(`<base href="${basePath}" />`);
+      })();
+    </script>
+
+    <!-- Browser Compatibility Check -->
+    <script>
+      (function () {
+        'use strict';
+
+        // Redirect unsupported browsers
+        const isUnsupportedBrowser = /MSIE|Trident/.test(window.navigator.userAgent);
+        if (isUnsupportedBrowser) {
+          const searchParams = window.location.search || '';
+          window.location.href = '/unsupported-browser.html' + searchParams;
+        }
+      })();
+    </script>
+
+    <!-- Google Analytics -->
+    <script>
+      (function () {
+        'use strict';
+
+        // Skip analytics for local environments
+        const hostname = window.location.hostname;
+        const isLocal = hostname.startsWith('local') || hostname.endsWith('-local') || hostname.includes('localhost');
+
+        if (isLocal) {
+          return;
+        }
+
+        // Determine environment and set GA ID
+        const isStaging = hostname.startsWith('stg-') || hostname.endsWith('-stg') || hostname.includes('-stg-') || hostname === 'stg';
+
+        const GA_MEASUREMENT_ID = isStaging ? 'G-TXBY6KV20H' : 'G-0RYP945E1S';
+
+        // Initialize dataLayer
+        window.dataLayer = window.dataLayer || [];
+
+        // Load Google Analytics script
+        const script = document.createElement('script');
+        script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
+        script.async = true;
+        document.head.appendChild(script);
+
+        // Initialize gtag
+        function gtag() {
+          window.dataLayer.push(arguments);
+        }
+
+        window.gtag = gtag;
+        gtag('js', new Date());
+        gtag('config', GA_MEASUREMENT_ID);
+      })();
    </script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Phenix Customer Portal</title>
  </head>
+
  <body>
+    <!-- Fallback for users with JavaScript disabled -->
+    <!-- <noscript>
+    <div style="text-align: center; padding: 2rem; font-family: Arial, sans-serif;">
+      <h1>JavaScript Required</h1>
+      <p>You need to enable JavaScript to use the Phenix Customer Portal.</p>
+      <p>Please enable JavaScript in your browser settings and refresh this page.</p>
+    </div>
+  </noscript> -->
+
+    <!-- React App Root -->
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
-</html>
+</html>