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

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();
 };

src/features/output/components/ChannelFields.tsx

@@ -46,8 +46,11 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
       onSetFieldValue(key, value);
     }
   }, [channelFieldsObject, onSetFieldValue, outputData]);
+
   return (
     <div className="flex flex-col gap-4 p-4">
+      {values.format.toLowerCase() !== "ftp" ? (
+        <>
           <div className="flex flex-row justify-between">
             <label htmlFor="backoffice" className="block mb-2 font-medium">
               Back Office URL
@@ -258,6 +261,10 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               </div>
             </>
           )}
+        </>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

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">

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),
   });

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),
   });

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),
   });

src/utils/config.ts

@@ -0,0 +1 @@
+export const CAMBASE = import.meta.env.VITE_BASEURL;