Botts-Innovative-Research · tyronechrisharris · Mar 26, 2026
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "@mui/icons-material": "^5.10.14",
     "@mui/material": "^5.16.4",
     "@mui/styles": "^6.1.4",
+    "@mui/system": "^7.3.9",
     "@mui/x-data-grid": "^7.11.1",
     "@mui/x-date-pickers": "^7.20.0",
     "@reduxjs/toolkit": "^2.2.7",
@@ -76,6 +77,7 @@
     "html-webpack-tags-plugin": "^3.0.2",
     "https-browserify": "^1.0.0",
     "idb": "^7.1.1",
+    "jsqr": "^1.4.0",
     "leaflet": "^1.9.4",
     "next": "^14.2.5",
     "node-polyfill-webpack-plugin": "^2.0.1",
@@ -85,6 +87,7 @@
     "osh-js": "^3.1.5",
     "patch-package": "^6.5.0",
     "path-browserify": "^1.0.1",
+    "qr-scanner": "^1.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.5",

diff --git a/patches/osh-js+3.1.5.patch b/patches/osh-js+3.1.5.patch
@@ -0,0 +1,55 @@
+diff --git a/node_modules/osh-js/core/parsers/JsonDataParser.js b/node_modules/osh-js/core/parsers/JsonDataParser.js
+index 8bb9f66..0c26f5c 100644
+--- a/node_modules/osh-js/core/parsers/JsonDataParser.js
++++ b/node_modules/osh-js/core/parsers/JsonDataParser.js
+@@ -58,10 +58,13 @@ var JsonDataParser = /** @class */ (function (_super) {
+                 jsonData = input;
+             }
+         }
++        if (!jsonData) return [];
+         if (Array.isArray(jsonData)) {
+             for (var _i = 0, jsonData_1 = jsonData; _i < jsonData_1.length; _i++) {
+                 var d = jsonData_1[_i];
+-                d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                if (d) {
++                    d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                }
+             }
+             return jsonData;
+         }
+diff --git a/node_modules/osh-js/source/core/mqtt/MqttProvider.js b/node_modules/osh-js/source/core/mqtt/MqttProvider.js
+index fb0b3a8..75a9ba2 100644
+--- a/node_modules/osh-js/source/core/mqtt/MqttProvider.js
++++ b/node_modules/osh-js/source/core/mqtt/MqttProvider.js
+@@ -166,10 +166,10 @@ class MqttProvider {
+             this.client.on('message', this.onMessage.bind(this));
+
+             this.client.on('offline', e => {
+-                throw new Error(`The server ${that.endpoint} seems offline`);
++                console.warn(`The server ${that.endpoint} seems offline`);
+             });
+             this.client.on('error', e => {
+-                throw new Error(error);
++                console.error(e);
+             });
+         }
+     }
+diff --git a/node_modules/osh-js/source/core/parsers/JsonDataParser.js b/node_modules/osh-js/source/core/parsers/JsonDataParser.js
+index 67eb795..57490eb 100644
+--- a/node_modules/osh-js/source/core/parsers/JsonDataParser.js
++++ b/node_modules/osh-js/source/core/parsers/JsonDataParser.js
+@@ -38,9 +38,13 @@ class JsonDataParser extends GenericParser {
+             }
+         }
+
++        if (!jsonData) return [];
++
+         if(Array.isArray(jsonData)) {
+             for(let d of jsonData) {
+-                d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                if (d) {
++                    d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                }
+             }
+             return jsonData;
+         } else {
diff --git a/public/config/spectroscopy-info.json b/public/config/spectroscopy-info.json
@@ -0,0 +1,9 @@
+{
+  "api_version": "1.0",
+  "endpoint": "/buckets/adjudication",
+  "allowed_detectors": ["GR-100", "NS-500", "GN-Scan"],
+  "calibration_factors": {
+    "gamma": 1.0,
+    "neutron": 1.0
+  }
+}
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,16 @@
+{
+  "name": "OSCAR Viewer",
+  "short_name": "OSCAR",
+  "description": "Open Source Central Alarm Station Viewer",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/opensensorhub.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2024. Botts Innovative Research, Inc.
+ * All Rights Reserved
+ */
+
+const CACHE_NAME = 'oscar-v1';
+const OFFLINE_URL = '/offline.html';
+
+const DENY_LIST = [
+    '/sensorhub/sos',
+    '/sensorhub/sps',
+    '/api/auth',
+    '/setup'
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll([
+                OFFLINE_URL,
+                '/favicon.ico',
+                '/opensensorhub.png'
+            ]);
+        })
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    const url = new URL(event.request.url);
+
+    // Security: Never cache sensitive telemetry or auth routes
+    if (DENY_LIST.some(path => url.pathname.startsWith(path))) {
+        return;
+    }
+
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            return response || fetch(event.request).catch(() => {
+                if (event.request.mode === 'navigate') {
+                    return caches.match(OFFLINE_URL);
+                }
+            });
+        })
+    );
+});
+
+self.addEventListener('push', (event) => {
+    const data = event.data ? event.data.json() : {};
+    // Use the push payload for localization if available; otherwise fallback to the server-sent strings.
+    const title = data.title;
+    const options = {
+        body: data.body,
+        icon: '/opensensorhub.png',
+        badge: '/favicon.ico',
+        data: {
+            url: data.url || '/'
+        }
+    };
+
+    event.waitUntil(self.registration.showNotification(title, options));
+});
+
+self.addEventListener('notificationclick', (event) => {
+    event.notification.close();
+    event.waitUntil(
+        clients.openWindow(event.notification.data.url)
+    );
+});
diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
@@ -40,7 +40,7 @@ export default function DashboardPage() {
 
             laneDSMap.set(laneid, new LaneDSColl());
 
-            lane.datastreams.forEach((ds, idx) => {
+            lane.datastreams?.forEach((ds, idx) => {
 
                 let rtDS = lane.datasourcesRealtime?.[idx];
 
@@ -55,19 +55,19 @@ export default function DashboardPage() {
                 let laneDSColl = laneDSMap.get(laneid);
 
                 if(isGammaDataStream(ds))
-                    laneDSColl.addDS('gammaRT', rtDS);
+                    laneDSColl?.addDS('gammaRT', rtDS);
 
                 if(isNeutronDataStream(ds))
-                    laneDSColl.addDS('neutronRT', rtDS);
+                    laneDSColl?.addDS('neutronRT', rtDS);
 
                 if(isTamperDataStream(ds))
-                    laneDSColl.addDS('tamperRT', rtDS);
+                    laneDSColl?.addDS('tamperRT', rtDS);
 
                 if(isConnectionDataStream(ds))
-                    laneDSColl.addDS('connectionRT', rtDS);
+                    laneDSColl?.addDS('connectionRT', rtDS);
 
                 if(isThresholdDataStream(ds))
-                    laneDSColl.addDS('gammaTrshldRT', rtDS);
+                    laneDSColl?.addDS('gammaTrshldRT', rtDS);
             });
 
             newStatusList.push({

diff --git a/src/app/_components/AlarmAudio.tsx b/src/app/_components/AlarmAudio.tsx
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Box from "@mui/material/Box";
 import {Alert} from "@mui/material";
 import { selectAlarmAudioVolume } from "@/lib/state/OSCARClientSlice";
+import { useLanguage } from '@/contexts/LanguageContext';
 
 let alarmAudio: HTMLAudioElement | null = null;
 
@@ -17,6 +18,7 @@ export function getAlarmAudio() {
 }
 
 export default function AlarmAudio() {
+    const { t } = useLanguage();
     const dispatch = useDispatch();
     const savedVolume = useSelector(selectAlarmAudioVolume);
     const triggerAlarm = useSelector((state: RootState) => selectTriggeredAlarm(state));
@@ -61,7 +63,7 @@ export default function AlarmAudio() {
 
             {soundLocked && (
                 <Alert severity="info" sx={{ mb: 2, fontSize: "0.8rem" }}>
-                    Click anywhere to enable alarm sound
+                    {t('clickAnywhereToEnableAlarmSound')}
                 </Alert>
             )}
 

diff --git a/src/app/_components/LanguageSelector.tsx b/src/app/_components/LanguageSelector.tsx
@@ -1,15 +1,41 @@
 "use client";
 
-import React, { useState } from 'react';
-import { Select, MenuItem, FormControl, InputLabel, SelectChangeEvent } from '@mui/material';
+import React from 'react';
+import { Select, MenuItem, FormControl, SelectChangeEvent } from '@mui/material';
 import { useLanguage } from '@/contexts/LanguageContext';
 import LanguageIcon from '@mui/icons-material/Language';
 
+const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'es', name: 'Español' },
+    { code: 'fr', name: 'Français' },
+    { code: 'ar', name: 'العربية' },
+    { code: 'ru', name: 'Русский' },
+    { code: 'zh-CN', name: '简体中文' },
+    { code: 'ja', name: '日本語' },
+    { code: 'ko', name: '한국어' },
+    { code: 'ar-JO', name: 'العربية (الأردن)' },
+    { code: 'lv', name: 'Latviešu' },
+    { code: 'et', name: 'Eesti' },
+    { code: 'pt', name: 'Português' },
+    { code: 'de', name: 'Deutsch' },
+    { code: 'th', name: 'ไทย' },
+    { code: 'hi', name: 'हिन्दी' },
+    { code: 'bn', name: 'বাংলা' },
+    { code: 'pa-PK', name: 'پنجابی' },
+    { code: 'vi', name: 'Tiếng Việt' },
+    { code: 'yue', name: '粵語' },
+    { code: 'tr', name: 'Türkçe' },
+    { code: 'id', name: 'Bahasa Indonesia' },
+    { code: 'ur', name: 'اردو' },
+    { code: 'it', name: 'Italiano' }
+];
+
 export default function LanguageSelector() {
   const { language, setLanguage } = useLanguage();
 
   const handleChange = (event: SelectChangeEvent) => {
-    setLanguage(event.target.value as 'en' | 'es' | 'fr');
+    setLanguage(event.target.value as any);
   };
 
   return (
@@ -19,18 +45,28 @@ export default function LanguageSelector() {
         value={language}
         onChange={handleChange}
         displayEmpty
-        inputProps={{ 'aria-label': 'Without label' }}
-        startAdornment={<LanguageIcon sx={{ mr: 1 }} />}
+        inputProps={{ 'aria-label': 'Language' }}
+        startAdornment={<LanguageIcon sx={{ mr: 1, color: 'inherit' }} />}
         renderValue={(selected) => {
-            if (selected === 'en') return 'English';
-            if (selected === 'es') return 'Español';
-            if (selected === 'fr') return 'Français';
-            return selected;
+            const lang = languages.find(l => l.code === selected);
+            return lang ? lang.name : selected;
+        }}
+        sx={{
+            color: 'inherit',
+            '& .MuiSelect-select': {
+                paddingTop: '4px',
+                paddingBottom: '4px',
+            },
+            '&:before': { borderBottomColor: 'rgba(255, 255, 255, 0.7)' },
+            '&:after': { borderBottomColor: 'white' },
+            '& .MuiSvgIcon-root': { color: 'inherit' }
         }}
       >
-        <MenuItem value="en">English</MenuItem>
-        <MenuItem value="es">Español</MenuItem>
-        <MenuItem value="fr">Français</MenuItem>
+        {languages.map((lang) => (
+            <MenuItem key={lang.code} value={lang.code}>
+                {lang.name}
+            </MenuItem>
+        ))}
       </Select>
     </FormControl>
   );

diff --git a/src/app/_components/Navbar.tsx b/src/app/_components/Navbar.tsx
@@ -201,7 +201,7 @@ export default function Navbar({children}: { children: React.ReactNode }) {
                 <Toolbar>
                     <IconButton
                         color="inherit"
-                        aria-label="open drawer"
+                        aria-label={t('openDrawer')}
                         onClick={handleDrawerOpen}
                         edge="start"
                         sx={{
@@ -220,7 +220,7 @@ export default function Navbar({children}: { children: React.ReactNode }) {
                             <Tooltip title={t('alarmVolume')} arrow placement="top">
                                 <IconButton
                                     color="inherit"
-                                    aria-label="open notifications"
+                                    aria-label={t('openNotifications')}
                                     onClick={handleMenuOpen}
                                 >
                                     {savedVolume === 0 ? <NotificationsOffIcon/> : <NotificationsRoundedIcon/>}
@@ -256,7 +256,7 @@ export default function Navbar({children}: { children: React.ReactNode }) {
                         <Stack spacing={2} direction="row" sx={{alignItems: 'center', mb: 1}}>
                             <VolumeDown/>
                             <Slider
-                                aria-label="Volume"
+                                aria-label={t('volume')}
                                 value={volumeValue}
                                 onChange={handleVolumeChange}
                                 valueLabelDisplay="auto"