<!doctype html>
<!-- data-theme="light": design system 3.0's tokens follow the OS dark-mode preference unless the page
     says otherwise, and VCOS has no dark mode. Remove when dark mode is decided (FD #658). -->
<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/images/vendoor-favicon.svg" />
    <link rel="icon" type="image/png" sizes="32x32" href="/images/vendoor-favicon-32.png" />
    <!-- Preconnect to Google Fonts for faster loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- Inter Font - Primary typeface for VCOS -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;800&display=swap" />
    <!-- Material Symbols for additional icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="apple-touch-icon" href="/images/vendoor-app-icon-180.png" />
    <!-- Viewport with dynamic zoom control for vTime routes -->
    <meta name="viewport" id="viewport-meta" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />
    <script>
      // Dynamically adjust viewport for vTime routes (disable zoom for field workers)
      (function() {
        const path = window.location.pathname;
        const viewportMeta = document.getElementById('viewport-meta');
        if (path.startsWith('/vtime') && viewportMeta) {
          viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover');
        }
      })();
    </script>
    <title>Vendoor - The Construction Operating System</title>
    <meta name="description" content="CRM/ERP/Project Management tool for commercial contractors" />
    
    <!-- PWA Manifest - Dynamically set based on route and organization parameter -->
    <script>
      // Set correct manifest before page loads to avoid conflicts
      // PWA Priority: vTime > VCOS Mobile > Global VCOS
      (function() {
        const path = window.location.pathname;
        const searchParams = new URLSearchParams(window.location.search);
        const orgId = searchParams.get('org');

        // VCOS Mobile PWA Routes (for field supervisors)
        const vcosMobileRoutes = [
          '/dashboard',
          '/visitors',
          '/check-in',
          '/check-out',
          '/cico',
          '/certs',
          '/chat',
          '/projects',
          '/team',
          '/learning',
          '/offline-sync',
          '/files',
          '/packages',
          '/signatures',
          '/equipment',
          '/containers',
          '/fleet',
          '/maintenance',
          '/verify-cert'
        ];

        // Routes excluded from VCOS Mobile PWA
        // NOTE: /camera-app is NOT listed here — it has its own dedicated PWA
        // branch (Priority 1.5 below) that selects its own manifest before the
        // VCOS Mobile check runs, mirroring how /vtime is handled. The legacy
        // /cameras and /cameras-mobile routes stay excluded.
        const excludedFromVCOS = [
          '/vtime',
          '/cameras',
          '/cameras-mobile',
          '/admintools',
          '/login',
          '/sign-up'
        ];

        let manifestPath = '/vcos-manifest.json'; // Default to global VCOS manifest
        let pwaType = 'global';

        // Priority 1: vTime has its own dedicated PWA
        if (path.startsWith('/vtime')) {
          // Create manifest dynamically as a data URL to ensure org parameter is included
          if (orgId) {
            const vtimeManifest = {
              id: `vtime-${orgId}`,
              name: 'vTime - Field Time Tracking',
              short_name: 'vTime',
              description: 'Offline-capable time tracking for construction field employees',
              start_url: `/vtime?org=${orgId}`,
              scope: '/',
              display: 'standalone',
              background_color: '#5F89F7',
              theme_color: '#5F89F7',
              orientation: 'portrait',
              icons: [
                { src: '/images/vendoor-app-icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
                { src: '/images/vendoor-app-icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' }
              ],
              categories: ['business', 'productivity', 'utilities']
            };

            // Create manifest as blob URL
            const manifestBlob = new Blob([JSON.stringify(vtimeManifest)], { type: 'application/json' });
            manifestPath = URL.createObjectURL(manifestBlob);
            console.log('📱 [index.html] Created vTime manifest blob with org:', orgId);
            console.log('📱 [index.html] Manifest start_url:', vtimeManifest.start_url);
          } else {
            manifestPath = '/vtime-manifest.json';
            console.log('📱 [index.html] Setting vTime manifest without org parameter');
          }
          pwaType = 'vtime';
        }
        // Priority 1.5: Camera App ("Vendoor Vision") has its own dedicated PWA.
        // Mirror vTime: build a DYNAMIC manifest so the installed home-screen
        // icon launches WITH the org baked into start_url (a static start_url of
        // "/camera-app" loses the org → "Couldn't load your sites"), carries the
        // correct Vendoor Vision name/icon, and is never a stale SW-cached file.
        else if (path.startsWith('/camera-app')) {
          if (orgId) {
            const cameraManifest = {
              id: `camera-vision-${orgId}`,
              name: 'Vendoor Vision',
              short_name: 'Vendoor Vision',
              description: 'Live jobsite camera monitoring, photo history, and recording requests',
              start_url: `/camera-app?org=${orgId}`,
              scope: '/',
              display: 'standalone',
              // Portrait-only — Vendoor Vision is a phone-and-tablet PWA where
              // every tab (Live / Active / Past / Alerts / Request) is laid out
              // for vertical scroll + thumb reach. Mirrors the static fallback
              // `/camera-app-manifest.json` which already pins portrait.
              orientation: 'portrait',
              background_color: '#5F89F7',
              theme_color: '#5F89F7',
              icons: [
                { src: '/images/vendoor-app-icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
                { src: '/images/vendoor-app-icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' }
              ],
              categories: ['business', 'productivity', 'utilities']
            };
            const cameraBlob = new Blob([JSON.stringify(cameraManifest)], { type: 'application/json' });
            manifestPath = URL.createObjectURL(cameraBlob);
            console.log('📷 [index.html] Created Vendoor Vision manifest blob with org:', orgId);
            console.log('📷 [index.html] Manifest start_url:', cameraManifest.start_url);
          } else {
            manifestPath = '/camera-app-manifest.json';
            console.log('📷 [index.html] Setting Vendoor Vision manifest without org parameter');
          }
          pwaType = 'camera';
        }
        // Priority 2: Check if route is for VCOS Mobile PWA
        else if (!excludedFromVCOS.some(route => path.startsWith(route))) {
          const isVCOSMobileRoute = vcosMobileRoutes.some(route =>
            path === route || path.startsWith(route + '/')
          );

          if (isVCOSMobileRoute || path === '/' || path === '/dashboard') {
            manifestPath = '/vcos-pwa-manifest.json';
            pwaType = 'vcos-mobile';
            console.log('📱 [index.html] Setting VCOS Mobile manifest');
          }
        }
        // Priority 3: Legacy certs manifest (backwards compatibility)
        else if (path.startsWith('/certs')) {
          manifestPath = '/manifest.json';
          pwaType = 'certs';
        }

        const link = document.createElement('link');
        link.rel = 'manifest';
        link.href = manifestPath;
        document.head.appendChild(link);

        console.log('📱 PWA Manifest loaded:', manifestPath, '(type:', pwaType + ')');

        // Store PWA type for later use by service worker registration
        window.__VENDOOR_PWA_TYPE__ = pwaType;
      })();
    </script>
    <!-- PWA Theme Colors -->
    <meta name="theme-color" content="#2563eb" />
    <meta name="msapplication-navbutton-color" content="#2563eb" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    
    <!-- PWA Capabilities -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="VCOS" />
    
    <!-- iOS Safari PWA Icons -->
    <link rel="apple-touch-icon" sizes="57x57" href="/images/vendoor-app-icon-57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="/images/vendoor-app-icon-60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/images/vendoor-app-icon-72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/images/vendoor-app-icon-76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="/images/vendoor-app-icon-114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="/images/vendoor-app-icon-120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/images/vendoor-app-icon-144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/images/vendoor-app-icon-152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/images/vendoor-app-icon-180.png" />
    
    <!-- iOS Safari Splash Screens -->
    <link rel="apple-touch-startup-image" href="/images/vendoor-app-icon-180.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
    <link rel="apple-touch-startup-image" href="/images/vendoor-app-icon-192.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
    <link rel="apple-touch-startup-image" href="/images/vendoor-app-icon-192.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" />
    <link rel="apple-touch-startup-image" href="/images/vendoor-app-icon-192.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" />
    
    <!-- Tablet & Device Optimizations -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="375" />

    <!-- Per-route iOS home-screen identity for the standalone PWAs.
         ICON (vTime + Vendoor Vision): the shared /images/vendoor-app-icon-192.png is
         transparent AND non-square, which iOS rejects as a home-screen icon (it falls
         back to a generated letter). Both apps point apple-touch-icon at the square,
         opaque /images/vendoor-icon-*.png so they share one real icon.
         NAME (Vendoor Vision only): iOS "Add to Home Screen" takes the name from
         apple-mobile-web-app-title (else the <title>), NOT reliably the manifest —
         override both to "Vendoor Vision" on the camera route. (vTime keeps its name.) -->
    <script>
      (function() {
        var path = window.location.pathname;
        var isCamera = path.startsWith('/camera-app');
        var isVtime = path.startsWith('/vtime');
        if (isCamera || isVtime) {
          document.querySelectorAll('link[rel="apple-touch-icon"]').forEach(function(l) {
            l.setAttribute('href', '/images/vendoor-app-icon-180.png');
          });
          var favicon = document.querySelector('link[rel="icon"]');
          if (favicon) favicon.setAttribute('href', '/images/vendoor-app-icon-192.png');
        }
        if (isCamera) {
          document.title = 'Vendoor Vision';
          var appleTitle = document.querySelector('meta[name="apple-mobile-web-app-title"]');
          if (appleTitle) appleTitle.setAttribute('content', 'Vendoor Vision');
        }
      })();
    </script>
    
    <!-- <script type="text/javascript" src="https://www.bugherd.com/sidebarv2.js?apikey=kefoqyszrxcocrg6bzuhka" async="true"></script> -->
    <script type="module" crossorigin src="/assets/index-VK2RmicI.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-C1sib8dn.css">
    <meta name="vendoor-build-commit" content="58a78d1">
    <meta name="vendoor-build-time" content="2026-10-24T03:28:00.845Z">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html> 