- added store and forward

- amended sighting ammend endpoint

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}

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;

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;

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();
 };

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",

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 };
+};