From 90eb976092355e55081eb3b099918332ce158ec3 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 25 Nov 2025 23:04:40 +0000
Subject: [PATCH 1/4] - can get data need to post

---
 .../output/components/ChannelCard.tsx         | 14 ++++++++++---
 .../output/components/ChannelFields.tsx       | 21 ++++++++++++++++++-
 src/features/output/components/Output.tsx     | 10 +++++++--
 src/features/output/hooks/useGetOutputs.ts    | 20 ++++++++++++++++++
 src/features/output/hooks/usePostOutputs.ts   | 21 +++++++++++++++++++
 5 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 src/features/output/hooks/useGetOutputs.ts
 create mode 100644 src/features/output/hooks/usePostOutputs.ts

diff --git a/src/features/output/components/ChannelCard.tsx b/src/features/output/components/ChannelCard.tsx
index 1378161..3ba087e 100644
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -3,14 +3,22 @@ import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import ChannelFields from "./ChannelFields";
 import type { FormTypes } from "../../../types/types";
+import { useGetOutputs } from "../hooks/useGetOutputs";
 
 const ChannelCard = () => {
-  const { values, errors, touched } = useFormikContext<FormTypes>();
-
+  const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
+  const { query } = useGetOutputs(values?.format?.toLowerCase() || "json");
+  const outputData = query?.data;
   return (
     <Card className="p-4 h-150 md:h-full">
       <CardHeader title={`Channel (${values?.format})`} />
-      <ChannelFields errors={errors} touched={touched} values={values} />
+      <ChannelFields
+        errors={errors}
+        touched={touched}
+        values={values}
+        outputData={outputData}
+        onSetFieldValue={setFieldValue}
+      />
       <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"
diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx
index 231a9c6..7422211 100644
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -1,5 +1,7 @@
 import { Field } from "formik";
 import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
 
 type ChannelFieldsProps = {
   values: FormTypes;
@@ -8,9 +10,26 @@ type ChannelFieldsProps = {
     connectTimeoutSeconds?: boolean | undefined;
     readTimeoutSeconds?: boolean | undefined;
   };
+  outputData?: UseQueryResult<FormTypes, Error>;
+  onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
 };
 
-const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => {
+const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
+  const channelFieldsObject = useMemo(() => {
+    return {
+      connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || 5,
+      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || 15,
+      backOfficeURL: outputData?.propBackofficeURL?.value || "",
+      username: outputData?.propUsername?.value || "",
+      password: outputData?.propPassword?.value || "",
+    };
+  }, [outputData]);
+
+  useEffect(() => {
+    for (const [key, value] of Object.entries(channelFieldsObject)) {
+      onSetFieldValue(key, value);
+    }
+  }, [channelFieldsObject, onSetFieldValue, outputData]);
   return (
     <div className="flex flex-col gap-4 p-4">
       <div className="flex flex-row justify-between">
diff --git a/src/features/output/components/Output.tsx b/src/features/output/components/Output.tsx
index 5c6854b..4e43205 100644
--- a/src/features/output/components/Output.tsx
+++ b/src/features/output/components/Output.tsx
@@ -2,10 +2,16 @@ import { Formik, Form } from "formik";
 import BearerTypeCard from "./BearerTypeCard";
 import ChannelCard from "./ChannelCard";
 import type { FormTypes } from "../../../types/types";
+import { usePostOutputs } from "../hooks/usePostOutputs";
 
 const Output = () => {
+  const { mutation } = usePostOutputs();
   const handleSubmit = (values: FormTypes) => {
-    console.log(values);
+    const channelFields = {
+      backOfficeURL: values.backOfficeURL,
+      username: values.username,
+      password: values.password,
+    };
   };
 
   const inititalValues: FormTypes = {
@@ -32,7 +38,7 @@ const Output = () => {
   };
 
   return (
-    <Formik initialValues={inititalValues} onSubmit={handleSubmit}>
+    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
       <Form className="grid grid-cols-1 md:grid-cols-2">
         <BearerTypeCard />
         <ChannelCard />
diff --git a/src/features/output/hooks/useGetOutputs.ts b/src/features/output/hooks/useGetOutputs.ts
new file mode 100644
index 0000000..e7b52b9
--- /dev/null
+++ b/src/features/output/hooks/useGetOutputs.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+
+const fetchOutputs = async (format: string) => {
+  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${format}`, {
+    method: "GET",
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useGetOutputs = (format: string) => {
+  const query = useQuery({
+    queryKey: ["outputs", format],
+    queryFn: () => fetchOutputs(format),
+  });
+
+  return { query };
+};
diff --git a/src/features/output/hooks/usePostOutputs.ts b/src/features/output/hooks/usePostOutputs.ts
new file mode 100644
index 0000000..d498bc1
--- /dev/null
+++ b/src/features/output/hooks/usePostOutputs.ts
@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+import type { BearerTypeFields } from "../../../types/types";
+
+const postQuery = async (query: BearerTypeFields) => {
+  const response = await fetch("/api/outputs", {
+    method: "POST",
+    body: JSON.stringify({ query }),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const usePostOutputs = () => {
+  const mutation = useMutation({
+    mutationFn: (query: BearerTypeFields) => postQuery(query),
+    mutationKey: ["outputs"],
+  });
+  return { mutation };
+};
-- 
2.25.1


From e07f769288b60bfc226d37ca7154fcf61bbba7cf Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 26 Nov 2025 13:00:41 +0000
Subject: [PATCH 2/4] - refactor: replace Output component with OutputForms and
 update related hooks and types

---
 .../dashboard/components/SystemHealth.tsx     |  2 +-
 .../dashboard/components/SystemOverview.tsx   |  1 -
 .../output/components/BearerTypeFields.tsx    |  4 +-
 .../output/components/ChannelCard.tsx         |  6 +-
 .../output/components/ChannelFields.tsx       |  9 +--
 src/features/output/components/Output.tsx     | 50 ------------
 .../output/components/OutputForms.tsx         | 81 +++++++++++++++++++
 src/features/output/hooks/useBearer.ts        | 65 +++++++++++++++
 .../output/hooks/useDispatcherConfig.ts       | 47 +++++++++++
 src/features/output/hooks/useGetOutputs.ts    | 20 -----
 .../output/hooks/useOptionalConstants.tsx     |  0
 src/features/output/hooks/usePostOutputs.ts   | 21 -----
 src/routes/output.tsx                         |  4 +-
 src/types/types.ts                            | 26 ++++++
 14 files changed, 232 insertions(+), 104 deletions(-)
 delete mode 100644 src/features/output/components/Output.tsx
 create mode 100644 src/features/output/components/OutputForms.tsx
 create mode 100644 src/features/output/hooks/useBearer.ts
 create mode 100644 src/features/output/hooks/useDispatcherConfig.ts
 delete mode 100644 src/features/output/hooks/useGetOutputs.ts
 create mode 100644 src/features/output/hooks/useOptionalConstants.tsx
 delete mode 100644 src/features/output/hooks/usePostOutputs.ts

diff --git a/src/features/dashboard/components/SystemHealth.tsx b/src/features/dashboard/components/SystemHealth.tsx
index de4f3b4..4a21206 100644
--- a/src/features/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -19,7 +19,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
   if (isLoading) {
     return <span className="text-slate-500">Loading system health…</span>;
   }
-
+  console.log(statuses);
   return (
     <div className="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">
diff --git a/src/features/dashboard/components/SystemOverview.tsx b/src/features/dashboard/components/SystemOverview.tsx
index c7aba54..b440e22 100644
--- a/src/features/dashboard/components/SystemOverview.tsx
+++ b/src/features/dashboard/components/SystemOverview.tsx
@@ -14,7 +14,6 @@ const SystemOverview = () => {
   const isError = query?.isError;
   const dateUpdatedAt = query?.dataUpdatedAt;
 
-  console.log(query?.dataUpdatedAt);
   return (
     <Card className="p-4">
       <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
diff --git a/src/features/output/components/BearerTypeFields.tsx b/src/features/output/components/BearerTypeFields.tsx
index dccbd26..6257bc3 100644
--- a/src/features/output/components/BearerTypeFields.tsx
+++ b/src/features/output/components/BearerTypeFields.tsx
@@ -1,6 +1,8 @@
-import { Field } from "formik";
+import { Field, useFormikContext } from "formik";
+import type { FormTypes } from "../../../types/types";
 
 const BearerTypeFields = () => {
+  useFormikContext<FormTypes>();
   return (
     <div className="flex flex-row justify-between">
       <label htmlFor="format" className="text-xl">
diff --git a/src/features/output/components/ChannelCard.tsx b/src/features/output/components/ChannelCard.tsx
index 3ba087e..bab00ed 100644
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -3,12 +3,12 @@ import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import ChannelFields from "./ChannelFields";
 import type { FormTypes } from "../../../types/types";
-import { useGetOutputs } from "../hooks/useGetOutputs";
+import { useGetBearerConfig } from "../hooks/useBearer";
 
 const ChannelCard = () => {
   const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
-  const { query } = useGetOutputs(values?.format?.toLowerCase() || "json");
-  const outputData = query?.data;
+  const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
+  const outputData = bearerQuery?.data;
   return (
     <Card className="p-4 h-150 md:h-full">
       <CardHeader title={`Channel (${values?.format})`} />
diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx
index 7422211..6162946 100644
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -1,6 +1,5 @@
 import { Field } from "formik";
-import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
-import type { UseQueryResult } from "@tanstack/react-query";
+import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
 
 type ChannelFieldsProps = {
@@ -10,15 +9,15 @@ type ChannelFieldsProps = {
     connectTimeoutSeconds?: boolean | undefined;
     readTimeoutSeconds?: boolean | undefined;
   };
-  outputData?: UseQueryResult<FormTypes, Error>;
+  outputData?: OutputDataResponse;
   onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
 };
 
 const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
   const channelFieldsObject = useMemo(() => {
     return {
-      connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || 5,
-      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || 15,
+      connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
+      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || "15",
       backOfficeURL: outputData?.propBackofficeURL?.value || "",
       username: outputData?.propUsername?.value || "",
       password: outputData?.propPassword?.value || "",
diff --git a/src/features/output/components/Output.tsx b/src/features/output/components/Output.tsx
deleted file mode 100644
index 4e43205..0000000
--- a/src/features/output/components/Output.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Formik, Form } from "formik";
-import BearerTypeCard from "./BearerTypeCard";
-import ChannelCard from "./ChannelCard";
-import type { FormTypes } from "../../../types/types";
-import { usePostOutputs } from "../hooks/usePostOutputs";
-
-const Output = () => {
-  const { mutation } = usePostOutputs();
-  const handleSubmit = (values: FormTypes) => {
-    const channelFields = {
-      backOfficeURL: values.backOfficeURL,
-      username: values.username,
-      password: values.password,
-    };
-  };
-
-  const inititalValues: FormTypes = {
-    format: "JSON",
-    enabled: true,
-    backOfficeURL: "",
-    username: "",
-    password: "",
-    connectTimeoutSeconds: Number(5),
-    readTimeoutSeconds: Number(15),
-    overviewQuality: "HIGH",
-    cropSizeFactor: "3/4",
-
-    // Bof2 -optional constants
-    FFID: "",
-    SCID: "",
-    timestampSource: "UTC",
-    GPSFormat: "Minutes",
-
-    //BOF2 - optional Lane IDs
-    laneId: "",
-    LID1: "",
-    LID2: "",
-  };
-
-  return (
-    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
-      <Form className="grid grid-cols-1 md:grid-cols-2">
-        <BearerTypeCard />
-        <ChannelCard />
-      </Form>
-    </Formik>
-  );
-};
-
-export default Output;
diff --git a/src/features/output/components/OutputForms.tsx b/src/features/output/components/OutputForms.tsx
new file mode 100644
index 0000000..8f8fe88
--- /dev/null
+++ b/src/features/output/components/OutputForms.tsx
@@ -0,0 +1,81 @@
+import { Formik, Form } from "formik";
+import BearerTypeCard from "./BearerTypeCard";
+import ChannelCard from "./ChannelCard";
+import type { BearerTypeFields, FormTypes, OptionalBOF2Constants } from "../../../types/types";
+import { usePostBearerConfig } from "../hooks/useBearer";
+import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
+
+const OutputForms = () => {
+  const { bearerMutation } = usePostBearerConfig();
+  const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
+
+  const format = dispatcherQuery?.data?.propFormat?.value;
+
+  const inititalValues: FormTypes = {
+    format: format ?? "JSON",
+    enabled: true,
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+    overviewQuality: "HIGH",
+    cropSizeFactor: "3/4",
+
+    // Bof2 -optional constants
+    FFID: "",
+    SCID: "",
+    timestampSource: "UTC",
+    GPSFormat: "Minutes",
+
+    //BOF2 - optional Lane IDs
+    laneId: "",
+    LID1: "",
+    LID2: "",
+  };
+
+  const handleSubmit = async (values: FormTypes) => {
+    const bearerTypeFields = {
+      format: values.format,
+      enabled: values.enabled,
+    };
+
+    const bearerFields: BearerTypeFields = {
+      format: values.format,
+      enabled: values.enabled,
+      backOfficeURL: values.backOfficeURL,
+      username: values.username,
+      password: values.password,
+      connectTimeoutSeconds: values.connectTimeoutSeconds,
+      readTimeoutSeconds: values.readTimeoutSeconds,
+      overviewQuality: values.overviewQuality,
+      cropSizeFactor: values.cropSizeFactor,
+    };
+
+    const result = await dispatcherMutation.mutateAsync(bearerTypeFields);
+
+    if (result?.id) {
+      await bearerMutation.mutateAsync(bearerFields);
+      if (values.format === "BOF2") {
+        const optionalBOF2Fields: OptionalBOF2Constants = {
+          FFID: values.FFID,
+          SCID: values.SCID,
+          timestampSource: values.timestampSource,
+          GPSFormat: values.GPSFormat,
+        };
+        console.log("Submit BOF2 optional fields:", optionalBOF2Fields);
+      }
+    }
+  };
+
+  return (
+    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
+      <Form className="grid grid-cols-1 md:grid-cols-2">
+        <BearerTypeCard />
+        <ChannelCard />
+      </Form>
+    </Formik>
+  );
+};
+
+export default OutputForms;
diff --git a/src/features/output/hooks/useBearer.ts b/src/features/output/hooks/useBearer.ts
new file mode 100644
index 0000000..33c9884
--- /dev/null
+++ b/src/features/output/hooks/useBearer.ts
@@ -0,0 +1,65 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { BearerTypeFields } from "../../../types/types";
+
+const fetchBearerConfig = async (bearerConfig: string) => {
+  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
+    method: "GET",
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postBearerConfig = async (config: BearerTypeFields) => {
+  const channelConfigPayload = {
+    id: `Dispatcher0-${config.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: config.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: config.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: config.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: config.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: config.username,
+      },
+    ],
+  };
+  const response = await fetch("http://192.168.202.121/api/update-config", {
+    method: "POST",
+    body: JSON.stringify(channelConfigPayload),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const usePostBearerConfig = () => {
+  const bearerMutation = useMutation({
+    mutationFn: (query: BearerTypeFields) => postBearerConfig(query),
+    mutationKey: ["outputs"],
+  });
+  return { bearerMutation };
+};
+
+export const useGetBearerConfig = (bearerConfig: string) => {
+  const bearerQuery = useQuery({
+    queryKey: ["outputs", bearerConfig],
+    queryFn: () => fetchBearerConfig(bearerConfig),
+  });
+
+  return { bearerQuery };
+};
diff --git a/src/features/output/hooks/useDispatcherConfig.ts b/src/features/output/hooks/useDispatcherConfig.ts
new file mode 100644
index 0000000..aa9021b
--- /dev/null
+++ b/src/features/output/hooks/useDispatcherConfig.ts
@@ -0,0 +1,47 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import type { DispatcherConfig } from "../../../types/types";
+
+const getDispatcherConfig = async () => {
+  const response = await fetch(`http://192.168.202.121/api/fetch-config?id=Dispatcher0`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postDispatcherConfig = async (config: DispatcherConfig) => {
+  const updateConfigPayload = {
+    id: "Dispatcher0",
+    fields: [
+      {
+        property: "propEnabled",
+        value: config.enabled,
+      },
+      {
+        property: "propFormat",
+        value: config.format,
+      },
+    ],
+  };
+  const response = await fetch(`http://192.168.202.121/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useDispatcherConfig = () => {
+  const dispatcherQuery = useQuery({
+    queryKey: ["dispatcherConfig"],
+    queryFn: () => getDispatcherConfig(),
+  });
+
+  const dispatcherMutation = useMutation({
+    mutationKey: ["postDispatcherConfig"],
+    mutationFn: (config: DispatcherConfig) => postDispatcherConfig(config),
+  });
+  return { dispatcherQuery, dispatcherMutation };
+};
diff --git a/src/features/output/hooks/useGetOutputs.ts b/src/features/output/hooks/useGetOutputs.ts
deleted file mode 100644
index e7b52b9..0000000
--- a/src/features/output/hooks/useGetOutputs.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-const fetchOutputs = async (format: string) => {
-  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${format}`, {
-    method: "GET",
-  });
-  if (!response.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return response.json();
-};
-
-export const useGetOutputs = (format: string) => {
-  const query = useQuery({
-    queryKey: ["outputs", format],
-    queryFn: () => fetchOutputs(format),
-  });
-
-  return { query };
-};
diff --git a/src/features/output/hooks/useOptionalConstants.tsx b/src/features/output/hooks/useOptionalConstants.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/output/hooks/usePostOutputs.ts b/src/features/output/hooks/usePostOutputs.ts
deleted file mode 100644
index d498bc1..0000000
--- a/src/features/output/hooks/usePostOutputs.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import type { BearerTypeFields } from "../../../types/types";
-
-const postQuery = async (query: BearerTypeFields) => {
-  const response = await fetch("/api/outputs", {
-    method: "POST",
-    body: JSON.stringify({ query }),
-  });
-  if (!response.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return response.json();
-};
-
-export const usePostOutputs = () => {
-  const mutation = useMutation({
-    mutationFn: (query: BearerTypeFields) => postQuery(query),
-    mutationKey: ["outputs"],
-  });
-  return { mutation };
-};
diff --git a/src/routes/output.tsx b/src/routes/output.tsx
index 10b16e8..f1be44e 100644
--- a/src/routes/output.tsx
+++ b/src/routes/output.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Output from "../features/output/components/Output";
+import OutputForms from "../features/output/components/OutputForms";
 
 export const Route = createFileRoute("/output")({
   component: RouteComponent,
@@ -8,7 +8,7 @@ export const Route = createFileRoute("/output")({
 function RouteComponent() {
   return (
     <div>
-      <Output />
+      <OutputForms />
     </div>
   );
 }
diff --git a/src/types/types.ts b/src/types/types.ts
index 94366e5..4477f7a 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -57,7 +57,33 @@ export type InitialValuesFormErrors = {
 };
 
 export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
+type FieldProperty = {
+  datatype: string;
+  value: string;
+};
+export type OutputDataResponse = {
+  id: string;
+  configHash: string;
+} & Record<string, FieldProperty>;
 
 export type PaintedCell = {
   colour: string;
 };
+
+export type DispatcherConfig = {
+  format: string;
+  enabled: boolean;
+};
+
+export type OptionalBOF2Constants = {
+  FFID?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
+export type OptionalBOF2LaneIDs = {
+  laneId?: string;
+  LID1?: string;
+  LID2?: string;
+  LID3?: string;
+};
-- 
2.25.1


From 97ff9a981d8aa97437b61cef4b31b6c98683a831 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 26 Nov 2025 15:31:19 +0000
Subject: [PATCH 3/4] - added form fetch and post for optional constants for
 UTMC

---
 .../dashboard/components/SystemHealth.tsx     |  1 -
 .../output/components/ChannelFields.tsx       | 21 ++++++-
 .../output/components/OutputForms.tsx         | 31 +++++++---
 .../output/hooks/useOptionalConstants.tsx     | 62 +++++++++++++++++++
 src/types/types.ts                            |  8 +++
 5 files changed, 113 insertions(+), 10 deletions(-)

diff --git a/src/features/dashboard/components/SystemHealth.tsx b/src/features/dashboard/components/SystemHealth.tsx
index 4a21206..f6cee37 100644
--- a/src/features/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -19,7 +19,6 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
   if (isLoading) {
     return <span className="text-slate-500">Loading system health…</span>;
   }
-  console.log(statuses);
   return (
     <div className="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">
diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx
index 6162946..b3ab4c4 100644
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -1,6 +1,7 @@
 import { Field } from "formik";
 import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
+import { useOptionalConstants } from "../hooks/useOptionalConstants";
 
 type ChannelFieldsProps = {
   values: FormTypes;
@@ -14,6 +15,8 @@ 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",
@@ -21,8 +24,22 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
       backOfficeURL: outputData?.propBackofficeURL?.value || "",
       username: outputData?.propUsername?.value || "",
       password: outputData?.propPassword?.value || "",
+      SCID: optionalConstants?.propSourceIdentifier?.value || "",
+      timestampSource: optionalConstants?.propTimeZoneType?.value || "UTC",
+      GPSFormat: optionalConstants?.propGpsFormat?.value || "Minutes",
+      FFID: optionalConstants?.propFeedIdentifier?.value || "",
     };
-  }, [outputData]);
+  }, [
+    optionalConstants?.propFeedIdentifier?.value,
+    optionalConstants?.propGpsFormat?.value,
+    optionalConstants?.propSourceIdentifier?.value,
+    optionalConstants?.propTimeZoneType?.value,
+    outputData?.propBackofficeURL?.value,
+    outputData?.propConnectTimeoutSeconds?.value,
+    outputData?.propPassword?.value,
+    outputData?.propReadTimeoutSeconds?.value,
+    outputData?.propUsername?.value,
+  ]);
 
   useEffect(() => {
     for (const [key, value] of Object.entries(channelFieldsObject)) {
@@ -194,7 +211,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
               >
                 <option value={"UTC"}>UTC</option>
-                <option value={"local"}>Local</option>
+                <option value={"LOCAL"}>Local</option>
               </Field>
             </div>
             <div className="flex flex-row justify-between">
diff --git a/src/features/output/components/OutputForms.tsx b/src/features/output/components/OutputForms.tsx
index 8f8fe88..aa52ece 100644
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -1,15 +1,21 @@
 import { Formik, Form } from "formik";
 import BearerTypeCard from "./BearerTypeCard";
 import ChannelCard from "./ChannelCard";
-import type { BearerTypeFields, FormTypes, OptionalBOF2Constants } from "../../../types/types";
+import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCConstants } from "../../../types/types";
 import { usePostBearerConfig } from "../hooks/useBearer";
 import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
+import { useOptionalConstants } from "../hooks/useOptionalConstants";
 
 const OutputForms = () => {
   const { bearerMutation } = usePostBearerConfig();
   const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
 
   const format = dispatcherQuery?.data?.propFormat?.value;
+  const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
+  const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
+  const SCID = optionalConstantsQuery?.data?.propSourceIdentifier?.value;
+  const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
+  const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
 
   const inititalValues: FormTypes = {
     format: format ?? "JSON",
@@ -22,11 +28,11 @@ const OutputForms = () => {
     overviewQuality: "HIGH",
     cropSizeFactor: "3/4",
 
-    // Bof2 -optional constants
-    FFID: "",
-    SCID: "",
-    timestampSource: "UTC",
-    GPSFormat: "Minutes",
+    // optional constants
+    FFID: FFID ?? "",
+    SCID: SCID ?? "",
+    timestampSource: timestampSource ?? "UTC",
+    GPSFormat: gpsFormat ?? "Minutes",
 
     //BOF2 - optional Lane IDs
     laneId: "",
@@ -56,14 +62,25 @@ const OutputForms = () => {
 
     if (result?.id) {
       await bearerMutation.mutateAsync(bearerFields);
+
       if (values.format === "BOF2") {
         const optionalBOF2Fields: OptionalBOF2Constants = {
+          format: values.format,
           FFID: values.FFID,
           SCID: values.SCID,
           timestampSource: values.timestampSource,
           GPSFormat: values.GPSFormat,
         };
-        console.log("Submit BOF2 optional fields:", optionalBOF2Fields);
+        await optionalConstantsMutation.mutateAsync(optionalBOF2Fields);
+      }
+      if (values.format === "UTMC") {
+        const optionalUTMCFields: OptionalUTMCConstants = {
+          format: values.format,
+          SCID: values.SCID,
+          timestampSource: values.timestampSource,
+          GPSFormat: values.GPSFormat,
+        };
+        await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
       }
     }
   };
diff --git a/src/features/output/hooks/useOptionalConstants.tsx b/src/features/output/hooks/useOptionalConstants.tsx
index e69de29..2ddb1f8 100644
--- a/src/features/output/hooks/useOptionalConstants.tsx
+++ b/src/features/output/hooks/useOptionalConstants.tsx
@@ -0,0 +1,62 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import type { OptionalBOF2Constants } from "../../../types/types";
+
+const fetchOptionalConstants = async (format: string) => {
+  if (!format || format === "json") return null;
+  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${format}-constants`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postOptionalConstants = async (config: OptionalBOF2Constants) => {
+  const fields = [
+    {
+      property: "propSourceIdentifier",
+      value: config?.SCID,
+    },
+    {
+      property: "propTimeZoneType",
+      value: config?.timestampSource,
+    },
+    {
+      property: "propGpsFormat",
+      value: config?.GPSFormat,
+    },
+  ];
+
+  if (config.FFID) {
+    fields.push({
+      property: "propFeedIdentifier",
+      value: config.FFID,
+    });
+  }
+  const updateConfigPayload = {
+    id: `Dispatcher0-${config.format?.toLowerCase()}-constants`,
+    fields: fields,
+  };
+
+  const response = await fetch(`http://100.115.148.59/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useOptionalConstants = (format: string) => {
+  const optionalConstantsQuery = useQuery({
+    queryKey: ["optionalConstants", format],
+    queryFn: () => fetchOptionalConstants(format),
+    enabled: !!format && format !== "json",
+  });
+
+  const optionalConstantsMutation = useMutation({
+    mutationKey: ["postOptionalConstants"],
+    mutationFn: postOptionalConstants,
+  });
+  return { optionalConstantsQuery, optionalConstantsMutation };
+};
diff --git a/src/types/types.ts b/src/types/types.ts
index 4477f7a..cf5bbb7 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -76,11 +76,19 @@ export type DispatcherConfig = {
 };
 
 export type OptionalBOF2Constants = {
+  format?: string;
   FFID?: string;
   SCID?: string;
   timestampSource?: string;
   GPSFormat?: string;
 };
+
+export type OptionalUTMCConstants = {
+  format?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
 export type OptionalBOF2LaneIDs = {
   laneId?: string;
   LID1?: string;
-- 
2.25.1


From 3c10ff82cb66dcd5b666fdb03d0d5482486356c0 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Thu, 27 Nov 2025 09:43:09 +0000
Subject: [PATCH 4/4] - updated base for endpoints - added loading states -
 need to add new form for ftp type

---
 .../dashboard/components/SystemHealth.tsx     |   4 +-
 .../dashboard/hooks/useGetSystemHealth.ts     |   3 +-
 .../output/components/ChannelFields.tsx       | 383 +++++++++---------
 .../output/components/OutputForms.tsx         |   7 +
 src/features/output/hooks/useBearer.ts        |   5 +-
 .../output/hooks/useDispatcherConfig.ts       |   5 +-
 ...lConstants.tsx => useOptionalConstants.ts} |   5 +-
 src/utils/config.ts                           |   1 +
 8 files changed, 217 insertions(+), 196 deletions(-)
 rename src/features/output/hooks/{useOptionalConstants.tsx => useOptionalConstants.ts} (88%)
 create mode 100644 src/utils/config.ts

diff --git a/src/features/dashboard/components/SystemHealth.tsx b/src/features/dashboard/components/SystemHealth.tsx
index f6cee37..664ac0b 100644
--- a/src/features/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -13,6 +13,8 @@ type SystemHealthProps = {
 const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
   const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
 
+  // console.log(statuses);
+
   if (isError) {
     return <span className="text-red-500">Error loading system health.</span>;
   }
@@ -31,7 +33,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
       </div>
       <div className="h-50 overflow-auto">
         {statuses?.map((status: SystemHealthStatus) => (
-          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between">
+          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between" key={status.id}>
             <span>{status.id}</span> <Badge text={status.tags[0]} />
           </div>
         ))}
diff --git a/src/features/dashboard/hooks/useGetSystemHealth.ts b/src/features/dashboard/hooks/useGetSystemHealth.ts
index d9599d6..afbbc3b 100644
--- a/src/features/dashboard/hooks/useGetSystemHealth.ts
+++ b/src/features/dashboard/hooks/useGetSystemHealth.ts
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
 
 const fetchData = async () => {
-  const response = await fetch(`http://100.115.148.59/api/system-health`);
+  const response = await fetch(`${CAMBASE}/api/system-health`);
   if (!response.ok) throw new Error("Cannot get System overview");
   return response.json();
 };
diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx
index b3ab4c4..1633ac8 100644
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -46,217 +46,224 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
       onSetFieldValue(key, value);
     }
   }, [channelFieldsObject, onSetFieldValue, outputData]);
+
   return (
     <div className="flex flex-col gap-4 p-4">
-      <div className="flex flex-row justify-between">
-        <label htmlFor="backoffice" className="block mb-2 font-medium">
-          Back Office URL
-        </label>
-        <Field
-          name={"backOfficeURL"}
-          type="text"
-          id="backoffice"
-          placeholder="https://www.backoffice.com"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="username" className="block mb-2 font-medium">
-          Username
-        </label>
-        <Field
-          name={"username"}
-          type="text"
-          id="username"
-          placeholder="Back office username"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="password">Password</label>
-        <Field
-          name={"password"}
-          type={"password"}
-          id="password"
-          placeholder="Back office password"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
-        <Field
-          name={"readTimeoutSeconds"}
-          type="number"
-          id="readTimeoutSeconds"
-          placeholder="https://example.com"
-          className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
-        <Field
-          name={"connectTimeoutSeconds"}
-          type="number"
-          id="connectTimeoutSeconds"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="overviewQuality">Overview quality and scale</label>
-        <Field
-          name={"overviewQuality"}
-          as="select"
-          id="overviewQuality"
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-        >
-          <option value={"HIGH"}>High</option>
-          <option value={"MEDIUM"}>Medium</option>
-          <option value={"LOW"}>Low</option>
-        </Field>
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="cropSizeFactor">Crop Size Factor</label>
-        <Field
-          name={"cropSizeFactor"}
-          as="select"
-          id="cropSizeFactor"
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-        >
-          <option value={"FULL"}>Full</option>
-          <option value={"3/4"}>3/4</option>
-          <option value={"1/2"}>1/2</option>
-          <option value={"1/4"}>1/4</option>
-        </Field>
-      </div>
-      {values.format.toLowerCase() === "utmc" && (
+      {values.format.toLowerCase() !== "ftp" ? (
         <>
-          <div className="border-b border-gray-500 my-3">
-            <h2 className="font-bold">{values.format} Constants</h2>
-          </div>
-
           <div className="flex flex-row justify-between">
-            <label htmlFor="SCID">Source ID / Camera ID</label>
+            <label htmlFor="backoffice" className="block mb-2 font-medium">
+              Back Office URL
+            </label>
             <Field
-              name={"SCID"}
+              name={"backOfficeURL"}
               type="text"
-              id="SCID"
-              placeholder="DEF345"
-              className={`p-1.5 border ${
-                errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-              } rounded-lg w-full md:w-60`}
+              id="backoffice"
+              placeholder="https://www.backoffice.com"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
           <div className="flex flex-row justify-between">
-            <label htmlFor="timestampSource">Timestamp Source</label>
+            <label htmlFor="username" className="block mb-2 font-medium">
+              Username
+            </label>
             <Field
-              name={"timestampSource"}
+              name={"username"}
+              type="text"
+              id="username"
+              placeholder="Back office username"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="password">Password</label>
+            <Field
+              name={"password"}
+              type={"password"}
+              id="password"
+              placeholder="Back office password"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+            <Field
+              name={"readTimeoutSeconds"}
+              type="number"
+              id="readTimeoutSeconds"
+              placeholder="https://example.com"
+              className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+            <Field
+              name={"connectTimeoutSeconds"}
+              type="number"
+              id="connectTimeoutSeconds"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="overviewQuality">Overview quality and scale</label>
+            <Field
+              name={"overviewQuality"}
               as="select"
-              id="timestampSource"
+              id="overviewQuality"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
             >
-              <option value={"UTC"}>UTC</option>
-              <option value={"local"}>Local</option>
+              <option value={"HIGH"}>High</option>
+              <option value={"MEDIUM"}>Medium</option>
+              <option value={"LOW"}>Low</option>
             </Field>
           </div>
           <div className="flex flex-row justify-between">
-            <label htmlFor="GPSFormat">GPS Format</label>
+            <label htmlFor="cropSizeFactor">Crop Size Factor</label>
             <Field
-              name={"GPSFormat"}
+              name={"cropSizeFactor"}
               as="select"
-              id="GPSFormat"
+              id="cropSizeFactor"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
             >
-              <option value={"Minutes"}>Minutes</option>
-              <option value={"Decimal Degrees"}>Decimal degrees</option>
+              <option value={"FULL"}>Full</option>
+              <option value={"3/4"}>3/4</option>
+              <option value={"1/2"}>1/2</option>
+              <option value={"1/4"}>1/4</option>
             </Field>
           </div>
+          {values.format.toLowerCase() === "utmc" && (
+            <>
+              <div className="border-b border-gray-500 my-3">
+                <h2 className="font-bold">{values.format} Constants</h2>
+              </div>
+
+              <div className="flex flex-row justify-between">
+                <label htmlFor="SCID">Source ID / Camera ID</label>
+                <Field
+                  name={"SCID"}
+                  type="text"
+                  id="SCID"
+                  placeholder="DEF345"
+                  className={`p-1.5 border ${
+                    errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                  } rounded-lg w-full md:w-60`}
+                />
+              </div>
+              <div className="flex flex-row justify-between">
+                <label htmlFor="timestampSource">Timestamp Source</label>
+                <Field
+                  name={"timestampSource"}
+                  as="select"
+                  id="timestampSource"
+                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                >
+                  <option value={"UTC"}>UTC</option>
+                  <option value={"local"}>Local</option>
+                </Field>
+              </div>
+              <div className="flex flex-row justify-between">
+                <label htmlFor="GPSFormat">GPS Format</label>
+                <Field
+                  name={"GPSFormat"}
+                  as="select"
+                  id="GPSFormat"
+                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                >
+                  <option value={"Minutes"}>Minutes</option>
+                  <option value={"Decimal Degrees"}>Decimal degrees</option>
+                </Field>
+              </div>
+            </>
+          )}
+          {values.format?.toLowerCase() === "bof2" && (
+            <>
+              <div className="space-y-3">
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Constants</h2>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="FFID">Feed ID / Force ID</label>
+                  <Field
+                    name={"FFID"}
+                    type="text"
+                    id="FFID"
+                    placeholder="ABC123"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="SCID">Source ID / Camera ID</label>
+                  <Field
+                    name={"SCID"}
+                    type="text"
+                    id="SCID"
+                    placeholder="DEF345"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="timestampSource">Timestamp Source</label>
+                  <Field
+                    name={"timestampSource"}
+                    as="select"
+                    id="timestampSource"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value={"UTC"}>UTC</option>
+                    <option value={"LOCAL"}>Local</option>
+                  </Field>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="GPSFormat">GPS Format</label>
+                  <Field
+                    name={"GPSFormat"}
+                    as="select"
+                    id="GPSFormat"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value={"Minutes"}>Minutes</option>
+                    <option value={"Decimal Degrees"}>Decimal degrees</option>
+                  </Field>
+                </div>
+              </div>
+              <div className="space-y-3">
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Lane ID Config</h2>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
+                  <Field
+                    name={"LID1"}
+                    type="text"
+                    id="LID1"
+                    placeholder="10"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
+                  <Field
+                    name={"LID2"}
+                    type="text"
+                    id="LID2"
+                    placeholder="20"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+              </div>
+            </>
+          )}
         </>
-      )}
-      {values.format?.toLowerCase() === "bof2" && (
-        <>
-          <div className="space-y-3">
-            <div className="border-b border-gray-500 my-3">
-              <h2 className="font-bold">{values.format} Constants</h2>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="FFID">Feed ID / Force ID</label>
-              <Field
-                name={"FFID"}
-                type="text"
-                id="FFID"
-                placeholder="ABC123"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="SCID">Source ID / Camera ID</label>
-              <Field
-                name={"SCID"}
-                type="text"
-                id="SCID"
-                placeholder="DEF345"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="timestampSource">Timestamp Source</label>
-              <Field
-                name={"timestampSource"}
-                as="select"
-                id="timestampSource"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                <option value={"UTC"}>UTC</option>
-                <option value={"LOCAL"}>Local</option>
-              </Field>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="GPSFormat">GPS Format</label>
-              <Field
-                name={"GPSFormat"}
-                as="select"
-                id="GPSFormat"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                <option value={"Minutes"}>Minutes</option>
-                <option value={"Decimal Degrees"}>Decimal degrees</option>
-              </Field>
-            </div>
-          </div>
-          <div className="space-y-3">
-            <div className="border-b border-gray-500 my-3">
-              <h2 className="font-bold">{values.format} Lane ID Config</h2>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
-              <Field
-                name={"LID1"}
-                type="text"
-                id="LID1"
-                placeholder="10"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
-              <Field
-                name={"LID2"}
-                type="text"
-                id="LID2"
-                placeholder="20"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-          </div>
-        </>
+      ) : (
+        <></>
       )}
     </div>
   );
diff --git a/src/features/output/components/OutputForms.tsx b/src/features/output/components/OutputForms.tsx
index aa52ece..8ab9e50 100644
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -10,6 +10,7 @@ const OutputForms = () => {
   const { bearerMutation } = usePostBearerConfig();
   const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
 
+  const isLoading = dispatcherQuery?.isLoading;
   const format = dispatcherQuery?.data?.propFormat?.value;
   const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
   const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
@@ -38,6 +39,8 @@ const OutputForms = () => {
     laneId: "",
     LID1: "",
     LID2: "",
+
+    // ftp - fields
   };
 
   const handleSubmit = async (values: FormTypes) => {
@@ -85,6 +88,10 @@ const OutputForms = () => {
     }
   };
 
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
       <Form className="grid grid-cols-1 md:grid-cols-2">
diff --git a/src/features/output/hooks/useBearer.ts b/src/features/output/hooks/useBearer.ts
index 33c9884..a0c9fd0 100644
--- a/src/features/output/hooks/useBearer.ts
+++ b/src/features/output/hooks/useBearer.ts
@@ -1,8 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { BearerTypeFields } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
 
 const fetchBearerConfig = async (bearerConfig: string) => {
-  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
     method: "GET",
   });
   if (!response.ok) {
@@ -37,7 +38,7 @@ const postBearerConfig = async (config: BearerTypeFields) => {
       },
     ],
   };
-  const response = await fetch("http://192.168.202.121/api/update-config", {
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(channelConfigPayload),
   });
diff --git a/src/features/output/hooks/useDispatcherConfig.ts b/src/features/output/hooks/useDispatcherConfig.ts
index aa9021b..af9b82c 100644
--- a/src/features/output/hooks/useDispatcherConfig.ts
+++ b/src/features/output/hooks/useDispatcherConfig.ts
@@ -1,8 +1,9 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import type { DispatcherConfig } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
 
 const getDispatcherConfig = async () => {
-  const response = await fetch(`http://192.168.202.121/api/fetch-config?id=Dispatcher0`);
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0`);
   if (!response.ok) {
     throw new Error("Network response was not ok");
   }
@@ -23,7 +24,7 @@ const postDispatcherConfig = async (config: DispatcherConfig) => {
       },
     ],
   };
-  const response = await fetch(`http://192.168.202.121/api/update-config`, {
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
diff --git a/src/features/output/hooks/useOptionalConstants.tsx b/src/features/output/hooks/useOptionalConstants.ts
similarity index 88%
rename from src/features/output/hooks/useOptionalConstants.tsx
rename to src/features/output/hooks/useOptionalConstants.ts
index 2ddb1f8..12b92fa 100644
--- a/src/features/output/hooks/useOptionalConstants.tsx
+++ b/src/features/output/hooks/useOptionalConstants.ts
@@ -1,9 +1,10 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import type { OptionalBOF2Constants } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
 
 const fetchOptionalConstants = async (format: string) => {
   if (!format || format === "json") return null;
-  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${format}-constants`);
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${format}-constants`);
   if (!response.ok) {
     throw new Error("Network response was not ok");
   }
@@ -37,7 +38,7 @@ const postOptionalConstants = async (config: OptionalBOF2Constants) => {
     fields: fields,
   };
 
-  const response = await fetch(`http://100.115.148.59/api/update-config`, {
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
diff --git a/src/utils/config.ts b/src/utils/config.ts
new file mode 100644
index 0000000..a8ef457
--- /dev/null
+++ b/src/utils/config.ts
@@ -0,0 +1 @@
+export const CAMBASE = import.meta.env.VITE_BASEURL;
-- 
2.25.1