From f35e2f9fb5b2c6d49ce1649eb82980c16a46f9b1 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 11 Nov 2025 10:43:14 +0000
Subject: [PATCH] - added store and forward - amended sighting ammend endpoint

---
 .../SettingForms/SettingForms.tsx             |  7 ++++-
 .../SettingForms/Store/StoreCard.tsx          | 14 +++++++++
 .../SettingForms/Store/StoreFields.tsx        | 29 +++++++++++++++++++
 src/hooks/useCameraOutput.ts                  |  2 +-
 src/hooks/useSightingAmend.ts                 |  4 +--
 src/hooks/useStoreDispatch.ts                 | 19 ++++++++++++
 6 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 src/components/SettingForms/Store/StoreCard.tsx
 create mode 100644 src/components/SettingForms/Store/StoreFields.tsx
 create mode 100644 src/hooks/useStoreDispatch.ts

diff --git a/src/components/SettingForms/SettingForms/SettingForms.tsx b/src/components/SettingForms/SettingForms/SettingForms.tsx
index 858b367..42b89fd 100644
--- a/src/components/SettingForms/SettingForms/SettingForms.tsx
+++ b/src/components/SettingForms/SettingForms/SettingForms.tsx
@@ -13,6 +13,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
 import { useFormVaidate } from "../../../hooks/useFormValidate";
 import { useSightingAmend } from "../../../hooks/useSightingAmend";
+import StoreCard from "../Store/StoreCard";
 
 const SettingForms = () => {
   const qc = useQueryClient();
@@ -130,7 +131,11 @@ const SettingForms = () => {
       {({ isSubmitting, touched }) => (
         <Form>
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
-            <BearerTypeCard />
+            <div>
+              <BearerTypeCard />
+              <StoreCard />
+            </div>
+
             <ChannelCard
               touched={touched}
               isSubmitting={isSubmitting}
diff --git a/src/components/SettingForms/Store/StoreCard.tsx b/src/components/SettingForms/Store/StoreCard.tsx
new file mode 100644
index 0000000..ef91bb5
--- /dev/null
+++ b/src/components/SettingForms/Store/StoreCard.tsx
@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import StoreFields from "./StoreFields";
+
+const StoreCard = () => {
+  return (
+    <Card className="p-4">
+      <CardHeader title="Store" />
+      <StoreFields />
+    </Card>
+  );
+};
+
+export default StoreCard;
diff --git a/src/components/SettingForms/Store/StoreFields.tsx b/src/components/SettingForms/Store/StoreFields.tsx
new file mode 100644
index 0000000..3426032
--- /dev/null
+++ b/src/components/SettingForms/Store/StoreFields.tsx
@@ -0,0 +1,29 @@
+import { useStoreDispatch } from "../../../hooks/useStoreDispatch";
+import VehicleSessionItem from "../../UI/VehicleSessionItem";
+
+const StoreFields = () => {
+  const { storeQuery } = useStoreDispatch();
+
+  const totalPending = storeQuery?.data?.totalPending;
+  const totalActive = storeQuery?.data?.totalActive;
+  const totalSent = storeQuery?.data?.totalSent;
+  const totalReceived = storeQuery?.data?.totalReceived;
+  const totalLost = storeQuery?.data?.totalLost;
+
+  if (storeQuery.isLoading) return <div className="p-4">Loading store data...</div>;
+  if (storeQuery.error) return <div className="p-4">Error: {storeQuery.error.message}</div>;
+
+  return (
+    <div className="p-4">
+      <ul className="text-white space-y-3">
+        <VehicleSessionItem sessionNumber={totalActive} textColour="text-gray-400" vehicleTag={"Total Active:"} />
+        <VehicleSessionItem sessionNumber={totalSent} textColour="text-blue-400" vehicleTag={"Total Sent:"} />
+        <VehicleSessionItem sessionNumber={totalReceived} textColour="text-green-400" vehicleTag={"Total Received:"} />
+        <VehicleSessionItem sessionNumber={totalPending} textColour="text-amber-400" vehicleTag={"Total Pending:"} />
+        <VehicleSessionItem sessionNumber={totalLost} textColour="text-red-400" vehicleTag={"Total Lost:"} />
+      </ul>
+    </div>
+  );
+};
+
+export default StoreFields;
diff --git a/src/hooks/useCameraOutput.ts b/src/hooks/useCameraOutput.ts
index 641c4ac..4bdb9ca 100644
--- a/src/hooks/useCameraOutput.ts
+++ b/src/hooks/useCameraOutput.ts
@@ -92,7 +92,7 @@ const updateBOF2LaneId = async (data: OptionalBOF2LaneIDs) => {
 };
 
 const getBOF2LaneId = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmend-lane-ids`);
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA-lane-ids`);
   if (!response.ok) throw new Error("Canot get Lane Ids");
   return response.json();
 };
diff --git a/src/hooks/useSightingAmend.ts b/src/hooks/useSightingAmend.ts
index c85a7cf..4115efa 100644
--- a/src/hooks/useSightingAmend.ts
+++ b/src/hooks/useSightingAmend.ts
@@ -3,14 +3,14 @@ import { CAM_BASE } from "../utils/config";
 import type { InitialValuesForm } from "../types/types";
 
 const getSightingAmend = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmend`);
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA`);
   if (!response.ok) throw new Error("Cannot reach sighting amend endpoint");
   return response.json();
 };
 
 const updateSightingAmend = async (data: InitialValuesForm) => {
   const updateSightingAmendPayload = {
-    id: "SightingAmmend",
+    id: "SightingAmmendA",
     fields: [
       {
         property: "propOverviewQuality",
diff --git a/src/hooks/useStoreDispatch.ts b/src/hooks/useStoreDispatch.ts
new file mode 100644
index 0000000..b3c181c
--- /dev/null
+++ b/src/hooks/useStoreDispatch.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const getStoreData = async () => {
+  const response = await fetch(`${CAM_BASE}/Store/diagnostics-json`);
+  if (!response.ok) throw new Error("Cannot get store data");
+
+  return response.json();
+};
+
+export const useStoreDispatch = () => {
+  const storeQuery = useQuery({
+    queryKey: ["getStoreData"],
+    queryFn: getStoreData,
+    refetchInterval: 1000,
+    refetchOnWindowFocus: true,
+  });
+  return { storeQuery };
+};