src/features/output/components/BearerTypeCard.tsx

@@ -4,7 +4,7 @@ import BearerTypeFields from "./BearerTypeFields";
 
 const BearerTypeCard = () => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 h-50">
       <CardHeader title={"Bearer Type"} />
       <BearerTypeFields />
     </Card>

src/features/output/components/BearerTypeFields.tsx

@@ -2,8 +2,10 @@ import { Field } from "formik";
 
 const BearerTypeFields = () => {
   return (
-    <>
+    <div className="flex flex-row justify-between">
-      <label htmlFor="format">Format</label>
+      <label htmlFor="format" className="text-xl">
+        Format
+      </label>
       <Field
         as="select"
         name="format"
@@ -23,7 +25,7 @@ const BearerTypeFields = () => {
           FTP
         </option>
       </Field>
-    </>
+    </div>
   );
 };
 

src/features/output/components/ChannelCard.tsx

@@ -2,14 +2,21 @@ import { useFormikContext } from "formik";
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import ChannelFields from "./ChannelFields";
+import type { FormTypes } from "../../../types/types";
 
 const ChannelCard = () => {
-  const { values } = useFormikContext();
+  const { values, errors, touched } = useFormikContext<FormTypes>();
-  console.log(values);
+
   return (
-    <Card>
+    <Card className="p-4 h-150 md:h-full">
       <CardHeader title={`Channel (${values?.format})`} />
-      <ChannelFields format={values?.format} />
+      <ChannelFields errors={errors} touched={touched} values={values} />
+      <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"
+      >
+        {"Save Changes"}
+      </button>
     </Card>
   );
 };

src/features/output/components/ChannelFields.tsx

@@ -1,10 +1,16 @@
 import { Field } from "formik";
+import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
 
 type ChannelFieldsProps = {
-  format: string;
+  values: FormTypes;
+  errors: InitialValuesFormErrors;
+  touched: {
+    connectTimeoutSeconds?: boolean | undefined;
+    readTimeoutSeconds?: boolean | undefined;
+  };
 };
 
-const ChannelFields = ({ format }: ChannelFieldsProps) => {
+const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => {
   return (
     <div className="flex flex-col gap-4 p-4">
       <div className="flex flex-row justify-between">
@@ -60,6 +66,163 @@ const ChannelFields = ({ format }: ChannelFieldsProps) => {
           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" && (
+        <>
+          <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>
+        </>
+      )}
     </div>
   );
 };

src/features/output/components/Output.tsx

@@ -1,13 +1,14 @@
 import { Formik, Form } from "formik";
 import BearerTypeCard from "./BearerTypeCard";
 import ChannelCard from "./ChannelCard";
+import type { FormTypes } from "../../../types/types";
 
 const Output = () => {
-  const handleSubmit = (values) => {
+  const handleSubmit = (values: FormTypes) => {
     console.log(values);
   };
 
-  const inititalValues = {
+  const inititalValues: FormTypes = {
     format: "JSON",
     enabled: true,
     backOfficeURL: "",
@@ -17,11 +18,22 @@ const Output = () => {
     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}>
-      <Form>
+      <Form className="grid grid-cols-1 md:grid-cols-2">
         <BearerTypeCard />
         <ChannelCard />
       </Form>

src/types/types.ts

@@ -21,3 +21,39 @@ export type SystemHealthStatus = {
   id: string;
   tags: string[];
 };
+
+export type BearerTypeFields = {
+  format: string;
+  enabled: boolean;
+  backOfficeURL: string;
+  username: string;
+  password: string;
+  connectTimeoutSeconds: number;
+  readTimeoutSeconds: number;
+  overviewQuality: string;
+  cropSizeFactor: string;
+};
+
+export type OptionalConstants = {
+  FFID?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
+
+export type OptionalLaneIDs = {
+  laneId?: string;
+  LID1?: string;
+  LID2?: string;
+  LID3?: string;
+};
+
+export type InitialValuesFormErrors = {
+  backOfficeURL?: string;
+  username?: string;
+  password?: string;
+  connectTimeoutSeconds?: string;
+  readTimeoutSeconds?: string;
+};
+
+export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;