fixed type errors

src/components/CameraSettings/CameraSettingFields.tsx

@@ -4,23 +4,31 @@ import type {
   CameraSettingErrorValues,
   CameraSettingValues,
 } from "../../types/types";
+import { useMemo, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
-  updateCameraConfig: (values: CameraSettingValues) => void;
+  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
 };
 
 const CameraSettingFields = ({
   initialData,
   updateCameraConfig,
 }: CameraSettingsProps) => {
-  const initialValues: CameraSettingValues = {
+  const [showPwd, setShowPwd] = useState(false);
-    friendlyName: initialData?.propLEDDriverControlURI?.value,
+
-    cameraAddress: "",
+  const initialValues = useMemo<CameraSettingValues>(
-    userName: "",
+    () => ({
-    password: "",
+      friendlyName: initialData?.propLEDDriverControlURI?.value ?? "",
-    id: initialData?.id,
+      cameraAddress: "",
-  };
+      userName: "",
+      password: "",
+      id: initialData?.id,
+    }),
+    [initialData?.id, initialData?.propLEDDriverControlURI?.value]
+  );
 
   const validateValues = (values: CameraSettingValues) => {
     const errors: CameraSettingErrorValues = {};
@@ -34,7 +42,6 @@ const CameraSettingFields = ({
 
   const handleSubmit = (values: CameraSettingValues) => {
     updateCameraConfig(values);
-    return;
   };
 
   return (
@@ -43,6 +50,7 @@ const CameraSettingFields = ({
       onSubmit={handleSubmit}
       validate={validateValues}
       validateOnChange={false}
+      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-4 p-2">
@@ -103,22 +111,30 @@ const CameraSettingFields = ({
                 {errors.password}
               </small>
             )}
-            <Field
+            <div className="flex gap-2 items-center relative">
-              id="password"
+              <Field
-              name="password"
+                id="password"
-              type="password"
+                name="password"
-              className="p-2 border border-gray-400 rounded-lg"
+                type={showPwd ? "text" : "password"}
-              placeholder="Enter password"
+                className="p-2 border border-gray-400 rounded-lg w-full "
-              autoComplete="new-password"
+                placeholder="Enter password"
-            />
+                autoComplete="new-password"
-          </div>
+              />
+              <FontAwesomeIcon
+                type="button"
+                className="absolute right-5 end-0"
+                onClick={() => setShowPwd((s) => !s)}
+                icon={showPwd ? faEyeSlash : faEye}
+              />
+            </div>
 
-          <button
+            <button
-            type="submit"
+              type="submit"
-            className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
+              className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
-          >
+            >
-            Save settings
+              Save settings
-          </button>
+            </button>
+          </div>
         </Form>
       )}
     </Formik>

src/components/HistoryList/HistoryList.tsx

@@ -6,16 +6,17 @@ import AlertItem from "./AlertItem";
 const HistoryList = () => {
   const { state } = useAlertHitContext();
   console.log(state);
+
   return (
     <Card className="h-100">
       <CardHeader title="Alert History" />
       <div className="flex flex-col gap-1">
-        {state?.alertList?.length >= 0 ? (
+        {state?.alertList?.length > 0 ? (
           state?.alertList?.map((alertItem, index) => (
             <AlertItem key={index} item={alertItem} />
           ))
         ) : (
-          <p>No Search results</p>
+          <p>No Alert results</p>
         )}
       </div>
     </Card>

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -27,7 +27,6 @@ const RearCameraOverviewCard = ({ className }: CardProps) => {
       <div className="flex flex-col space-y-3 h-full" {...handlers}>
         <CardHeader title="Rear Overview" icon={faCamera} />
         <SightingOverview />
-        {/* <SnapshotContainer side="TargetDetectionRear" /> */}
       </div>
     </Card>
   );

src/components/SessionForm/HitSearchCard.tsx

@@ -6,9 +6,8 @@ import { useState } from "react";
 
 const SessionCard = () => {
   const [searchTerm, setSearchTerm] = useState("");
-  const { state, disptach } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();
 
-  console.log(state);
   return (
     <Card>
       <CardHeader title={"Hit Search"} />
@@ -27,16 +26,29 @@ const SessionCard = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
               placeholder="Enter VRM"
+              value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
           </div>
         </FormGroup>
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          onClick={() => disptach({ type: "SEARCH", payload: searchTerm })}
+          onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
+          disabled={searchTerm.trim().length < 2}
         >
           Search Hit list
         </button>
+        {searchTerm && (
+          <button
+            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full max-w-md"
+            onClick={() => {
+              setSearchTerm("");
+              dispatch({ type: "SEARCH", payload: "" });
+            }}
+          >
+            Clear Search
+          </button>
+        )}
       </div>
     </Card>
   );

src/components/SessionForm/SessionCard.tsx

@@ -2,22 +2,29 @@ import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 
 const SessionCard = () => {
+  function onStart(): void {
+    throw new Error("Function not implemented.");
+  }
+
   return (
     <Card>
-      <CardHeader title={"Session"} />
+      <CardHeader title="Session" />
       <div className="flex flex-col gap-4">
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          //onClick={() => handleModemSave(apn, username, password, authType)}
+          onClick={onStart}
         >
           Start Session
         </button>
-        <h2 className="text-white mb-2">Number of Vehicles: </h2>
+
-        <h2 className="text-white mb-2">Vehicles without Tax: </h2>
+        <ul className="text-white space-y-2">
-        <h2 className="text-white mb-2">Vehicles without MOT: </h2>
+          <li>Number of Vehicles: </li>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat A: </h2>
+          <li>Vehicles without Tax: </li>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat B: </h2>
+          <li>Vehicles without MOT: </li>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat C: </h2>
+          <li>Vehicles with NPED Cat A: </li>
+          <li>Vehicles with NPED Cat B: </li>
+          <li>Vehicles with NPED Cat C: </li>
+        </ul>
       </div>
     </Card>
   );

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -1,9 +1,12 @@
 import { Field, useFormikContext } from "formik";
 import FormGroup from "../components/FormGroup";
+import { useState } from "react";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const ChannelFields = () => {
   useFormikContext();
-
+  const [showPwd, setShowPwd] = useState(false);
   return (
     <div className="flex flex-col space-y-2">
       <FormGroup>
@@ -32,11 +35,17 @@ const ChannelFields = () => {
         <label htmlFor="password">Password</label>
         <Field
           name={"password"}
-          type="password"
+          type={showPwd ? "text" : "password"}
           id="password"
           placeholder="Back office password"
           className="p-1.5 border border-gray-400 rounded-lg"
         />
+        <FontAwesomeIcon
+          type="button"
+          className="absolute right-5 end-0"
+          onClick={() => setShowPwd((s) => !s)}
+          icon={showPwd ? faEyeSlash : faEye}
+        />
       </FormGroup>
       <FormGroup>
         <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -3,14 +3,18 @@ import FormGroup from "../components/FormGroup";
 import type { NPEDErrorValues, NPEDFieldType } from "../../../types/types";
 import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
 import { toast } from "sonner";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
 
 const NPEDFields = () => {
+  const [showPwd, setShowPwd] = useState(false);
   const { signIn, user, signOut } = useNPEDAuth();
 
   const initialValues = user
     ? {
         username: user.propUsername.value,
-        password: "",
+        password: user.propPassword.value,
         clientId: user.propClientID.value,
         frontId: "NPED",
         rearId: "NPED",
@@ -49,6 +53,7 @@ const NPEDFields = () => {
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validate={validateValues}
+      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-5">
@@ -76,11 +81,17 @@ const NPEDFields = () => {
             )}
             <Field
               name="password"
-              type="password"
+              type={showPwd ? "text" : "password"}
               id="password"
               placeholder="NPED Password"
               className="p-1.5 border border-gray-400 rounded-lg"
             />
+            <FontAwesomeIcon
+              type="button"
+              className="absolute right-5 end-0"
+              onClick={() => setShowPwd((s) => !s)}
+              icon={showPwd ? faEyeSlash : faEye}
+            />
           </FormGroup>
           <FormGroup>
             <label htmlFor="clientId">Client ID</label>

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -7,13 +7,13 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";
 
 const SystemConfigFields = () => {
-  const { saveSystemSettings, getSystemSettingsData } = useSystemConfig();
+  const { saveSystemSettings, systemSettingsData } = useSystemConfig();
-  console.log(getSystemSettingsData);
+
   const initialvalues: SystemValues = {
-    deviceName: "",
+    deviceName: systemSettingsData?.deviceName ?? "",
-    timeZone: "",
+    timeZone: systemSettingsData?.timeZone ?? "",
-    sntpServer: "",
+    sntpServer: systemSettingsData?.sntpServer ?? "",
-    sntpInterval: 60,
+    sntpInterval: systemSettingsData?.sntpInterval ?? 60,
     softwareUpdate: null,
   };
 
@@ -34,6 +34,9 @@ const SystemConfigFields = () => {
       initialValues={initialvalues}
       onSubmit={handleSubmit}
       validate={validateValues}
+      enableReinitialize
+      validateOnChange
+      validateOnBlur
     >
       {({ values, errors, touched }) => (
         <Form className="flex flex-col space-y-5">
@@ -55,6 +58,7 @@ const SystemConfigFields = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
               placeholder="Enter device name"
+              autoComplete="off"
             />
           </FormGroup>
           <FormGroup>
@@ -75,6 +79,7 @@ const SystemConfigFields = () => {
               as="select"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
             >
+              <option value="">Select a timezone…</option>
               {timezones.map((timezone) => (
                 <option value={timezone.value} key={timezone.label}>
                   {timezone.label}
@@ -100,6 +105,7 @@ const SystemConfigFields = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
               placeholder="Enter SNTP server address"
+              autoComplete="off"
             />
           </FormGroup>
           <FormGroup>
@@ -119,6 +125,7 @@ const SystemConfigFields = () => {
               name="sntpInterval"
               type="number"
               min={1}
+              inputMode="numeric"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
             />
           </FormGroup>
@@ -133,12 +140,14 @@ const SystemConfigFields = () => {
             selectedFile={values.softwareUpdate}
           />
           <button
+            type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
             onClick={handleSoftReboot}
           >
             Software Reboot
           </button>
           <button
+            type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
             onClick={handleHardReboot}
           >

src/components/SettingForms/System/timezones.ts

@@ -1,5 +1,4 @@
 export const timezones = [
-  { value: "Europe/London (UTC+00)", label: "Select Time Zone" },
   { value: "Europe/London (UTC+00)", label: "UTC (UTC+00)" },
   { value: "Africa/Cairo (UTC+02)", label: "Africa/Cairo (UTC+02)" },
   {

src/components/SightingsWidget/InfoBar.tsx

@@ -1,15 +1,14 @@
-import type { SightingType, SightingWidgetType } from "../../types/types";
+import type { SightingType } from "../../types/types";
 import { capitalize, formatAge } from "../../utils/utils";
 
 type InfoBarprops = {
-  obj: SightingWidgetType | SightingType;
+  obj: SightingType;
 };
 const InfoBar = ({ obj }: InfoBarprops) => {
   const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
   return (
     <div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
       <div className="flex items-center gap-3 text-xs">
-        {" "}
         <div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
         <div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
         <div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { SightingType, SightingWidgetType } from "../../types/types";
+import type { SightingType } from "../../types/types";
 import { BLANK_IMG } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
@@ -44,10 +44,10 @@ export default function SightingHistoryWidget({
     selectedSighting,
   } = useSightingFeedContext();
 
-  const { disptach } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();
 
   const onRowClick = useCallback(
-    (sighting: SightingType | SightingWidgetType) => {
+    (sighting: SightingType) => {
       if (!sighting) return;
       setSightingModalOpen(!isSightingModalOpen);
       setSelectedSighting(sighting);
@@ -55,7 +55,7 @@ export default function SightingHistoryWidget({
     [isSightingModalOpen, setSelectedSighting, setSightingModalOpen]
   );
   const rows = useMemo(
-    () => sightings?.filter(Boolean) as SightingWidgetType[],
+    () => sightings?.filter(Boolean) as SightingType[],
     [sightings]
   );
 
@@ -64,13 +64,13 @@ export default function SightingHistoryWidget({
       const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
 
       if (isNPEDHit) {
-        disptach({
+        dispatch({
           type: "ADD",
           payload: obj,
         });
       }
     });
-  }, [rows, disptach]);
+  }, [rows, dispatch]);
 
   const handleClose = () => {
     setSightingModalOpen(false);

src/components/SightingsWidget/SightingWidgetDetails.tsx

@@ -1,8 +1,8 @@
-import type { SightingWidgetType } from "../../types/types";
+import type { SightingType } from "../../types/types";
 import { useState } from "react";
 
 type SightingWidgetDetailsProps = {
-  effectiveSelected: SightingWidgetType | null;
+  effectiveSelected: SightingType | null;
 };
 
 const SightingWidgetDetails = ({

src/context/AlertHitContext.ts

@@ -1,10 +1,10 @@
 import { createContext, useContext } from "react";
-import type { AlertState, AlertPayload, ActionType } from "../types/types";
+import type { AlertState, AlertPayload } from "../types/types";
 
 type AlertHitContextValueType = {
   state: AlertState;
-  action: AlertPayload;
+  action?: AlertPayload;
-  disptach: (action: ActionType) => AlertState;
+  dispatch: React.Dispatch<AlertPayload>;
 };
 
 export const AlertHitContext = createContext<

src/context/NPEDUserContext.ts

@@ -1,8 +1,8 @@
 import { createContext, useContext, type SetStateAction } from "react";
-import type { NPEDCameraConfig, NPEDUser } from "../types/types";
+import type { NPEDUser } from "../types/types";
 
 type UserContextValue = {
-  user: NPEDCameraConfig | null;
+  user: NPEDUser | null;
   setUser: React.Dispatch<SetStateAction<NPEDUser | null>>;
 };
 

src/context/SightingFeedContext.ts

@@ -1,17 +1,15 @@
 import { createContext, useContext } from "react";
-import type { SightingType, SightingWidgetType } from "../types/types";
+import type { SightingType } from "../types/types";
 
 type SightingFeedContextType = {
-  sightings: (SightingWidgetType | null | undefined)[];
+  sightings: (SightingType | null | undefined)[];
   selectedRef: number | null;
   setSelectedRef: (ref: number | null) => void;
-  // effectiveSelected: SightingWidgetType | null;
+  // effectiveSelected: SightingType | null;
-  mostRecent: SightingWidgetType | null;
+  mostRecent: SightingType | null;
   side: string;
   selectedSighting: SightingType | null;
-  setSelectedSighting: (
+  setSelectedSighting: (sighting: SightingType | SightingType | null) => void;
-    sighting: SightingType | SightingWidgetType | null
-  ) => void;
   setSightingModalOpen: (isSightingModalOpen: boolean) => void;
   isSightingModalOpen: boolean;
 };

src/context/providers/AlertHitProvider.tsx

@@ -7,10 +7,10 @@ type AlertHitProviderTypeProps = {
 };
 
 export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => {
-  const [state, disptach] = useReducer(reducer, initalState);
+  const [state, dispatch] = useReducer(reducer, initalState);
 
   return (
-    <AlertHitContext.Provider value={{ state, disptach }}>
+    <AlertHitContext.Provider value={{ state, dispatch }}>
       {children}
     </AlertHitContext.Provider>
   );

src/context/reducers/AlertReducers.ts

@@ -8,18 +8,20 @@ export const initalState = {
 export function reducer(state: AlertState, action: AlertPayload) {
   switch (action.type) {
     case "ADD": {
-      const alreadyExists = state.allAlerts.some(
+      if (action.payload && "vrm" in action.payload) {
-        (alertItem) => alertItem.vrm === action.payload.vrm
+        const alreadyExists = state.allAlerts.some(
-      );
+          (alertItem) => alertItem.vrm === action.payload.vrm
-      if (alreadyExists) {
+        );
-        return { ...state };
+        if (alreadyExists) {
-      } else {
+          return state;
+        }
         return {
           ...state,
-          alertList: [...state.allAlerts, action.payload],
           allAlerts: [...state.allAlerts, action.payload],
+          alertList: [...state.allAlerts, action.payload],
         };
       }
+      return state;
     }
 
     case "SEARCH": {

src/hooks/useOverviewOverlay.ts

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
-import type { SightingWidgetType } from "../types/types";
+import type { SightingType } from "../types/types";
 import { drawRects } from "../utils/utils";
 
 type Mode = 0 | 1 | 2;
 
 export function useOverviewOverlay(
-  selected: SightingWidgetType | null | undefined,
+  selected: SightingType | null | undefined,
   overlayMode: Mode,
   imgRef: React.RefObject<HTMLImageElement | null>,
   canvasRef: React.RefObject<HTMLCanvasElement | null>

src/hooks/useSightingFeed.ts

@@ -1,19 +1,16 @@
 import { useEffect, useRef, useState } from "react";
-import type { SightingType, SightingWidgetType } from "../types/types";
+import type { SightingType } from "../types/types";
 
-async function fetchSighting(
+async function fetchSighting(url: string, ref: number): Promise<SightingType> {
-  url: string,
-  ref: number
-): Promise<SightingWidgetType> {
   const res = await fetch(`${url}${ref}`);
   if (!res.ok) throw new Error(String(res.status));
   return await res.json();
 }
 
 export function useSightingFeed(url: string) {
-  const [sightings, setSightings] = useState<SightingWidgetType[]>([]);
+  const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
-  const [mostRecent, setMostRecent] = useState<SightingWidgetType | null>(null);
+  const [mostRecent, setMostRecent] = useState<SightingType | null>(null);
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
     null
   );

src/hooks/useSystemConfig.ts

@@ -27,6 +27,6 @@ export const useSystemConfig = () => {
   return {
     uploadSettings: uploadSettingsMutation.mutate,
     saveSystemSettings: saveSystemSettings.mutate,
-    getSystemSettingsData: getSystemSettings.data,
+    systemSettingsData: getSystemSettings.data,
   };
 };

src/types/types.ts

@@ -9,8 +9,8 @@ export type SightingType = {
   countryCode: string;
   timeStamp: string;
   detailsUrl: string;
-  overviewPlateRect: number[];
+  overviewPlateRect?: [number, number, number, number];
-  plateTrack: Array<number[]>;
+  plateTrack?: [number, number, number, number][];
   make: string;
   model: string;
   color: string;
@@ -71,39 +71,6 @@ export type HotlistUploadType = {
   file: string | null;
 };
 
-export type SightingWidgetType = {
-  debug: string;
-  SaFID: string;
-  ref: number; // unique, increasing
-  idx?: number; // client-side slot index
-  vrm: string;
-  vrmSecondary: string; // empty string means missing
-  countryCode: string;
-  timeStamp: string; // formatted string
-  timeStampMillis: number; // epoch millis
-  motion: string; // e.g., "AWAY" or "TOWARDS"
-  seenCount: string;
-  charHeight: string;
-  overviewUrl: string;
-  detailsUrl: string;
-  make: string;
-  model: string;
-  color: string;
-  category: string;
-  plateSize: string | number;
-  overviewSize: string | number;
-  locationName: string;
-  laneID: string | number;
-  radarSpeed: string | number;
-  trackSpeed: string | number;
-  srcCam: 0 | 1;
-  plateUrlInfrared: string;
-  plateUrlColour: string;
-  overviewPlateRect: [number, number, number, number]; // [x,y,w,h] normalized 0..1
-  plateTrack: [number, number, number, number][];
-  metadata: Metadata;
-};
-
 export type VersionFieldType = {
   version: string;
   revision: string;
@@ -183,10 +150,15 @@ export type AlertState = {
   allAlerts: SightingType[];
 };
 
-export type AlertPayload = {
+export type AlertPayload =
-  payload: SightingType | string;
+  | {
-  type: string;
+      payload: SightingType;
-};
+      type: "ADD";
+    }
+  | {
+      payload: string;
+      type: "SEARCH";
+    };
 
 export type ActionType = {
   payload: SightingType | string;