added NPED form and sonner toast

src/components/CameraSettings/CameraSettingFields.tsx

@@ -3,6 +3,7 @@ import type {
   CameraSettingErrorValues,
   CameraSettingValues,
 } from "../../types/types";
+import { toast } from "sonner";
 
 const CameraSettingFields = () => {
   const initialValues: CameraSettingValues = {
@@ -24,6 +25,7 @@ const CameraSettingFields = () => {
 
   const handleSubmit = (values: CameraSettingValues) => {
     // post values to endpoint
+    toast("Settings Saved");
     console.log(values);
   };
 

src/components/SettingForms/NPED/NPEDCard.tsx

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

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -0,0 +1,60 @@
+import { Form, Formik, Field } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { NPEDFieldType } from "../../../types/types";
+
+const NPEDFields = () => {
+  const initialValues = {
+    username: "",
+    password: "",
+    clientId: "",
+  };
+
+  const handleSubmit = (values: NPEDFieldType) => {
+    alert(JSON.stringify(values));
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <Form className="flex flex-col space-y-2">
+        <FormGroup>
+          <label htmlFor="username">Username</label>
+          <Field
+            name="username"
+            type="text"
+            id="username"
+            placeholder="NPED 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="NPED Password"
+            className="p-1.5 border border-gray-400 rounded-lg"
+          />
+        </FormGroup>
+        <FormGroup>
+          <label htmlFor="clientId">Client ID</label>
+          <Field
+            name="clientId"
+            type="text"
+            id="clientId"
+            placeholder="NPED client ID"
+            className="p-1.5 border border-gray-400 rounded-lg"
+          />
+        </FormGroup>
+        <button
+          type="submit"
+          className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+        >
+          Login
+        </button>
+      </Form>
+    </Formik>
+  );
+};
+
+export default NPEDFields;

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -0,0 +1,49 @@
+import { Form, Formik } from "formik";
+import type { HotlistUploadType } from "../../../types/types";
+
+const NPEDHotlist = () => {
+  const initialValue = {
+    file: null,
+  };
+
+  const handleSubmit = (values: HotlistUploadType) => console.log(values.file);
+
+  return (
+    <Formik initialValues={initialValue} onSubmit={handleSubmit}>
+      {({ setFieldValue, setErrors, errors }) => {
+        return (
+          <Form className="flex flex-col space-y-2">
+            <input
+              type="file"
+              name="file"
+              id="file"
+              className="file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
+              onChange={(e) => {
+                if (e.target.files) {
+                  if (e.target.files[0].type !== "text/csv") {
+                    setErrors({
+                      file: "This file is not a CSV, please select a different one",
+                    });
+
+                    return;
+                  }
+                  setFieldValue("file", e.target.files[0]);
+                }
+              }}
+            />
+            <button
+              type="submit"
+              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              disabled={errors ? true : false}
+            >
+              Upload
+            </button>
+            <p>{errors && errors.file}</p>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default NPEDHotlist;

src/components/SettingForms/NPED/NPEDHotlistCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import NPEDHotlist from "./NPEDHotlist";
+
+const NPEDHotlistCard = () => {
+  return (
+    <Card>
+      <CardHeader title={" Hotlist file upload"} />
+      <NPEDHotlist />
+    </Card>
+  );
+};
+
+export default NPEDHotlistCard;

src/components/UI/Footer.tsx

@@ -2,7 +2,7 @@ import Logo from "/MAV.svg";
 
 const Footer = () => {
   return (
-    <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4">
+    <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
       <img src={Logo} alt="Logo" width={100} height={100} />
       <p className="text-sm">
         {new Date().getFullYear()} MAV Systems &copy; All rights reserved.