- added formik custom fields to settings and output

Reviewed-on: #13

src/features/cameras/components/CameraGrid.tsx

@@ -9,7 +9,7 @@ const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
+    <div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0">
       <VideoFeedGridPainter />
       <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
       <PlatePatch />

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

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
 
 const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
+    <Card className="p-4 w-full overflow-auto md:col-span-2 md:row-span-5 md:col-start-4 md:row-start-1">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"

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

@@ -19,14 +19,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
   };
 
-  const handleAddRegionClick = () => {
-    const regionName = `Region ${regions.length + 1}`;
-    dispatch({
-      type: "ADD_NEW_REGION",
-      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
-    });
-  };
-
   const handleResetRegion = () => {
     dispatch({
       type: "RESET_PAINTED_CELLS",
@@ -34,13 +26,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
-  const handleRemoveClick = () => {
-    dispatch({
-      type: "REMOVE_REGION",
-      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
-    });
-  };
-
   const handleModeChange = (newMode: string) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: newMode } });
   };
@@ -177,14 +162,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             );
           })}
         </>
-        <div className=" mx-auto flex flex-row gap-4  mt-4">
-          <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
-            Add Region
-          </button>
-          <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
-            Remove Region
-          </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/SightingPatch.tsx

@@ -6,7 +6,7 @@ import SightingExitTable from "./SightingExitTable";
 
 const PlatePatch = () => {
   return (
-    <Card className="md:row-start-4 md:col-span-2 p-4 h-[190%]">
+    <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>
         <TabList>

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

@@ -93,7 +93,7 @@ const VideoFeedGridPainter = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      const newWidth = width * 0.39;
+      const newWidth = width * 0.55;
       const newHeight = newWidth / aspectRatio;
       setStageSize({ width: newWidth, height: newHeight });
     };
@@ -107,7 +107,7 @@ const VideoFeedGridPainter = () => {
   if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
   return (
     <div
-      className={`mt-4.5 row-span-1 col-span-2 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+      className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
         mode === "eraser" ? "hover:cursor-pointer" : ""
       }`}
     >

src/features/dashboard/components/DashboardGrid.tsx

@@ -47,9 +47,9 @@ const DashboardGrid = () => {
         refetch={refetch}
       />
       <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
-        <CameraStatus title="Camera A" category={categoryA} />
-        <CameraStatus title="Camera B" category={categoryB} />
-        <CameraStatus title="Camera C" category={categoryC} />
+        <CameraStatus title="Camera A" category={categoryA} isError={isError} />
+        <CameraStatus title="Camera B" category={categoryB} isError={isError} />
+        <CameraStatus title="Camera C" category={categoryC} isError={isError} />
       </div>
     </div>
   );

src/features/dashboard/components/cameraStatus/CameraStatus.tsx

@@ -7,10 +7,11 @@ import CameraStatusGridItem from "./CameraStatusGridItem";
 type CameraStatusProps = {
   title: string;
   category: SystemHealthStatus[];
+  isError?: boolean;
 };
 
-const CameraStatus = ({ title, category }: CameraStatusProps) => {
-  const isAllGood = category?.every((status) => status.tags.includes("RUNNING"));
+const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
+  const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
   // check if some are down
   // check if all are down
   //check if offline
@@ -18,10 +19,22 @@ const CameraStatus = ({ title, category }: CameraStatusProps) => {
     <Card className="p-4">
       <div className="border-b border-gray-600">
         <h3 className="text-lg flex flex-row items-center">
-          {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
+          {isError ? (
+            <StatusIndicators status={"bg-red-500"} />
+          ) : isAllGood ? (
+            <StatusIndicators status={"bg-green-500"} />
+          ) : (
+            <StatusIndicators status={"bg-amber-500"} />
+          )}
           {capitalize(title)}
         </h3>
-        <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
+        {isError ? (
+          <p className="text-sm text-red-500">Error loading camera health.</p>
+        ) : isAllGood ? (
+          <p className="text-sm text-green-500">All systems running</p>
+        ) : (
+          <p className="text-sm text-amber-500">Some systems down</p>
+        )}
       </div>
       {category && category?.length <= 0 ? (
         <p className=" text-gray-500">Loading Camera health...</p>

src/features/dashboard/components/statusGridItem/StatusGridItem.tsx

@@ -11,7 +11,8 @@ type StatusGridItemProps = {
 
 const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const isAllGood = statusCategory.every((status) => status.tags.includes("RUNNING"));
+  const isAllGood =
+    statusCategory && statusCategory.length > 0 && statusCategory.every((status) => status.tags.includes("RUNNING"));
 
   const handleClick = () => {
     setIsOpen(false);

src/features/dashboard/components/systemHealth/SystemHealth.tsx

@@ -38,7 +38,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
     return <span className="text-slate-500">Loading system health…</span>;
   }
   return (
-    <div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
+    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
       <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
         <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
           <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
@@ -50,8 +50,8 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
       <div className="overflow-auto gap-4">
         <StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
       </div>
-      <div className="border-t border-gray-500">
-        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
+      <div className="absolute bottom-0 left-0 border-t border-gray-500 w-full">
+        <small className="italic text-gray-400 ">{`Last refeshed ${updatedDate}`}</small>
       </div>
     </div>
   );

src/features/dashboard/components/systemStatus/SystemStatusCard.tsx

@@ -13,12 +13,21 @@ const SystemStatusCard = () => {
   const { storeQuery } = useGetStore();
 
   const reads = storeQuery?.data;
-  const isReadsLoading = storeQuery.isFetching;
+  const isReadsLoading = storeQuery?.isFetching;
+  const isError = storeQuery?.isError || !storeQuery?.data;
 
   useEffect(() => {
     storeQuery.refetch();
   }, [reads]);
 
+  if (isError) {
+    return (
+      <Card className="p-4">
+        <CardHeader title="System Status" />
+        <span className="text-red-500">Error loading system status.</span>
+      </Card>
+    );
+  }
   return (
     <Card className="p-4">
       <CardHeader title="System Status" />

src/features/dashboard/hooks/useGetSystemHealth.ts

@@ -11,6 +11,7 @@ export const useGetSystemHealth = () => {
   const query = useQuery({
     queryKey: ["fetchSystemData"],
     queryFn: fetchData,
+    refetchInterval: 300000,
   });
   return { query };
 };

src/features/output/components/ChannelFields.tsx

@@ -1,4 +1,4 @@
-import { Field } from "formik";
+import { Field, FieldArray } from "formik";
 import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
@@ -17,6 +17,7 @@ type ChannelFieldsProps = {
 const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
   const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
   const optionalConstants = optionalConstantsQuery?.data;
+
   const channelFieldsObject = useMemo(() => {
     return {
       connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -261,6 +262,47 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               </div>
             </>
           )}
+          <div className="border-b border-gray-500 my-3">
+            <h2 className="font-bold">Custom Fields</h2>
+          </div>
+          <div className="items-center mb-4">
+            <FieldArray name="customFields">
+              {(arrayHelpers) => (
+                <>
+                  {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}
+                      </label>
+                      <Field
+                        name={`customFields.${index}`}
+                        key={index}
+                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                        placeholder={`Enter Custom Field ${index + 1}`}
+                        autoComplete="off"
+                      />
+                    </div>
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => arrayHelpers.push("")}
+                    className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                  >
+                    Add Custom Field
+                  </button>
+                  {values?.customFields && values?.customFields?.length > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => arrayHelpers.pop()}
+                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                    >
+                      Remove Custom Field
+                    </button>
+                  )}
+                </>
+              )}
+            </FieldArray>
+          </div>
         </>
       ) : (
         <></>

src/features/output/components/OutputForms.tsx

@@ -41,6 +41,9 @@ const OutputForms = () => {
     LID2: "",
 
     // ftp - fields
+
+    //custom fields
+    customFields: [],
   };
 
   const handleSubmit = async (values: FormTypes) => {

src/features/settings/components/SystemConfig.tsx

@@ -1,4 +1,4 @@
-import { Formik, Form, Field } from "formik";
+import { Formik, Form, Field, FieldArray } from "formik";
 import { useSystemSettings } from "../hooks/useSystemSettings";
 import type { SystemSettings } from "../../../types/types";
 import { toast } from "sonner";
@@ -28,104 +28,150 @@ const SystemConfig = () => {
     primaryServer: "",
     secondaryServer: "",
     timeSource: timeSource ?? "",
+    customFields: [],
   };
 
   const handleSubmit = async (values: SystemSettings) => {
     const result = await systemSettingsMutation.mutateAsync(values);
-    console.log(result);
+
     if (result.id) {
       toast.success("System settings updated successfully");
+    } else {
+      toast.error("Failed to update system settings");
     }
   };
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      <Form>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="deviceName">Device Name</label>
-          <Field
-            name="deviceName"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter device name"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="timeZone">Timezone</label>
-          <Field
-            name="timeZone"
-            as="select"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
-            autoComplete="off"
-          >
-            {timeZoneOpts?.map((option: string) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </Field>
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="timeSource">Time Source</label>
-          <Field
-            name="timeSource"
-            as="select"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
-            autoComplete="off"
-          >
-            {timeSourceOpts?.map((option: string) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </Field>
-        </div>
+      {({ values }) => (
+        <Form>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="deviceName">Device Name</label>
+            <Field
+              name="deviceName"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter device name"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="timeZone">Timezone</label>
+            <Field
+              name="timeZone"
+              as="select"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
+              autoComplete="off"
+            >
+              {timeZoneOpts?.map((option: string) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </Field>
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="timeSource">Time Source</label>
+            <Field
+              name="timeSource"
+              as="select"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
+              autoComplete="off"
+            >
+              {timeSourceOpts?.map((option: string) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </Field>
+          </div>
 
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="SNTPServer">SNTP Server</label>
-          <Field
-            name="SNTPServer"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter SNTP server"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="SNTPInterval">SNTP Interval</label>
-          <Field
-            name="SNTPInterval"
-            type="number"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter SNTP interval"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="primaryServer">Primary DNS Server</label>
-          <Field
-            name="primaryServer"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter primary DNS server"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="secondaryServer">Secondary DNS Server</label>
-          <Field
-            name="secondaryServer"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter secondary DNS server"
-            autoComplete="off"
-          />
-        </div>
-        <button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
-          Save Settings
-        </button>
-      </Form>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="SNTPServer">SNTP Server</label>
+            <Field
+              name="SNTPServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter SNTP server"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="SNTPInterval">SNTP Interval</label>
+            <Field
+              name="SNTPInterval"
+              type="number"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter SNTP interval"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="primaryServer">Primary DNS Server</label>
+            <Field
+              name="primaryServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter primary DNS server"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-row justify-between items-center mb-4">
+            <label htmlFor="secondaryServer">Secondary DNS Server</label>
+            <Field
+              name="secondaryServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter secondary DNS server"
+              autoComplete="off"
+            />
+          </div>
+          <div className="border-b border-gray-500 my-3">
+            <h2 className="font-bold">Custom Fields</h2>
+          </div>
+          <div className="items-center mb-4">
+            <FieldArray name="customFields">
+              {(arrayHelpers) => (
+                <>
+                  {values.customFields.map((field, 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}`}
+                        key={index}
+                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                        placeholder={`Enter Custom Field ${index + 1}`}
+                        autoComplete="off"
+                      />
+                    </div>
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => arrayHelpers.push("")}
+                    className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                  >
+                    Add Custom Field
+                  </button>
+                  {values.customFields.length > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => arrayHelpers.pop()}
+                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                    >
+                      Remove Custom Field
+                    </button>
+                  )}
+                </>
+              )}
+            </FieldArray>
+          </div>
+          <button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
+            Save Settings
+          </button>
+        </Form>
+      )}
     </Formik>
   );
 };

src/types/types.ts

@@ -56,6 +56,10 @@ export type OptionalLaneIDs = {
   LID3?: string;
 };
 
+export type CustomFields = {
+  customFields?: string[];
+};
+
 export type InitialValuesFormErrors = {
   backOfficeURL?: string;
   username?: string;
@@ -64,7 +68,7 @@ export type InitialValuesFormErrors = {
   readTimeoutSeconds?: string;
 };
 
-export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
+export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs & CustomFields;
 type FieldProperty = {
   datatype: string;
   value: string;

src/ui/ModalComponent.tsx

@@ -11,7 +11,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}