`, iconSize: [18, 18], iconAnchor: [9, 9], popupAnchor: [0, -10] }); const asset = d.assetNumber ? String(d.assetNumber) : "(missing)"; const location = d.location ? String(d.location) : ""; const status = d.status ? String(d.status) : "unknown"; const health = d.healthStatus ? String(d.healthStatus) : "unknown"; const cmsName = (d.cmsName || "").trim(); const remoteName = (d.remoteName || "").trim(); const sentinalName = (d.name || "").trim(); const showCmsName = Boolean(cmsName) && cmsName !== sentinalName; const showRemoteName = Boolean(remoteName) && remoteName !== sentinalName; const popupHtml = `

${d.name || "Device"}

Asset # ${asset}

${showCmsName ? `

CMS name: ${cmsName}

` : ""} ${showRemoteName ? `

Remote name: ${remoteName}

` : ""} ${location ? `

${location}

` : ""}

Status: ${status} \u2022 Health: ${health}

`; const marker = L.marker([d.latitude, d.longitude], { icon }); marker.bindPopup(popupHtml, { closeButton: true }); clusterGroup.addLayer(marker); } }, [devices]); return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-white dark:bg-[#121212] flex flex-col" }, /* @__PURE__ */ React.createElement( Header, { sidebarOpen, setSidebarOpen, onRefresh } ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 min-h-0" }, /* @__PURE__ */ React.createElement(Sidebar, { sidebarOpen, setSidebarOpen }), /* @__PURE__ */ React.createElement("main", { className: "flex-1 p-3 md:p-6 lg:p-8 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "h1", { className: "text-2xl md:text-3xl font-bold text-[#012A66] dark:text-white", style: { fontFamily: "system-ui, -apple-system, sans-serif" } }, "Device Map" ), /* @__PURE__ */ React.createElement( "p", { className: "text-gray-600 dark:text-gray-400", style: { fontFamily: "system-ui, -apple-system, sans-serif" } }, "See all displays on a map and take quick action." )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: onRefresh, className: "flex items-center gap-2 px-3 py-2 bg-white dark:bg-[#1E1E1E] border border-gray-200 dark:border-[#404040] hover:bg-gray-50 dark:hover:bg-[#262626] transition-colors" }, /* @__PURE__ */ React.createElement(import_lucide_react3.RefreshCw, { size: 16 }), "Refresh" ))), /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300" }, /* @__PURE__ */ React.createElement( "span", { className: "w-3 h-3 rounded-full", style: { backgroundColor: "#16A34A" } } ), "Online"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300" }, /* @__PURE__ */ React.createElement( "span", { className: "w-3 h-3 rounded-full", style: { backgroundColor: "#D6344E" } } ), "Offline"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300" }, /* @__PURE__ */ React.createElement( "span", { className: "w-3 h-3 rounded-full", style: { backgroundColor: "#F59E0B" } } ), "Degraded"), /* @__PURE__ */ React.createElement("div", { className: "ml-2 text-sm text-gray-500 dark:text-gray-400" }, "Markers: ", devices.length, " \u2022 Missing coords: ", missing.length)), toast && /* @__PURE__ */ React.createElement("div", { className: `px-3 py-2 border text-sm ${toastClasses}` }, toast.message)), error && /* @__PURE__ */ React.createElement("div", { className: "mb-4 px-4 py-3 bg-red-50 text-red-800 border border-red-200 flex items-start gap-2" }, /* @__PURE__ */ React.createElement(import_lucide_react3.AlertTriangle, { size: 18, className: "mt-0.5" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "font-semibold" }, "Could not load map data"), /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, error.message || String(error)))), /* @__PURE__ */ React.createElement( "div", { className: "grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 min-h-0", style: { height: "calc(100vh - 240px)" } }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] border border-gray-200 dark:border-[#404040] overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { ref: mapDivRef, style: { width: "100%", height: "100%" } })), /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] border border-gray-200 dark:border-[#404040] p-4 overflow-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-3" }, /* @__PURE__ */ React.createElement("div", { className: "font-semibold text-gray-900 dark:text-white" }, "Missing coordinates"), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400" }, missing.length)), /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4" }, "These devices don\u2019t show on the map yet. Use \u201CGeocode\u201D to convert their location text into coordinates."), loading ? /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400" }, "Loading\u2026") : missing.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400" }, "All devices have coordinates.") : /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, missing.map((d) => { const label = d.assetNumber ? `#${d.assetNumber}` : "(no asset #)"; const hasLocation = Boolean((d.location || "").trim()); return /* @__PURE__ */ React.createElement( "div", { key: String(d.id), className: "border border-gray-200 dark:border-[#404040] p-3" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium text-gray-900 dark:text-white" }, d.name), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1" }, label), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1" }, hasLocation ? d.location : "No location set"), /* @__PURE__ */ React.createElement("div", { className: "mt-2 flex items-center gap-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => onGeocode(d.id), disabled: !hasLocation || geocoding, className: "px-3 py-2 text-sm bg-[#2188FF] text-white disabled:opacity-60" }, geocoding ? "Geocoding\u2026" : "Geocode" ), /* @__PURE__ */ React.createElement( "a", { href: `/assets`, className: "px-3 py-2 text-sm bg-white dark:bg-[#1E1E1E] border border-gray-200 dark:border-[#404040] text-gray-900 dark:text-gray-200" }, "Edit" )) ); })), /* @__PURE__ */ React.createElement("div", { className: "mt-5 text-xs text-gray-500 dark:text-gray-400" }, "Note: OpenStreetMap geocoding can return the wrong spot if the location text is vague. If you want, you can manually set Lat/Lng in Assets \u2192 Edit Display.")) )))); } // virtual:/apps/web/src/app/layout.jsx init_injected_globals(); // virtual:/apps/web/src/components/AutoSyncProvider.jsx init_injected_globals(); // virtual:/apps/web/src/hooks/useAutoSync.js init_injected_globals(); var import_react6 = __toESM(require_react()); function useAutoSync() { const queryClient2 = useQueryClient(); const [syncInterval, setSyncInterval] = (0, import_react6.useState)(30); const intervalRef = (0, import_react6.useRef)(null); const settingsPollRef = (0, import_react6.useRef)(null); const isSyncingRef = (0, import_react6.useRef)(false); const [lastSyncTime, setLastSyncTime] = (0, import_react6.useState)(null); const [isSyncing, setIsSyncing] = (0, import_react6.useState)(false); const fetchSyncInterval = (0, import_react6.useCallback)(async () => { try { const response = await fetch("/api/settings", { cache: "no-store" }); if (!response.ok) throw new Error("Failed to fetch settings"); const data = await response.json(); const intervalSetting = data.settings.find( (s) => s.setting_key === "syncInterval" ); if (intervalSetting && intervalSetting.setting_value) { const intervalSeconds = parseInt(intervalSetting.setting_value, 10); if (!isNaN(intervalSeconds) && intervalSeconds > 0) { setSyncInterval( (prev) => prev === intervalSeconds ? prev : intervalSeconds ); } } } catch (error) { console.error("Error fetching sync interval:", error); } }, []); (0, import_react6.useEffect)(() => { fetchSyncInterval(); settingsPollRef.current = setInterval(() => { fetchSyncInterval(); }, 3e4); return () => { if (settingsPollRef.current) { clearInterval(settingsPollRef.current); } }; }, [fetchSyncInterval]); const performSync = (0, import_react6.useCallback)(async () => { if (isSyncingRef.current) return; isSyncingRef.current = true; setIsSyncing(true); try { console.log("[AutoSync] Starting automatic sync..."); const response = await fetch("/api/devices/sync", { method: "POST", headers: { "Content-Type": "application/json" }, cache: "no-store" }); if (response.ok) { const data = await response.json(); console.log("[AutoSync] Sync complete:", data); setLastSyncTime(/* @__PURE__ */ new Date()); queryClient2.invalidateQueries(); if (typeof window !== "undefined") { window.dispatchEvent( new CustomEvent("autosync:complete", { detail: data }) ); } fetchSyncInterval(); } else { const txt = await response.text(); console.error("[AutoSync] Sync failed:", response.status, txt); } } catch (error) { console.error("[AutoSync] Error during sync:", error); } finally { isSyncingRef.current = false; setIsSyncing(false); } }, [fetchSyncInterval, queryClient2]); (0, import_react6.useEffect)(() => { if (intervalRef.current) { clearInterval(intervalRef.current); } performSync(); const intervalMs = syncInterval * 1e3; console.log( `[AutoSync] Setting up auto-sync every ${syncInterval} seconds` ); intervalRef.current = setInterval(() => { performSync(); }, intervalMs); return () => { if (intervalRef.current) { clearInterval(intervalRef.current); } }; }, [performSync, syncInterval]); return { lastSyncTime, isSyncing, syncInterval, manualSync: performSync }; } // virtual:/apps/web/src/components/AutoSyncProvider.jsx function AutoSyncProvider({ children }) { useAutoSync(); return /* @__PURE__ */ React.createElement(React.Fragment, null, children); } // virtual:/apps/web/src/app/layout.jsx var import_react9 = __toESM(require_react()); // virtual:/apps/web/src/components/AuthGate.jsx init_injected_globals(); var import_react8 = __toESM(require_react()); // virtual:/apps/web/src/utils/useUser.js init_injected_globals(); var React9 = __toESM(require_react()); var import_react7 = __toESM(require_react2()); var useUser = () => { const { data: session, status } = (0, import_react7.useSession)(); const id = session?.user?.id; const [user, setUser] = React9.useState(session?.user ?? null); const fetchUser = React9.useCallback(async (session2) => { return session2?.user; }, []); const refetchUser = React9.useCallback(() => { if (true) { if (id) { fetchUser(session).then(setUser); } else { setUser(null); } } }, [fetchUser, id]); React9.useEffect(refetchUser, [refetchUser]); if (false) { return { user, data: session?.user || null, loading: status === "loading", refetch: refetchUser }; } return { user, data: user, loading: status === "loading" || status === "authenticated" && !user, refetch: refetchUser }; }; var useUser_default = useUser; // virtual:/apps/web/src/components/AuthGate.jsx function isPublicPath(pathname) { if (!pathname) { return true; } const publicPrefixes = [ "/support-intake", "/kb", "/knowledge-base", "/account/signin", "/account/signup", "/account/logout" ]; for (const p of publicPrefixes) { if (pathname === p || pathname.startsWith(p + "/") || pathname.startsWith(p + "?")) { return true; } } if (pathname.startsWith("/account/2fa/verify")) { return false; } return false; } function roleAllowsPath(role, pathname) { const r = role || "viewer"; if (pathname === "/admin/bootstrap") { return true; } if (pathname.startsWith("/admin")) { return r === "admin"; } if (pathname === "/settings") { return r === "admin"; } return true; } function AuthGate({ children }) { const { data: user, loading } = useUser_default(); const [pathname, setPathname] = (0, import_react8.useState)(null); const [search, setSearch] = (0, import_react8.useState)(""); (0, import_react8.useEffect)(() => { if (typeof window === "undefined") { return; } setPathname(window.location.pathname); setSearch(window.location.search || ""); }, []); const isPublic = (0, import_react8.useMemo)(() => isPublicPath(pathname), [pathname]); const meQuery = useMe({ enabled: !!user && !isPublic }); (0, import_react8.useEffect)(() => { if (typeof window === "undefined") { return; } if (!pathname) { return; } if (loading) { return; } if (isPublic) { return; } const callbackUrl = encodeURIComponent(pathname + search); if (!user) { window.location.href = `/account/signin?callbackUrl=${callbackUrl}`; return; } const me = meQuery.data; if (!meQuery.isFetched) { return; } const role = me?.user?.role || "viewer"; if (!roleAllowsPath(role, pathname)) { window.location.href = "/access-denied"; return; } const needs2fa = !!me?.user?.totp_enabled; const has2fa = !!me?.twoFactorVerified; if (needs2fa && !has2fa && !pathname.startsWith("/account/2fa/verify")) { window.location.href = `/account/2fa/verify?callbackUrl=${callbackUrl}`; } }, [ isPublic, loading, meQuery.data, meQuery.isFetched, pathname, search, user ]); if (!pathname) { return children; } if (!isPublic && (loading || meQuery.isLoading)) { return null; } return children; } // virtual:/apps/web/src/app/layout.jsx var queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1e3 * 60 * 5, // 5 minutes cacheTime: 1e3 * 60 * 30, // 30 minutes retry: 1, refetchOnWindowFocus: false } } }); function FaviconSetter() { (0, import_react9.useEffect)(() => { if (typeof document === "undefined") { return; } const logoBase = "https://ucarecdn.com/bc4c0306-efae-474a-9ed9-7d1e40af8dcf/"; const faviconUrl = `${logoBase}-/resize/64x64/-/format/png/`; const touchIconUrl = `${logoBase}-/resize/180x180/-/format/png/`; const upsertLink = (rel, href, type) => { const selector = `link[rel="${rel}"]`; const existing = document.querySelector(selector); const link = existing || document.createElement("link"); link.rel = rel; link.href = href; if (type) { link.type = type; } if (!existing) { document.head.appendChild(link); } }; upsertLink("icon", faviconUrl, "image/png"); upsertLink("apple-touch-icon", touchIconUrl, "image/png"); }, []); return null; } function RootLayout({ children }) { return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(AutoSyncProvider, null, /* @__PURE__ */ React.createElement(FaviconSetter, null), /* @__PURE__ */ React.createElement(AuthGate, null, children))); } // virtual:/__wrapped_entry__.jsx function WrappedPage(props) { let content = /* @__PURE__ */ import_react10.default.createElement(DeviceMapPage, { ...props }); content = /* @__PURE__ */ import_react10.default.createElement(RootLayout, null, content); return content; } return __toCommonJS(wrapped_entry_exports); })(); /*! Bundled license information: lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.358.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) react/cjs/react-jsx-runtime.production.min.js: (** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */

SENTINAL

Device Map