- added formik custom fields to settings and output

Reviewed-on: #13

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/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/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}