updated forms along with addg tabs

src/components/SettingForms/BearerType/BearerTypeCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import BearerTypeFields from "./BearerTypeFields";
+
+const BearerTypeCard = () => {
+  return (
+    <Card>
+      <CardHeader title="Bearer Type" />
+      <BearerTypeFields />
+    </Card>
+  );
+};
+
+export default BearerTypeCard;

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -0,0 +1,35 @@
+import { Field, useFormikContext } from "formik";
+
+import FormToggle from "../components/FormToggle";
+
+export const ValuesComponent = () => {
+  return null;
+};
+
+const BearerTypeFields = () => {
+  const { values } = useFormikContext();
+  console.log(values);
+
+  return (
+    <div className="flex flex-col space-y-4">
+      <div className="flex items-center gap-3">
+        <label htmlFor="format">Format</label>
+        <Field
+          as="select"
+          name="format"
+          id="format"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="JSON">JSON</option>
+          <option value="BOF2">BOF2</option>
+        </Field>
+      </div>
+      <div className="flex flex-col space-y-4">
+        <FormToggle name="enabled" label="Enabled" />
+        <FormToggle name="verbose" label="Verbose" />
+      </div>
+    </div>
+  );
+};
+
+export default BearerTypeFields;

src/components/SettingForms/Channel1-JSON/ChannelCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import ChannelFields from "./ChannelFields";
+
+const ChannelCard = () => {
+  return (
+    <Card>
+      <CardHeader title="Channel 1 (JSON)" />
+      <ChannelFields />
+    </Card>
+  );
+};
+
+export default ChannelCard;

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -0,0 +1,64 @@
+import { Field, useFormikContext } from "formik";
+import FormGroup from "../components/FormGroup";
+
+const ChannelFields = () => {
+  useFormikContext();
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <FormGroup>
+        <label htmlFor="backoffice" className="m-0">
+          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"
+        />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="username">Username</label>
+        <Field
+          name={"username"}
+          type="text"
+          id="username"
+          placeholder="Back office username"
+          className="p-1.5 border border-gray-400 rounded-lg"
+        />
+      </FormGroup>
+      <FormGroup>
+        <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"
+        />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+        <Field
+          name={"connectTimeoutSeconds"}
+          type="number"
+          id="connectTimeoutSeconds"
+          className="p-1.5 border border-gray-400 rounded-lg"
+        />
+      </FormGroup>
+      <FormGroup>
+        <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"
+        />
+      </FormGroup>
+    </div>
+  );
+};
+
+export default ChannelFields;

src/components/SettingForms/NPED/NPEDCard.tsx

@@ -0,0 +1,12 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+
+const NPEDCard = () => {
+  return (
+    <Card>
+      <CardHeader title={"NPED Config and Hotlist"} />
+    </Card>
+  );
+};
+
+export default NPEDCard;

src/components/SettingForms/OverviewText/OverviewTextCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import OverviewTextFields from "./OverviewTextFields";
+
+const OverviewTextCard = () => {
+  return (
+    <Card>
+      <CardHeader title={"Overview Text"} />
+      <OverviewTextFields />
+    </Card>
+  );
+};
+
+export default OverviewTextCard;

src/components/SettingForms/OverviewText/OverviewTextFields.tsx

@@ -0,0 +1,53 @@
+import { Field, useFormikContext } from "formik";
+import FormGroup from "../components/FormGroup";
+import FormToggle from "../components/FormToggle";
+
+const OverviewTextFields = () => {
+  useFormikContext();
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <FormGroup>
+        <label htmlFor="overviewQuality">Include VRM</label>
+        <FormToggle name="includeVRM" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="includeMotion">Include Motion</label>
+        <FormToggle name="includeMotion" />
+      </FormGroup>
+
+      <FormGroup>
+        <label htmlFor="includeCameraName">Include Camera Name</label>
+        <FormToggle name="includeCameraName" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="includeTimestamp">Include Timestamp</label>
+        <FormToggle name="includeTimestamp" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="">Timestamp Format</label>
+        <Field
+          as="select"
+          name="timestampFormat"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value={"UTC"}>UTC</option>
+          <option value={"LOCAL"}>Local</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="overlayPosition">Overlay Position</label>
+        <Field
+          as="select"
+          name="overlayPosition"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value={"Top"}>Top</option>
+          <option value={"Bottom"}>Bottom</option>
+        </Field>
+      </FormGroup>
+    </div>
+  );
+};
+
+export default OverviewTextFields;

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -0,0 +1,84 @@
+import { Formik, Form } from "formik";
+import BearerTypeCard from "../BearerType/BearerTypeCard";
+import ChannelCard from "../Channel1-JSON/ChannelCard";
+import type { InitialValuesForm } from "../../../types/types";
+import { useState } from "react";
+import AdvancedToggle from "../../UI/AdvancedToggle";
+import OverviewTextCard from "../OverviewText/OverviewTextCard";
+import SightingDataCard from "../SightingData/SightingDataCard";
+
+const SettingForms = () => {
+  const [advancedToggle, setAdvancedToggle] = useState(false);
+
+  const initialValues = {
+    format: "JSON",
+    enabled: false,
+    verbose: false,
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: 0,
+    readTimeoutSeconds: 0,
+    overviewQuality: "high",
+    overviewImageScaleFactor: "full",
+    overviewType: "Plate Overview",
+    invertMotion: false,
+    maxPlateValueLength: 0,
+    vrmToTransit: "plain VRM ASCII (default)",
+    staticReadAction: "Use Lane Direction",
+    noRegionAction: "send",
+    countryCodeType: "IBAN 2 Character code (default)",
+    filterMinConfidence: 0,
+    filterMaxConfidence: 100,
+    overviewQualityOverride: 0,
+    sightingDataEnabled: false,
+    sighthingDataVerbose: false,
+    includeVRM: false,
+    includeMotion: false,
+    includeTimestamp: false,
+    timestampFormat: "UTC",
+    includeCameraName: false,
+    customFieldA: "",
+    customFieldB: "",
+    customFieldC: "",
+    customFieldD: "",
+    overlayPosition: "Top",
+  };
+
+  const handleSubmit = (values: InitialValuesForm) => {
+    alert(JSON.stringify(values));
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <Form className="flex flex-col space-y-3">
+        <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
+          <BearerTypeCard />
+          <ChannelCard />
+        </div>
+        <AdvancedToggle
+          advancedToggle={advancedToggle}
+          onAdvancedChange={setAdvancedToggle}
+        />
+        {advancedToggle && (
+          <>
+            <div className="md:col-span-2">
+              <SightingDataCard />
+            </div>
+            <div className="md:col-span-2">
+              <OverviewTextCard />
+            </div>
+          </>
+        )}
+        <button
+          type="submit"
+          className="w-1/4 text-white bg-blue-700 hover:bg-blue-800 font-small rounded-lg text-sm px-2 py-2.5"
+        >
+          Save changes
+        </button>
+      </Form>
+    </Formik>
+  );
+};
+
+export default SettingForms;

src/components/SettingForms/SightingData/SightingDataCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import SightingDataFields from "./SightingDataFields";
+
+const SightingDataCard = () => {
+  return (
+    <Card>
+      <CardHeader title={"Sighting Data"} />
+      <SightingDataFields />
+    </Card>
+  );
+};
+
+export default SightingDataCard;

src/components/SettingForms/SightingData/SightingDataFields.tsx

@@ -0,0 +1,123 @@
+import { Field, useFormikContext } from "formik";
+import FormGroup from "../components/FormGroup";
+import FormToggle from "../components/FormToggle";
+
+const SightingDataFields = () => {
+  useFormikContext();
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <FormGroup>
+        <label htmlFor="overviewQuality">Overview Quality</label>
+        <Field
+          name="overviewQuality"
+          as="select"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="HIGH">High</option>
+          <option value="MEDIUM">Medium</option>
+          <option value="LOW">Low</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="overviewImageScaleFactor">
+          Overview Image Scale Factor
+        </label>
+        <Field
+          as="select"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="HIGH">Full</option>
+          <option value="MEDIUM">3/4</option>
+          <option value="LOW">2/4</option>
+          <option value="LOW">1/4</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="overviewType">Overview Type</label>
+        <Field
+          as="select"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="PlainOverview">Plain Overview</option>
+          <option value="IncludePlatePatches">Include Plate Patches</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="invertMotion">Invert Motion</label>
+        <FormToggle name="invertMotion" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="maxPlateValueLength">Max Plate Value Length</label>
+        <Field
+          name="maxPlateValueLength"
+          type={"number"}
+          className="p-1.5 border border-gray-400 rounded-lg"
+        />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="vrmToTransit">VRM To Transit</label>
+        <Field
+          as="select"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="PlainOverview">plain VRM ASCII (default)</option>
+          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="staticReadAction">Static Read Action</label>
+        <Field
+          as="select"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="UseLaneDirection">Use Lane Direction</option>
+          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="noRegionAction">No Region Action</label>
+        <Field
+          as="select"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="UseLaneDirection">Send</option>
+          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="countryCodeType">Country Code Type</label>
+        <Field
+          as="select"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value="IBAN 2 Character code (default)">
+            IBAN 2 Character code (default)
+          </option>
+          <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
+        </Field>
+      </FormGroup>
+
+      <FormGroup>
+        <label htmlFor="overviewQualityOverride">
+          Overview Quality Override
+        </label>
+        <Field
+          name="maxPlateValueLength"
+          type={"number"}
+          className="p-1.5 border border-gray-400 rounded-lg"
+        />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="sightingDataEnabled">Sighting Data Enabled</label>
+        <FormToggle name="sightingDataEnabled" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="sighthingDataVerbose">Sighting Data Verbose</label>
+        <FormToggle name="sighthingDataVerbose" />
+      </FormGroup>
+    </div>
+  );
+};
+
+export default SightingDataFields;

src/components/SettingForms/components/FormGroup.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+type FormGroupProps = {
+  children: React.ReactNode;
+};
+
+const FormGroup = ({ children }: FormGroupProps) => {
+  return (
+    <div className="flex flex-col md:flex-row items-center justify-between">
+      {children}
+    </div>
+  );
+};
+
+export default FormGroup;

src/components/SettingForms/components/FormToggle.tsx

@@ -0,0 +1,17 @@
+import { Field } from "formik";
+
+const FormToggle = ({ name, label }: { name: string; label?: string }) => {
+  return (
+    <label className="flex items-center gap-3 cursor-pointer select-none w-50">
+      <span className="text-sm">{label}</span>
+      <Field id={name} type="checkbox" name={name} className="sr-only peer" />
+      <div
+        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+      />
+    </label>
+  );
+};
+
+export default FormToggle;