src/app/reducers/cameraFeedReducer.ts

@@ -9,25 +9,25 @@ export const initialState: CameraFeedState = {
   },
   regionsByCamera: {
     A: [
-      { name: "Region 1", brushColour: "#ff0000" },
+      { name: "Bay 1", brushColour: "#ff0000" },
-      { name: "Region 2", brushColour: "#00ff00" },
+      { name: "Bay 2", brushColour: "#00ff00" },
-      { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Bay 3", brushColour: "#0400ff" },
-      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Bay 4", brushColour: "#ffff00" },
-      { name: "Region 5", brushColour: "#fc35db" },
+      { name: "Bay 5", brushColour: "#fc35db" },
     ],
     B: [
-      { name: "Region 1", brushColour: "#ff0000" },
+      { name: "Bay 1", brushColour: "#ff0000" },
-      { name: "Region 2", brushColour: "#00ff00" },
+      { name: "Bay 2", brushColour: "#00ff00" },
-      { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Bay 3", brushColour: "#0400ff" },
-      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Bay 4", brushColour: "#ffff00" },
-      { name: "Region 5", brushColour: "#fc35db" },
+      { name: "Bay 5", brushColour: "#fc35db" },
     ],
     C: [
-      { name: "Region 1", brushColour: "#ff0000" },
+      { name: "Bay 1", brushColour: "#ff0000" },
-      { name: "Region 2", brushColour: "#00ff00" },
+      { name: "Bay 2", brushColour: "#00ff00" },
-      { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Bay 3", brushColour: "#0400ff" },
-      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Bay 4", brushColour: "#ffff00" },
-      { name: "Region 5", brushColour: "#fc35db" },
+      { name: "Bay 5", brushColour: "#fc35db" },
     ],
   },
 

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -43,14 +43,29 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
+  const handleAddRegionClick = () => {
+    const regionName = `Bay ${regions.length + 1}`;
+    dispatch({
+      type: "ADD_NEW_REGION",
+      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
+    });
+  };
+
+  const handleRemoveClick = () => {
+    dispatch({
+      type: "REMOVE_REGION",
+      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
+    });
+  };
+
   const handleSaveclick = () => {
     const regions: ColourData[] = [];
     const test = Array.from(paintedCells.entries());
-    const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
+    const region1 = test.filter(([, cell]) => cell.region.name === "Bay 1");
-    const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
+    const region2 = test.filter(([, cell]) => cell.region.name === "Bay 2");
-    const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
+    const region3 = test.filter(([, cell]) => cell.region.name === "Bay 3");
-    const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
+    const region4 = test.filter(([, cell]) => cell.region.name === "Bay 4");
-    const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
+    const region5 = test.filter(([, cell]) => cell.region.name === "Bay 5");
     const region1Data = {
       id: 1,
       cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
@@ -130,7 +145,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
         </div>
       </div>
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
-        <h2 className="text-2xl mb-2">Region Select</h2>
+        <h2 className="text-2xl mb-2">Bay Select</h2>
         <>
           {regions?.map((region, idx) => {
             const isSelected = selectedRegionIndex === idx;
@@ -162,6 +177,14 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             );
           })}
         </>
+        <div className="flex flex-col gap-4  mt-4">
+          <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
+            Add Bay
+          </button>
+          <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
+            Remove Bay
+          </button>
+        </div>
       </div>
 
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">

src/features/cameras/components/PlatePatch/SightingEntryTable.tsx

@@ -18,7 +18,7 @@ const SightingEntryTable = () => {
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
             <tr>
               <th className="px-4 py-3 font-semibold">VRM</th>
-              <th className="px-4 py-3 font-semibold">Lane ID</th>
+              <th className="px-4 py-3 font-semibold">Bay ID</th>
               <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
               <th className="px-4 py-3 font-semibold">First Seen</th>
               <th className="px-4 py-3 font-semibold">Last Seen</th>

src/features/cameras/components/PlatePatch/SightingExitTable.tsx

@@ -18,7 +18,7 @@ const SightingExitTable = () => {
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
             <tr>
               <th className="px-4 py-3 font-semibold">VRM</th>
-              <th className="px-4 py-3 font-semibold">Lane ID</th>
+              <th className="px-4 py-3 font-semibold">Bay ID</th>
               <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
               <th className="px-4 py-3 font-semibold">First Seen</th>
               <th className="px-4 py-3 font-semibold">Last Seen</th>

src/features/cameras/components/PlatePatch/SightingPatch.tsx

@@ -8,7 +8,7 @@ const PlatePatch = () => {
   return (
     <Card className="p-4 w-full md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]">
       <CardHeader title="Entry / Exit" />
-      <Tabs>
+      <Tabs defaultIndex={1}>
         <TabList>
           <Tab>Entry Sightings</Tab>
           <Tab>Exit Sightings</Tab>

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -118,6 +118,7 @@ const VideoFeedGridPainter = () => {
         onMouseMove={handleStageMouseMove}
         onMouseUp={handleStageMouseUp}
         onMouseLeave={handleStageMouseUp}
+        className="max-w-[55%]"
       >
         <Layer>
           <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />

src/features/output/components/ChannelCard.tsx

@@ -5,7 +5,11 @@ import ChannelFields from "./ChannelFields";
 import type { FormTypes } from "../../../types/types";
 import { useGetBearerConfig } from "../hooks/useBearer";
 
-const ChannelCard = () => {
+type ChannelCardProps = {
+  customFields: (string | undefined)[];
+};
+
+const ChannelCard = ({ customFields }: ChannelCardProps) => {
   const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
   const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
   const outputData = bearerQuery?.data;
@@ -18,10 +22,11 @@ const ChannelCard = () => {
         values={values}
         outputData={outputData}
         onSetFieldValue={setFieldValue}
+        customFields={customFields}
       />
       <button
         type="submit"
-        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
       >
         {"Save Changes"}
       </button>

src/features/output/components/ChannelFields.tsx

@@ -12,12 +12,13 @@ type ChannelFieldsProps = {
   };
   outputData?: OutputDataResponse;
   onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
+  customFields: (string | undefined)[];
 };
 
-const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
+const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, customFields }: ChannelFieldsProps) => {
   const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
   const optionalConstants = optionalConstantsQuery?.data;
-
+  console.log(customFields);
   const channelFieldsObject = useMemo(() => {
     return {
       connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -269,24 +270,28 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
             <FieldArray name="customFields">
               {(arrayHelpers) => (
                 <>
-                  {values?.customFields?.map((_, index) => (
+                  {values?.customFields?.slice(0, 6).map((_, index) => (
                     <div key={index} className="flex flex-row justify-between items-center mb-4">
-                      <label htmlFor={`customFields.${index}`} className="mr-2">
-                        Custom Field {index + 1}
-                      </label>
                       <Field
-                        name={`customFields.${index}`}
+                        name={`customFields.${index}.label`}
+                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                        placeholder={`Custom Field ${index + 1} label`}
+                      />
+
+                      <Field
+                        name={`customFields.${index}.value`}
                         key={index}
                         className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-                        placeholder={`Enter Custom Field ${index + 1}`}
+                        placeholder={`Enter Custom Field ${index + 1} value`}
                         autoComplete="off"
                       />
                     </div>
                   ))}
                   <button
                     type="button"
-                    onClick={() => arrayHelpers.push("")}
+                    onClick={() => arrayHelpers.push({ label: "", value: "" })}
-                    className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                    className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
+                    disabled={values?.customFields && values?.customFields?.length >= 6}
                   >
                     Add Custom Field
                   </button>

src/features/output/components/OutputForms.tsx

@@ -5,10 +5,12 @@ import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCCo
 import { usePostBearerConfig } from "../hooks/useBearer";
 import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
+import { useCustomFields } from "../hooks/useCustomFields";
 
 const OutputForms = () => {
   const { bearerMutation } = usePostBearerConfig();
   const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
+  const { customFieldsQuery } = useCustomFields();
 
   const isLoading = dispatcherQuery?.isLoading;
   const format = dispatcherQuery?.data?.propFormat?.value;
@@ -18,6 +20,22 @@ const OutputForms = () => {
   const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
   const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
 
+  const customFieldLabel1 = customFieldsQuery?.data?.propCustomFieldName1?.value;
+  const customFieldLabel2 = customFieldsQuery?.data?.propCustomFieldName2?.value;
+  const customFieldLabel3 = customFieldsQuery?.data?.propCustomFieldName3?.value;
+  const customFieldLabel4 = customFieldsQuery?.data?.propCustomFieldName4?.value;
+  const customFieldLabel5 = customFieldsQuery?.data?.propCustomFieldName5?.value;
+  const customFieldLabel6 = customFieldsQuery?.data?.propCustomFieldName6?.value;
+
+  const customfields = [
+    customFieldLabel1,
+    customFieldLabel2,
+    customFieldLabel3,
+    customFieldLabel4,
+    customFieldLabel5,
+    customFieldLabel6,
+  ];
+
   const inititalValues: FormTypes = {
     format: format ?? "JSON",
     enabled: true,
@@ -43,7 +61,7 @@ const OutputForms = () => {
     // ftp - fields
 
     //custom fields
-    customFields: [],
+    customFields: customfields ?? ["", "", "", "", "", ""],
   };
 
   const handleSubmit = async (values: FormTypes) => {
@@ -99,7 +117,7 @@ const OutputForms = () => {
     <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
       <Form className="grid grid-cols-1 md:grid-cols-2">
         <BearerTypeCard />
-        <ChannelCard />
+        <ChannelCard customFields={customfields} />
       </Form>
     </Formik>
   );

src/features/output/hooks/useCustomFields.ts

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+
+const fetchCustomFields = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-custom-fields`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useCustomFields = () => {
+  const customFieldsQuery = useQuery({
+    queryKey: ["customFields"],
+    queryFn: fetchCustomFields,
+  });
+
+  return { customFieldsQuery };
+};

src/features/settings/components/SystemConfig.tsx

@@ -1,11 +1,15 @@
 import { Formik, Form, Field, FieldArray } from "formik";
 import { useSystemSettings } from "../hooks/useSystemSettings";
-import type { SystemSettings } from "../../../types/types";
+import type { NetworkConfig, SystemSettings } from "../../../types/types";
 import { toast } from "sonner";
+import { useGetNetworkConfig } from "../hooks/useGetNetworkConfig";
 
 const SystemConfig = () => {
   const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();
+  const { networkConfigQuery, networkConfigMutation } = useGetNetworkConfig();
 
+  const isLoading = networkConfigMutation?.isPending || networkConfigMutation?.isPending;
+  const isGettingLoading = systemSettingsQuery?.isLoading || networkConfigQuery?.isLoading;
   const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted;
   const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
   const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted;
@@ -15,8 +19,11 @@ const SystemConfig = () => {
   const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value;
   const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value;
   const timeSource = systemSettingsQuery?.data?.propTimeSource?.value;
-  // const primaryServer = systemSettingsQuery?.data?.propPrimaryDNSServer?.value;
+  const primaryServer = networkConfigQuery?.data?.propNameServerPrimary?.value;
-  // const secondaryServer = systemSettingsQuery?.data?.propSecondaryDNSServer?.value;
+  const secondaryServer = networkConfigQuery?.data?.propNameServerSecondary?.value;
+  const ipAddress = networkConfigQuery?.data?.propHost?.value;
+  const subnetMask = networkConfigQuery?.data?.propNetmask?.value;
+  const gateway = networkConfigQuery?.data?.propGateway?.value;
 
   const initialValues = {
     deviceName: deviceName ?? "",
@@ -25,22 +32,36 @@ const SystemConfig = () => {
     SNTPServer: SNTPServer ?? "",
     SNTPInterval: SNTPInterval ?? 60,
     SNTPIntervalMinutes: SNTPInterval ?? 60,
-    primaryServer: "",
+    primaryServer: primaryServer ?? "",
-    secondaryServer: "",
+    secondaryServer: secondaryServer ?? "",
     timeSource: timeSource ?? "",
+    ipAddress: ipAddress ?? "",
+    subnetMask: subnetMask ?? "",
+    gateway: gateway ?? "",
     customFields: [],
   };
 
-  const handleSubmit = async (values: SystemSettings) => {
+  const handleSubmit = async (values: SystemSettings & NetworkConfig) => {
     const result = await systemSettingsMutation.mutateAsync(values);
+    const networkResult = await networkConfigMutation.mutateAsync({
+      ipAddress: values.ipAddress,
+      subnetMask: values.subnetMask,
+      gateway: values.gateway,
+      primaryServer: values.primaryServer,
+      secondaryServer: values.secondaryServer,
+    });
 
-    if (result.id) {
+    if (result.id && networkResult.id) {
       toast.success("System settings updated successfully");
     } else {
       toast.error("Failed to update system settings");
     }
   };
 
+  if (isGettingLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
       {({ values }) => (
@@ -106,6 +127,36 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="subnetMask">Subnet Mask</label>
+            <Field
+              name="subnetMask"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter subnet mask"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="ipAddress">IP Address</label>
+            <Field
+              name="ipAddress"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter IP address"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="gateway">Gateway</label>
+            <Field
+              name="gateway"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter gateway"
+              autoComplete="off"
+            />
+          </div>
           <div className="flex flex-row justify-between items-center mb-4">
             <label htmlFor="primaryServer">Primary DNS Server</label>
             <Field
@@ -133,7 +184,7 @@ const SystemConfig = () => {
             <FieldArray name="customFields">
               {(arrayHelpers) => (
                 <>
-                  {values.customFields.map((field, index) => (
+                  {values.customFields.map((_, index) => (
                     <div key={index} className="flex flex-row justify-between items-center mb-4">
                       <label htmlFor={`customFields.${index}`} className="mr-2">
                         Custom Field {index + 1}
@@ -167,8 +218,12 @@ const SystemConfig = () => {
               )}
             </FieldArray>
           </div>
-          <button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
+          <button
-            Save Settings
+            type="submit"
+            className="px-4 py-2 bg-green-700 text-white rounded-lg hover:bg-green-800 hover:cursor-pointer"
+            disabled={isLoading}
+          >
+            {isLoading ? "Saving..." : "Save Settings"}
           </button>
         </Form>
       )}

src/features/settings/hooks/useGetNetworkConfig.ts

@@ -0,0 +1,49 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { NetworkConfig } from "../../../types/types";
+
+const fetchNetworkConfig = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=GLOBAL--NetworkConfig`);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+const postNetworkConfig = async (networkConfig: NetworkConfig) => {
+  const fields = [
+    { property: "propNetmask", value: networkConfig.subnetMask },
+    { property: "propHost", value: networkConfig.ipAddress },
+    { property: "propGateway", value: networkConfig.gateway },
+  ];
+
+  if (networkConfig.primaryServer !== undefined) {
+    fields.push({ property: "propNameServerPrimary", value: networkConfig.primaryServer });
+  }
+  if (networkConfig.secondaryServer !== undefined) {
+    fields.push({ property: "propNameServerSecondary", value: networkConfig.secondaryServer });
+  }
+  const networkConfigPayload = {
+    id: "GLOBAL--NetworkConfig",
+    fields,
+  };
+
+  const respones = await fetch(`${CAMBASE}/api/update-config?id=GLOBAL--NetworkConfig`, {
+    method: "POST",
+    body: JSON.stringify(networkConfigPayload),
+  });
+  if (!respones.ok) throw new Error("Network response was not ok");
+  return respones.json();
+};
+
+export const useGetNetworkConfig = () => {
+  const networkConfigQuery = useQuery({
+    queryKey: ["networkConfig"],
+    queryFn: fetchNetworkConfig,
+  });
+
+  const networkConfigMutation = useMutation({
+    mutationKey: ["networkConfigMutation"],
+    mutationFn: postNetworkConfig,
+  });
+
+  return { networkConfigQuery, networkConfigMutation };
+};

src/types/types.ts

@@ -186,6 +186,12 @@ export type SystemSettings = {
   timeSource: string;
   SNTPServer: string;
   SNTPIntervalMinutes: number;
+};
+
+export type NetworkConfig = {
+  ipAddress: string;
+  subnetMask: string;
+  gateway: string;
   primaryServer?: string;
   secondaryServer?: string;
 };