added sound effects, updated svgs and cleaned up bugs

src/App.tsx

@@ -19,7 +19,7 @@ function App() {
             <Route path="rear-camera-settings" element={<RearCamera />} />
             <Route path="system-settings" element={<SystemSettings />} />
             <Route path="session-settings" element={<Session />} />
-            {/* <Route path="*" element={<Navigate to="/" replace />} /> */}
+            <Route path="*" element={<Navigate to="/" replace />} />
           </Route>
         </Routes>
       </AlertHitProvider>

src/components/HistoryList/AlertItem.tsx

@@ -12,7 +12,6 @@ type AlertItemProps = {
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
-  const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404;
   const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
 
   const handleClick = () => {
@@ -36,13 +35,7 @@ const AlertItem = ({ item }: AlertItemProps) => {
             className="h-20 object-contain rounded-md"
           />
         )}
-        {isNPEDHit && (
-          <img
-            src={HotListImg}
-            alt="hotlistHit"
-            className="h-20 object-contain rounded-md"
-          />
-        )}
+
         <div className="flex flex-col">
           <small>MAKE: {item.make}</small>
           <small>MODEL: {item.model}</small>

src/components/SightingModal/SightingModal.tsx

@@ -25,7 +25,7 @@ const SightingModal = ({
 
   const handleAcknowledgeButton = () => {
     if (!sighting) {
-      toast.error("Cannot add sigthing to alert list");
+      toast.error("Cannot add sighting to alert list");
       handleClose();
       return;
     }
@@ -39,7 +39,6 @@ const SightingModal = ({
   const isNPEDHitA = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
   const isNPEDHitB = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
   const isNPEDHitC = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
-  const isNPEDHitD = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
 
   return (
     <>
@@ -88,13 +87,6 @@ const SightingModal = ({
                 className="h-20 object-contain rounded-md"
               />
             )}
-            {isNPEDHitD && (
-              <img
-                src={NPED_CAT_A}
-                alt="hotlistHit"
-                className="h-20 object-contain rounded-md"
-              />
-            )}
           </div>
           <div className="flex flex-col md:flex-row items-center gap-3">
             <img

src/components/SightingsWidget/SightingWidget.tsx

@@ -13,6 +13,7 @@ import HotListImg from "/Hotlist_Hit.svg";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
+import { useSound } from "react-sounds";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -32,14 +33,12 @@ type SightingHistoryProps = {
   className: string;
 };
 
-// /type SightingHistoryWidgetProps = React.HTMLAttributes<HTMLDivElement>;
-
 export default function SightingHistoryWidget({
   className,
   title,
 }: SightingHistoryProps) {
   useNow(1000);
-
+  const { play } = useSound("notification/notification");
   const {
     sightings,
     setSelectedSighting,
@@ -73,18 +72,18 @@ export default function SightingHistoryWidget({
       const isNPEDHitC = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
 
       if (isNPEDHitA || isNPEDHitB || isNPEDHitC) {
+        play();
         dispatch({
           type: "ADD",
           payload: obj,
         });
       }
     });
-  }, [rows, dispatch]);
+  }, [rows, dispatch, play]);
 
   useEffect(() => {
     if (hasAutoOpenedRef.current) return;
     const firstHot = rows?.find((r) => {
-      // const hotlistHit = r?.metadata?.hotlistMatches?.Hotlist0 === true;
       const isNPEDHitA = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
       const isNPEDHitB = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
       const isNPEDHitC = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
@@ -92,10 +91,11 @@ export default function SightingHistoryWidget({
     });
     if (firstHot) {
       setSelectedSighting(firstHot);
+      play();
       setSightingModalOpen(true);
       hasAutoOpenedRef.current = true;
     }
-  }, [rows, setSelectedSighting, setSightingModalOpen]);
+  }, [play, rows, setSelectedSighting, setSightingModalOpen]);
 
   const handleClose = () => {
     setSightingModalOpen(false);
@@ -174,7 +174,6 @@ export default function SightingHistoryWidget({
                         className="h-20 object-contain rounded-md"
                       />
                     )}
-
                     <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                   </div>
                 </div>

src/pages/Dashboard.tsx

@@ -4,12 +4,9 @@ import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget"
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
 import { CAM_BASE } from "../utils/config";
 const Dashboard = () => {
-  // const AGX_url = import.meta.env.VITE_AGX_BOX_URL;
-  // const AGX_rear_url = import.meta.env.VITE_AGX_BOX_REAR_UR;
-  // const test = import.meta.env.VITE_LOCAL;
   const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`;
   const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
-  // const testFront = import.meta.env.VITE_LOCAL_FRONT;
+
   console.log(CAM_BASE);
 
   return (