- improved ui for region selector and camera settings

Merge pull request 'feature/outputPage' (#4 ) from feature/outputPage into develop
Reviewed-on: #4
2025-11-25 14:57:18 +00:00 · 2025-11-25 10:23:57 +00:00 · 2025-11-25 10:07:35 +00:00 · 2025-11-24 22:07:08 +00:00 · 2025-11-24 20:37:04 +00:00
15 changed files with 574 additions and 65 deletions
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "@tanstack/react-router": "^1.136.18",
    "@tanstack/react-router-devtools": "^1.136.18",
    "clsx": "^2.1.1",
+    "formik": "^2.4.9",
    "konva": "^10.0.11",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useRef, useState } from "react";

 import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
-import type { Region } from "../../../types/types";
+import type { PaintedCell, Region } from "../../../types/types";
 import PlatePatch from "./PlatePatch/PlatePatch";

 const CameraGrid = () => {
@@ -14,14 +14,21 @@ const CameraGrid = () => {
  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
  const [mode, setMode] = useState("");
  const [tabIndex, setTabIndex] = useState(0);
-  console.log(tabIndex);
+
  const updateRegionColour = (index: number, newColour: string) => {
    setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
  };
-  console.log(mode);
+
+  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+
  return (
-    <div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
-      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
+    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
+      <VideoFeedGridPainter
+        regions={regions}
+        selectedRegionIndex={selectedRegionIndex}
+        mode={mode}
+        paintedCells={paintedCellsRef}
+      />
      <CameraSettings
        regions={regions}
        selectedRegionIndex={selectedRegionIndex}
@@ -31,6 +38,7 @@ const CameraGrid = () => {
        onSelectMode={setMode}
        tabIndex={tabIndex}
        setTabIndex={setTabIndex}
+        paintedCells={paintedCellsRef}
      />
      <PlatePatch />
    </div>
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -2,7 +2,8 @@ import Card from "../../../../ui/Card";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import RegionSelector from "./RegionSelector";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";

 type CameraSettingsProps = {
  regions: Region[];
@@ -13,6 +14,7 @@ type CameraSettingsProps = {
  onSelectMode: (mode: string) => void;
  setTabIndex: (tabIndex: number) => void;
  tabIndex: number;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };

 const CameraSettings = ({
@@ -24,9 +26,10 @@ const CameraSettings = ({
  onSelectMode,
  tabIndex,
  setTabIndex,
+  paintedCells,
 }: CameraSettingsProps) => {
  return (
-    <Card className="p-4 max-h-screen col-span-3">
+    <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
@@ -46,6 +49,7 @@ const CameraSettings = ({
            onChangeRegionColour={onChangeRegionColour}
            mode={mode}
            onSelectMode={onSelectMode}
+            paintedCells={paintedCells}
          />
        </TabPanel>
        <TabPanel>
--- a/src/features/cameras/components/CameraSettings/ColourPicker.tsx
+++ b/src/features/cameras/components/CameraSettings/ColourPicker.tsx
@@ -4,7 +4,16 @@ type ColourPickerProps = {
 };

 const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
-  return <input type="color" name="" id="" value={colour} onChange={(e) => setColour(e.target.value)} />;
+  return (
+    <input
+      type="color"
+      name=""
+      id=""
+      value={colour}
+      onChange={(e) => setColour(e.target.value)}
+      className="h-8 w-8 p-0 rounded-md border border-slate-500 cursor-pointer"
+    />
+  );
 };

 export default ColourPicker;
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -1,5 +1,6 @@
 import ColourPicker from "./ColourPicker";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";

 type RegionSelectorProps = {
  regions: Region[];
@@ -8,6 +9,7 @@ type RegionSelectorProps = {
  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
  onSelectMode: (mode: string) => void;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };

 const RegionSelector = ({
@@ -17,49 +19,100 @@ const RegionSelector = ({
  onChangeRegionColour,
  mode,
  onSelectMode,
+  paintedCells,
 }: RegionSelectorProps) => {
  const handleChange = (e: { target: { value: string } }) => {
    onSelectMode(e.target.value);
  };

-  return (
-    <div>
-      <div>
-        <h2 className="text-xl">Region Select</h2>
-      </div>
-      <div>
-        {regions.map((region, idx) => (
-          <div
-            key={region.name}
-            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
-          >
-            <label style={{ marginRight: "0.5rem" }}>
-              <input
-                type="radio"
-                checked={selectedRegionIndex === idx}
-                onChange={() => {
-                  onSelectMode("painter");
-                  onSelectRegion(idx);
-                }}
-              />{" "}
-              {region.name}
-            </label>
-            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
-          </div>
-        ))}
-        <div>
-          <h2 className="text-xl">Tools</h2>
-        </div>
-        <div className="flex flex-col">
-          <label htmlFor="mode">
-            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
-            Paint mode
-          </label>
+  const handleResetClick = () => {
+    const map = paintedCells.current;
+    map.clear();
+  };

-          <label htmlFor="erase">
-            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
-            Erase mode
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+        <h2 className="text-2xl mb-2">Tools</h2>
+        <div className="flex flex-col">
+          <label
+            htmlFor="paintMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+          >
+            <input
+              id="paintMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "painter"}
+              value="painter"
+              className="sr-only"
+            />
+            <span className="text-xl">Paint mode</span>
          </label>
+          <label
+            htmlFor="eraseMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+          >
+            <input
+              id="eraseMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "eraser"}
+              value={"eraser"}
+              className="sr-only"
+            />
+            <span className="text-xl">Erase mode</span>
+          </label>
+        </div>
+      </div>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+        <h2 className="text-2xl mb-2">Region Select</h2>
+        <>
+          {regions.map((region, idx) => {
+            const isSelected = selectedRegionIndex === idx;
+            const inputId = `region-${idx}`;
+            return (
+              <label
+                htmlFor={inputId}
+                key={region.name}
+                className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
+                  ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                <div className="flex flex-row gap-4 items-center">
+                  <input
+                    type="radio"
+                    checked={isSelected}
+                    id={inputId}
+                    name="region"
+                    className="sr-only"
+                    onChange={() => {
+                      onSelectMode("painter");
+                      onSelectRegion(idx);
+                    }}
+                  />
+                  <span className="text-xl">{region.name}</span>
+                </div>
+                <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
+                <p className="text-slate-400">{region.brushColour}</p>
+              </label>
+            );
+          })}
+        </>
+      </div>
+
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
+        <div className="flex flex-col">
+          <h2 className="text-2xl mb-2">Actions</h2>
+          <button
+            onClick={handleResetClick}
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset Regions
+          </button>
        </div>
      </div>
    </div>
--- a/src/features/cameras/components/PlatePatch/PlatePatch.tsx
+++ b/src/features/cameras/components/PlatePatch/PlatePatch.tsx
@@ -1,7 +1,7 @@
 import Card from "../../../../ui/Card";

 const PlatePatch = () => {
-  return <Card>PlatePatch</Card>;
+  return <Card className="md:row-start-4 md:col-span-2">PlatePatch</Card>;
 };

 export default PlatePatch;
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
 import Card from "../../../../ui/Card";

 const rows = 40;
@@ -14,17 +14,14 @@ type VideoFeedGridPainterProps = {
  regions: Region[];
  selectedRegionIndex: number;
  mode: string;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };

-type PaintedCell = {
-  colour: string;
-};
-
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells }: VideoFeedGridPainterProps) => {
  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
  const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
  const isDrawingRef = useRef(false);
-  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const paintLayerRef = useRef<any>(null);

@@ -50,7 +47,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
    const key = `${row}-${col}`;
    const currentColour = regions[selectedRegionIndex].brushColour;

-    const map = paintedCellsRef.current;
+    const map = paintedCells.current;
    const existing = map.get(key);

    if (mode === "eraser") {
@@ -103,12 +100,12 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG

  if (image === null || isloading)
    return (
-      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+      <Card className="row-span-3 col-span-2 rounded-lg p-4 w-full">
        <span className="text-slate-500">Loading Video feed…</span>
      </Card>
    );
  return (
-    <div className="row-span-1 col-span-2 rounded-lg">
+    <div className="mt-4.5 row-span-1 col-span-2">
      <Stage
        width={stageSize.width}
        height={stageSize.height}
@@ -124,7 +121,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
        <Layer ref={paintLayerRef} opacity={0.6}>
          <Shape
            sceneFunc={(ctx, shape) => {
-              const cells = paintedCellsRef.current;
+              const cells = paintedCells.current;
              cells.forEach((cell, key) => {
                const [rowStr, colStr] = key.split("-");
                const row = Number(rowStr);
--- a/src/features/output/components/BearerTypeCard.tsx
+++ b/src/features/output/components/BearerTypeCard.tsx
@@ -0,0 +1,14 @@
+import Card from "../../../ui/Card";
+import CardHeader from "../../../ui/CardHeader";
+import BearerTypeFields from "./BearerTypeFields";
+
+const BearerTypeCard = () => {
+  return (
+    <Card className="p-4 h-50">
+      <CardHeader title={"Bearer Type"} />
+      <BearerTypeFields />
+    </Card>
+  );
+};
+
+export default BearerTypeCard;
--- a/src/features/output/components/BearerTypeFields.tsx
+++ b/src/features/output/components/BearerTypeFields.tsx
@@ -0,0 +1,32 @@
+import { Field } from "formik";
+
+const BearerTypeFields = () => {
+  return (
+    <div className="flex flex-row justify-between">
+      <label htmlFor="format" className="text-xl">
+        Format
+      </label>
+      <Field
+        as="select"
+        name="format"
+        id="format"
+        className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+      >
+        <option key={"JSON"} value={"JSON"}>
+          JSON
+        </option>
+        <option key={"BOF2"} value={"BOF2"}>
+          BOF2
+        </option>
+        <option key={"UTMC"} value={"UTMC"}>
+          UTMC
+        </option>
+        <option key={"FTP"} value={"FTP"}>
+          FTP
+        </option>
+      </Field>
+    </div>
+  );
+};
+
+export default BearerTypeFields;
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -0,0 +1,24 @@
+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, errors, touched } = useFormikContext<FormTypes>();
+
+  return (
+    <Card className="p-4 h-150 md:h-full">
+      <CardHeader title={`Channel (${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>
+  );
+};
+
+export default ChannelCard;
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -0,0 +1,230 @@
+import { Field } from "formik";
+import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
+
+type ChannelFieldsProps = {
+  values: FormTypes;
+  errors: InitialValuesFormErrors;
+  touched: {
+    connectTimeoutSeconds?: boolean | undefined;
+    readTimeoutSeconds?: boolean | undefined;
+  };
+};
+
+const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => {
+  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" && (
+        <>
+          <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>
+  );
+};
+
+export default ChannelFields;
--- a/src/features/output/components/Output.tsx
+++ b/src/features/output/components/Output.tsx
@@ -0,0 +1,44 @@
+import { Formik, Form } from "formik";
+import BearerTypeCard from "./BearerTypeCard";
+import ChannelCard from "./ChannelCard";
+import type { FormTypes } from "../../../types/types";
+
+const Output = () => {
+  const handleSubmit = (values: FormTypes) => {
+    console.log(values);
+  };
+
+  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}>
+      <Form className="grid grid-cols-1 md:grid-cols-2">
+        <BearerTypeCard />
+        <ChannelCard />
+      </Form>
+    </Formik>
+  );
+};
+
+export default Output;
--- a/src/routes/output.tsx
+++ b/src/routes/output.tsx
@@ -1,9 +1,14 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
+import Output from "../features/output/components/Output";

-export const Route = createFileRoute('/output')({
+export const Route = createFileRoute("/output")({
  component: RouteComponent,
-})
+});

 function RouteComponent() {
-  return <div>Hello "/output"!</div>
+  return (
+    <div>
+      <Output />
+    </div>
+  );
 }
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -21,3 +21,43 @@ 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;
+
+export type PaintedCell = {
+  colour: string;
+};
--- a/yarn.lock
+++ b/yarn.lock
@@ -994,6 +994,13 @@
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==

+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz#306e3a3a73828522efa1341159da4846e7573a6c"
+  integrity sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json-schema@^7.0.15":
  version "7.0.15"
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -1351,6 +1358,11 @@ deep-is@^0.1.3:
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==

+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 detect-libc@^2.0.3:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
@@ -1601,6 +1613,20 @@ flatted@^3.2.9:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
  integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==

+formik@^2.4.9:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.9.tgz#7e5b81e9c9e215d0ce2ac8fed808cf7fba0cd204"
+  integrity sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
 fraction.js@^5.3.4:
  version "5.3.4"
  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a"
@@ -1679,6 +1705,13 @@ hermes-parser@^0.25.1:
  dependencies:
    hermes-estree "0.25.1"

+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 ignore@^5.2.0:
  version "5.3.2"
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
@@ -1886,11 +1919,21 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.merge@^4.6.2:
  version "4.6.2"
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==

+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -2087,7 +2130,12 @@ react-dom@^19.2.0:
  dependencies:
    scheduler "^0.27.0"

-react-is@^16.13.1:
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -2287,7 +2335,7 @@ tiny-invariant@^1.3.3:
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==

-tiny-warning@^1.0.3:
+tiny-warning@^1.0.2, tiny-warning@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -2312,7 +2360,7 @@ ts-api-utils@^2.1.0:
  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.1.0.tgz#595f7094e46eed364c13fd23e75f9513d29baf91"
  integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==

-tslib@^2.0.1, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.4.0:
  version "2.8.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
Author	SHA1	Message	Date
Toba Ojo	18124924f7	- improved ui for region selector and camera settings	2025-11-25 14:57:18 +00:00
TobaOjo	6ecb005417	Merge pull request 'feature/outputPage' (#4 ) from feature/outputPage into develop Reviewed-on: #4	2025-11-25 10:23:57 +00:00
Toba Ojo	16829ad5a5	- created forms for JSON, BOF2, UTMC and FTP	2025-11-25 10:07:35 +00:00
Toba Ojo	ec81392899	started adding to the output form	2025-11-24 22:07:08 +00:00
TobaOjo	8c967b3ae2	Merge pull request 'feature/dashboardPage' (#3 ) from feature/dashboardPage into develop Reviewed-on: #3	2025-11-24 20:37:04 +00:00