From 7f9923167e8fc9d26130aa4bf5339d3f4eba0cad Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 3 Dec 2025 19:51:02 +0000
Subject: [PATCH] - added formik custom fields to settings and output

---
 .../output/components/ChannelFields.tsx       |  44 +++-
 .../output/components/OutputForms.tsx         |   3 +
 .../settings/components/SystemConfig.tsx      | 220 +++++++++++-------
 src/types/types.ts                            |   6 +-
 4 files changed, 184 insertions(+), 89 deletions(-)

diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx
index 1633ac8..d35fe21 100644
--- a/src/features/output/components/ChannelFields.tsx
+++ b/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>
         </>
       ) : (
         <></>
diff --git a/src/features/output/components/OutputForms.tsx b/src/features/output/components/OutputForms.tsx
index 8ab9e50..f43b25c 100644
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -41,6 +41,9 @@ const OutputForms = () => {
     LID2: "",
 
     // ftp - fields
+
+    //custom fields
+    customFields: [],
   };
 
   const handleSubmit = async (values: FormTypes) => {
diff --git a/src/features/settings/components/SystemConfig.tsx b/src/features/settings/components/SystemConfig.tsx
index 2706a95..00cfde0 100644
--- a/src/features/settings/components/SystemConfig.tsx
+++ b/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>
   );
 };
diff --git a/src/types/types.ts b/src/types/types.ts
index c79cb13..262514f 100644
--- a/src/types/types.ts
+++ b/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;
-- 
2.25.1