- updated base for endpoints

- added loading states - need to add new form for ftp type
- added form fetch and post for optional constants for UTMC
2025-11-27 09:43:09 +00:00 · 2025-11-26 15:31:19 +00:00 · 2025-11-26 13:00:41 +00:00 · 2025-11-25 23:04:40 +00:00 · 2025-11-25 20:49:11 +00:00 · 2025-11-25 15:49:53 +00:00
24 changed files with 801 additions and 319 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BayIQ</title>
  </head>
--- a/public/MAV-Blue.svg
+++ b/public/MAV-Blue.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.27 52.63">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #20456f;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer_2">
+    <g>
+      <g id="Layer_1-2">
+        <path class="cls-1" d="M150.57,0h-40.57c-7.53,0-13.64,6.11-13.64,13.64v38.99h13.64v-13.68h40.57v13.68h13.64V13.64c0-7.53-6.11-13.64-13.64-13.64ZM110,28.55v-12.59c0-1.72,1.39-3.11,3.11-3.11h34.34c1.72,0,3.11,1.39,3.11,3.11v12.59h-40.57,0ZM88.45,13.64v38.99h-13.64V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.5c-1.72,0-3.11,1.39-3.11,3.11v36.67h-13.73V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.49c-1.72,0-3.11,1.39-3.11,3.11v36.67H0V13.64C0,6.11,6.11,0,13.64,0h23.55c2.72,0,5.18,1.05,7.03,2.76,1.85-1.71,4.32-2.76,7.03-2.76h23.55c7.53,0,13.64,6.11,13.64,13.64h.01ZM193.88,52.63c-1.19,0-2.28-.68-2.8-1.75L166.25,0h13.16c1.19,0,2.28.68,2.8,1.75,0,0,12.25,25.11,16.55,33.92,4.3-8.81,16.55-33.92,16.55-33.92.53-1.07,1.61-1.75,2.8-1.75h13.16l-24.83,50.88c-.52,1.07-1.61,1.75-2.8,1.75h-9.78.02Z"/>
+      </g>
+      <path class="cls-1" d="M222.79,48.39c0-2.36,1.9-4.24,4.24-4.24s4.24,1.88,4.24,4.24-1.88,4.24-4.24,4.24-4.24-1.9-4.24-4.24ZM223.45,48.39c0,1.96,1.6,3.58,3.58,3.58s3.56-1.62,3.56-3.58-1.58-3.56-3.56-3.56-3.58,1.56-3.58,3.56ZM228.17,50.83l-1.26-1.92h-.8v1.92h-.72v-4.86h1.98c.9,0,1.62.58,1.62,1.48,0,1.08-.96,1.44-1.24,1.44l1.3,1.94h-.88ZM226.11,46.57v1.72h1.26c.5,0,.88-.34.88-.84,0-.54-.38-.88-.88-.88h-1.26Z"/>
+    </g>
+  </g>
+</svg>
--- 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,14 @@ const CameraGrid = () => {
        onSelectMode={setMode}
        tabIndex={tabIndex}
        setTabIndex={setTabIndex}
+        paintedCells={paintedCellsRef}
+        onAddRegion={() => {
+          setRegions((prev) => [...prev, { name: `Region ${prev.length + 1}`, brushColour: "#ffffff" }]);
+        }}
+        OnRemoveRegion={() => {
+          setRegions((prev) => prev.filter((_, i) => i !== selectedRegionIndex));
+          setSelectedRegionIndex((prev) => (prev > 0 ? prev - 1 : 0));
+        }}
      />
      <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,9 @@ type CameraSettingsProps = {
  onSelectMode: (mode: string) => void;
  setTabIndex: (tabIndex: number) => void;
  tabIndex: number;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
+  onAddRegion: () => void;
+  OnRemoveRegion: () => void;
 };

 const CameraSettings = ({
@@ -24,9 +28,12 @@ const CameraSettings = ({
  onSelectMode,
  tabIndex,
  setTabIndex,
+  paintedCells,
+  onAddRegion,
+  OnRemoveRegion,
 }: 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 +53,9 @@ const CameraSettings = ({
            onChangeRegionColour={onChangeRegionColour}
            mode={mode}
            onSelectMode={onSelectMode}
+            paintedCells={paintedCells}
+            onAddRegion={onAddRegion}
+            OnRemoveRegion={OnRemoveRegion}
          />
        </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,9 @@ type RegionSelectorProps = {
  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
  onSelectMode: (mode: string) => void;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
+  onAddRegion: () => void;
+  OnRemoveRegion: () => void;
 };

 const RegionSelector = ({
@@ -17,49 +21,118 @@ const RegionSelector = ({
  onChangeRegionColour,
  mode,
  onSelectMode,
+  paintedCells,
+  onAddRegion,
+  OnRemoveRegion,
 }: 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 handleAddClick = () => {
+    onAddRegion();
+  };

-          <label htmlFor="erase">
-            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
-            Erase mode
+  const handleResetClick = () => {
+    const map = paintedCells.current;
+    map.clear();
+  };
+
+  const handleRemoveClick = () => {
+    OnRemoveRegion();
+  };
+
+  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 className=" mx-auto flex flex-row gap-4  mt-4">
+          <button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddClick}>
+            Add Region
+          </button>
+          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
+            Remove Region
+          </button>
+        </div>
+      </div>
+
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
+        <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/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -6,31 +6,41 @@ type SystemHealthProps = {
  uptime: string;
  statuses: SystemHealthStatus[];
  isLoading: boolean;
+  isError: boolean;
+  dateUpdatedAt?: number;
 };

-const SystemHealth = ({ startTime, uptime, statuses, isLoading }: 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>;
+  }
  if (isLoading) {
    return <span className="text-slate-500">Loading system health…</span>;
  }
-
  return (
-    <div className="h-100 md:h-70">
+    <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">
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </div>
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
        </div>
      </div>
-
-      <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>
        ))}
      </div>
+      <div className="border-t border-gray-500">
+        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
+      </div>
    </div>
  );
 };
--- a/src/features/dashboard/components/SystemOverview.tsx
+++ b/src/features/dashboard/components/SystemOverview.tsx
@@ -11,10 +11,20 @@ const SystemOverview = () => {
  const uptime = query?.data?.UptimeHumane;
  const statuses = query?.data?.Status;
  const isLoading = query?.isLoading;
+  const isError = query?.isError;
+  const dateUpdatedAt = query?.dataUpdatedAt;
+
  return (
    <Card className="p-4">
      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
-      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
+      <SystemHealth
+        startTime={startTime}
+        uptime={uptime}
+        statuses={statuses}
+        isLoading={isLoading}
+        isError={isError}
+        dateUpdatedAt={dateUpdatedAt}
+      />
    </Card>
  );
 };
--- 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();
 };
--- 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">
--- 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 { useGetBearerConfig } from "../hooks/useBearer";

 const ChannelCard = () => {
-  const { values, errors, touched } = useFormikContext<FormTypes>();
-
+  const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
+  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})`} />
-      <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"
--- 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 { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
+import { useEffect, useMemo } from "react";
+import { useOptionalConstants } from "../hooks/useOptionalConstants";

 type ChannelFieldsProps = {
  values: FormTypes;
@@ -8,220 +10,260 @@ type ChannelFieldsProps = {
    connectTimeoutSeconds?: boolean | undefined;
    readTimeoutSeconds?: boolean | undefined;
  };
+  outputData?: OutputDataResponse;
+  onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
 };

-const ChannelFields = ({ errors, touched, values }: 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",
+      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || "15",
+      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 || "",
+    };
+  }, [
+    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)) {
+      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>
  );
--- a/src/features/output/components/Output.tsx
+++ b/src/features/output/components/Output.tsx
@@ -1,44 +0,0 @@
-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/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -0,0 +1,105 @@
+import { Formik, Form } from "formik";
+import BearerTypeCard from "./BearerTypeCard";
+import ChannelCard from "./ChannelCard";
+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 isLoading = dispatcherQuery?.isLoading;
+  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",
+    enabled: true,
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+    overviewQuality: "HIGH",
+    cropSizeFactor: "3/4",
+
+    // optional constants
+    FFID: FFID ?? "",
+    SCID: SCID ?? "",
+    timestampSource: timestampSource ?? "UTC",
+    GPSFormat: gpsFormat ?? "Minutes",
+
+    //BOF2 - optional Lane IDs
+    laneId: "",
+    LID1: "",
+    LID2: "",
+
+    // ftp - fields
+  };
+
+  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 = {
+          format: values.format,
+          FFID: values.FFID,
+          SCID: values.SCID,
+          timestampSource: values.timestampSource,
+          GPSFormat: values.GPSFormat,
+        };
+        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);
+      }
+    }
+  };
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
+      <Form className="grid grid-cols-1 md:grid-cols-2">
+        <BearerTypeCard />
+        <ChannelCard />
+      </Form>
+    </Formik>
+  );
+};
+
+export default OutputForms;
--- a/src/features/output/hooks/useBearer.ts
+++ b/src/features/output/hooks/useBearer.ts
@@ -0,0 +1,66 @@
+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(`${CAMBASE}/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(`${CAMBASE}/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 };
+};
--- a/src/features/output/hooks/useDispatcherConfig.ts
+++ b/src/features/output/hooks/useDispatcherConfig.ts
@@ -0,0 +1,48 @@
+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(`${CAMBASE}/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(`${CAMBASE}/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 };
+};
--- a/src/features/output/hooks/useOptionalConstants.ts
+++ b/src/features/output/hooks/useOptionalConstants.ts
@@ -0,0 +1,63 @@
+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(`${CAMBASE}/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(`${CAMBASE}/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 };
+};
--- 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>
  );
 }
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -57,3 +57,41 @@ 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 = {
+  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;
+  LID2?: string;
+  LID3?: string;
+};
--- a/src/ui/CardHeader.tsx
+++ b/src/ui/CardHeader.tsx
@@ -21,7 +21,7 @@ const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps)
          {status && <StatusIndicators status={status} />}
          {title}
        </h2>
-        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
+        {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
      </div>
    </div>
  );
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -1,29 +1,39 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";

 const Header = () => {
  return (
-    <header className="bg-[#253445] p-4 flex  border-b border-gray-500 justify-between">
+    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
      <div className="w-28">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
-      <div className="flex gap-4">
-        <Link to="/" className="[&.active]:font-bold">
-          <FontAwesomeIcon icon={faGaugeHigh} />
+      <div className="flex gap-4 text-lg items-center">
+        <Link
+          to="/"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
+          {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
          Dashboard
        </Link>

-        <Link to="/baywatch" className="[&.active]:font-bold">
+        <Link
+          to="/baywatch"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
          Cameras
        </Link>
-        <Link to="/output" className="[&.active]:font-bold">
+        <Link
+          to="/output"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
          Output
        </Link>
-        <Link to="/settings" className="[&.active]:font-bold">
+        <Link
+          to="/settings"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
          Settings
        </Link>
      </div>
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -0,0 +1 @@
+export const CAMBASE = import.meta.env.VITE_BASEURL;
Author	SHA1	Message	Date
Toba Ojo	3c10ff82cb	- updated base for endpoints - added loading states - need to add new form for ftp type	2025-11-27 09:43:09 +00:00
Toba Ojo	97ff9a981d	- added form fetch and post for optional constants for UTMC	2025-11-26 15:31:19 +00:00
Toba Ojo	e07f769288	- refactor: replace Output component with OutputForms and update related hooks and types	2025-11-26 13:00:41 +00:00
Toba Ojo	90eb976092	- can get data need to post	2025-11-25 23:04:40 +00:00
Toba Ojo	225a2a6168	- added add and remove regions on paint selector	2025-11-25 20:49:11 +00:00
Toba Ojo	2aa0b4377f	- minor tweaks to ui across app	2025-11-25 15:49:53 +00:00
Toba Ojo	0d385061e0	- updated icon	2025-11-25 15:02:18 +00:00
TobaOjo	3bbb3166ba	Merge pull request '- improved ui for region selector and camera settings' (#5 ) from feature/cameras-2 into develop Reviewed-on: #5	2025-11-25 14:59:25 +00:00
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
				`@@ -0,0 +1 @@`
				`export const CAMBASE = import.meta.env.VITE_BASEURL;`