From efd037754e924c5914572dfaae4cf94ab9685dad Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 24 Sep 2025 12:28:14 +0100
Subject: [PATCH] update camera base URL, enhance alert context, and improve
 history list functionality

---
 .env                                          |  2 +-
 .github/copilot-instructions.md               | 74 +++++++++++++++++++
 index.html                                    |  2 +-
 src/components/HistoryList/AlertItem.tsx      |  1 +
 src/components/HistoryList/HistoryList.tsx    | 29 +++++++-
 .../SightingModal/SightingModal.tsx           | 34 +++++++--
 src/context/AlertHitContext.ts                |  3 +
 src/context/providers/AlertHitProvider.tsx    | 27 ++++++-
 src/context/reducers/AlertReducers.ts         |  7 ++
 src/hooks/useCameraBlackboard.ts              | 42 +++++++++++
 src/pages/Dashboard.tsx                       |  6 +-
 src/types/types.ts                            | 14 ++++
 12 files changed, 224 insertions(+), 17 deletions(-)
 create mode 100644 .github/copilot-instructions.md
 create mode 100644 src/hooks/useCameraBlackboard.ts

diff --git a/.env b/.env
index 28c2d7a..3649f70 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
 VITE_BASEURL=http://192.168.75.11/
-VITE_CAM_BASE=http://100.113.222.39
+VITE_CAM_BASE=http://100.72.72.70
 VITE_FOLKESTONE_BASE=http://100.116.253.81
 VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1
 VITE_OUTSIDE_BASEURL=http://100.82.205.44
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..1a2bd5b
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,74 @@
+# Copilot Instructions for in-car-system-fe
+
+## Project Overview
+
+- **Type:** React + TypeScript SPA using Vite
+- **Purpose:** In-car system frontend for camera management, sighting history, and system settings
+- **Key Directories:**
+  - `src/components/`: UI components grouped by feature (Camera, Sighting, Settings, etc.)
+  - `src/context/`: React context for global state (e.g., AlertHit, NPEDUser, SightingFeed)
+  - `src/hooks/`: Custom React hooks for data fetching, config, and UI logic
+  - `src/pages/`: Top-level route views (Dashboard, Camera, Session, SystemSettings)
+  - `src/types/`: Shared TypeScript types
+  - `src/utils/`: Utility functions and config helpers
+
+## Architecture & Patterns
+
+- **Component Structure:**
+  - Feature-based folders (e.g., `CameraSettings`, `SightingOverview`)
+  - Components are mostly functional, using hooks and context for state
+- **State Management:**
+  - Uses React Context for cross-component state (see `src/context/providers/`)
+  - Reducers in `src/context/reducers/` for complex state updates
+- **Data Flow:**
+  - Data is fetched and managed via custom hooks (see `src/hooks/`)
+  - Context providers wrap the app in `main.tsx`
+- **Styling:**
+  - CSS modules (e.g., `App.css`, `index.css`)
+  - No CSS-in-JS or styled-components
+
+## Developer Workflows
+
+- **Install:** `npm install`
+- **Start Dev Server:** `npm run dev`
+- **Build:** `npm run build`
+- **Preview Build:** `npm run preview`
+- **Lint:** `npm run lint` (uses ESLint, see `eslint.config.js`)
+- **Type Check:** `tsc --noEmit`
+- **Test:** _No test framework configured by default_
+
+## Project Conventions
+
+- **TypeScript:**
+  - All components and hooks are typed; shared types in `src/types/types.ts`
+- **Component Naming:**
+  - Use PascalCase for components and folders
+  - Suffix with `Container`, `Card`, or `Modal` for UI roles
+- **Assets:**
+  - Images in `public/` or `src/assets/`
+  - Sounds in `src/assets/sounds/`
+- **No Redux, MobX, or external state libraries**
+- **No backend API code in this repo**
+
+## Integration Points
+
+- **External:**
+  - No direct backend integration code; data is assumed to come from context/hooks
+  - Sound assets for UI feedback in `src/assets/sounds/ui/`
+
+## Examples
+
+- **Add a new camera setting:**
+  - Create a new component in `src/components/CameraSettings/`
+  - Add state via context or a custom hook if needed
+- **Add a new page:**
+  - Add a file to `src/pages/` and update routing in the main app (see `main.tsx`)
+
+## References
+
+- See `README.md` for Vite/ESLint setup details
+- See `src/context/` and `src/hooks/` for app-specific state/data patterns
+
+---
+
+_If any conventions or workflows are unclear, please ask for clarification or examples from the codebase._
diff --git a/index.html b/index.html
index dcab83b..ce6c072 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MAV | In Car System</title>
+    <title>MAV Mobile</title>
   </head>
   <body>
     <div id="root" class="min-h-screen flex flex-col"></div>
diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx
index f744d4a..c8f27d8 100644
--- a/src/components/HistoryList/AlertItem.tsx
+++ b/src/components/HistoryList/AlertItem.tsx
@@ -16,6 +16,7 @@ type AlertItemProps = {
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { dispatch } = useAlertHitContext();
+  // const {d} = useCameraBlackboard();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
   const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
   const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
diff --git a/src/components/HistoryList/HistoryList.tsx b/src/components/HistoryList/HistoryList.tsx
index d5fc61d..5ca0bd4 100644
--- a/src/components/HistoryList/HistoryList.tsx
+++ b/src/components/HistoryList/HistoryList.tsx
@@ -1,25 +1,46 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
-import type { SightingType } from "../../types/types";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { CameraBlackBoardOptions, SightingType } from "../../types/types";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import AlertItem from "./AlertItem";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 
 const HistoryList = () => {
-  const { state, dispatch } = useAlertHitContext();
+  const { state, dispatch, isLoading, error } = useAlertHitContext();
+  const { mutation } = useCameraBlackboard();
 
-  const handleDeleteClick = (alertItem: SightingType) =>
+  const handleDeleteClick = (alertItem: SightingType, idx?: number) => {
     dispatch({ type: "REMOVE", payload: alertItem });
+    mutation.mutate({ operation: "POP", path: "alertHistory", value: idx });
+  };
+
+  const handleClearListClick = (listName: CameraBlackBoardOptions) => {
+    dispatch({ type: "DELETE", payload: [] });
+    mutation.mutate({
+      operation: "DELETE",
+      path: listName.path,
+    });
+  };
+
   return (
     <Card className="h-100">
       <CardHeader title="Alert History" />
+      <button
+        className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
+        onClick={() => handleClearListClick({ path: "alertHistory" })}
+      >
+        Clear List
+      </button>
+      {isLoading && <p>Loading...</p>}
+      {error && <p className="text-red-500">Error: {error.message}</p>}
       <div className="flex flex-col gap-1">
         {state?.alertList?.length > 0 ? (
           state?.alertList?.map((alertItem, index) => (
             <div key={index} className="flex flex-row space-x-2">
               <AlertItem item={alertItem} />
-              <button onClick={() => handleDeleteClick(alertItem)}>
+              <button onClick={() => handleDeleteClick(alertItem, index)}>
                 <div className="p-4">
                   <FontAwesomeIcon icon={faTrash} size="2x" />
                 </div>
diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx
index 9ae5ddb..4a6167d 100644
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -5,6 +5,7 @@ import ModalComponent from "../UI/ModalComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
 import { toast, Toaster } from "sonner";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 import HotListImg from "/Hotlist_Hit.svg";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
@@ -24,16 +25,37 @@ const SightingModal = ({
   onDelete,
 }: SightingModalProps) => {
   const { dispatch } = useAlertHitContext();
+  const { query, mutation } = useCameraBlackboard();
 
   const handleAcknowledgeButton = () => {
-    if (!sighting) {
-      toast.error("Cannot add sighting to alert list");
+    try {
+      if (!sighting) {
+        toast.error("Cannot add sighting to alert list");
+        handleClose();
+        return;
+      }
+      if (!query.data.alertHistory) {
+        mutation.mutate({
+          operation: "INSERT",
+          path: "alertHistory",
+          value: [sighting],
+        });
+      } else {
+        mutation.mutate({
+          operation: "APPEND",
+          path: "alertHistory",
+          value: sighting,
+        });
+      }
+
+      dispatch({ type: "ADD", payload: sighting });
+      toast.success("Sighting successfully added to alert list");
+      handleClose();
+    } catch (error) {
+      console.log(error);
+      toast.error("Failed to add sighting to alert list");
       handleClose();
-      return;
     }
-    dispatch({ type: "ADD", payload: sighting });
-    toast.success("Sighting successfully added to alert list");
-    handleClose();
   };
 
   const handleDeleteClick = () => {
diff --git a/src/context/AlertHitContext.ts b/src/context/AlertHitContext.ts
index f3a3519..3df9f61 100644
--- a/src/context/AlertHitContext.ts
+++ b/src/context/AlertHitContext.ts
@@ -5,6 +5,9 @@ type AlertHitContextValueType = {
   state: AlertState;
   action?: AlertPayload;
   dispatch: React.Dispatch<AlertPayload>;
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: Error | null;
 };
 
 export const AlertHitContext = createContext<
diff --git a/src/context/providers/AlertHitProvider.tsx b/src/context/providers/AlertHitProvider.tsx
index 605295a..0281d58 100644
--- a/src/context/providers/AlertHitProvider.tsx
+++ b/src/context/providers/AlertHitProvider.tsx
@@ -1,6 +1,8 @@
-import { useReducer, type ReactNode } from "react";
+import { useEffect, useReducer, type ReactNode } from "react";
 import AlertHitContext from "../AlertHitContext";
 import { reducer, initalState } from "../reducers/AlertReducers";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { SightingType } from "../../types/types";
 
 type AlertHitProviderTypeProps = {
   children: ReactNode;
@@ -8,9 +10,30 @@ type AlertHitProviderTypeProps = {
 
 export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => {
   const [state, dispatch] = useReducer(reducer, initalState);
+  const { query } = useCameraBlackboard();
+
+  useEffect(() => {
+    if (query.data) {
+      query?.data?.alertHistory?.forEach((element: SightingType) => {
+        dispatch({ type: "ADD", payload: element });
+      });
+    } else if (query.error) {
+      console.error("Error fetching alert hits:", query.error);
+    } else {
+      console.log("Loading alert hits...");
+    }
+  }, [query.data, query.error, query.isLoading]);
 
   return (
-    <AlertHitContext.Provider value={{ state, dispatch }}>
+    <AlertHitContext.Provider
+      value={{
+        state,
+        dispatch,
+        isLoading: query.isLoading,
+        isError: query.isError,
+        error: query.error,
+      }}
+    >
       {children}
     </AlertHitContext.Provider>
   );
diff --git a/src/context/reducers/AlertReducers.ts b/src/context/reducers/AlertReducers.ts
index 7eb99bf..4595b6f 100644
--- a/src/context/reducers/AlertReducers.ts
+++ b/src/context/reducers/AlertReducers.ts
@@ -50,6 +50,13 @@ export function reducer(state: AlertState, action: AlertPayload) {
       };
     }
 
+    case "DELETE": {
+      return {
+        ...state,
+        alertList: action.payload,
+      };
+    }
+
     default:
       return { ...state };
   }
diff --git a/src/hooks/useCameraBlackboard.ts b/src/hooks/useCameraBlackboard.ts
new file mode 100644
index 0000000..d8cd31b
--- /dev/null
+++ b/src/hooks/useCameraBlackboard.ts
@@ -0,0 +1,42 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { CameraBlackBoardOptions } from "../types/types";
+
+const getBlackboardData = async () => {
+  const response = await fetch(`${CAM_BASE}/api/blackboard`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch blackboard data");
+  }
+  return response.json();
+};
+
+const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
+  const response = await fetch(`${CAM_BASE}/api/blackboard`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    throw new Error("Failed to fetch blackboard data");
+  }
+  return response.json();
+};
+
+export const useCameraBlackboard = () => {
+  const query = useQuery({
+    queryKey: ["cameraBlackboard"],
+    queryFn: getBlackboardData,
+  });
+
+  const mutation = useMutation({
+    mutationKey: ["cameraBlackboard"],
+    mutationFn: (options?: CameraBlackBoardOptions) =>
+      viewBlackboardData({
+        operation: options?.operation,
+        path: options?.path,
+        value: options?.value,
+      }),
+  });
+
+  return { query, mutation };
+};
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index e48f28f..fb45cd2 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -6,13 +6,13 @@ import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
   const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`;
-  //  const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
-  const folkURL = import.meta.env.VITE_FOLKESTONE_URL;
+  const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
+
   console.log(CAM_BASE);
 
   return (
     <div className="mx-auto grid grid-cols-1  sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
-      <SightingFeedProvider url={folkURL} side="Front">
+      <SightingFeedProvider url={dev_FRONT_URL} side="Front">
         <FrontCameraOverviewCard className="order-1" />
         <SightingHistoryWidget
           className="order-3"
diff --git a/src/types/types.ts b/src/types/types.ts
index e71a9af..a43d6a0 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -164,6 +164,10 @@ export type AlertPayload =
   | {
       type: "REMOVE";
       payload: SightingType;
+    }
+  | {
+      type: "DELETE";
+      payload: [];
     };
 
 export type ActionType = {
@@ -237,3 +241,13 @@ export type CameraConfig = {
     datatype: "boolean";
   };
 };
+
+export type CameraBlackBoardOptions = {
+  operation?: string;
+  path?: string;
+  value?: object | string | number | (string | number)[];
+};
+
+export type CameraBlackboardResponse = {
+  data: object;
+};