updated forms along with addg tabs

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;