From 92885409575310fa860958e5612fd8d59abd7ea0 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 18 Aug 2025 16:04:03 +0100
Subject: [PATCH] added NPED form and sonner toast

---
 package.json                                  |  1 +
 .../CameraSettings/CameraSettingFields.tsx    |  2 +
 src/components/SettingForms/NPED/NPEDCard.tsx |  4 +-
 .../SettingForms/NPED/NPEDFields.tsx          | 60 +++++++++++++++++++
 .../SettingForms/NPED/NPEDHotlist.tsx         | 49 +++++++++++++++
 .../SettingForms/NPED/NPEDHotlistCard.tsx     | 14 +++++
 src/components/UI/Footer.tsx                  |  2 +-
 src/pages/FrontCamera.tsx                     |  2 +
 src/pages/SystemSettings.tsx                  |  2 +
 src/types/types.ts                            | 10 ++++
 yarn.lock                                     |  5 ++
 11 files changed, 149 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SettingForms/NPED/NPEDHotlist.tsx
 create mode 100644 src/components/SettingForms/NPED/NPEDHotlistCard.tsx

diff --git a/package.json b/package.json
index 3ffc1cd..438c54f 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-router": "^7.8.0",
     "react-swipeable": "^7.0.2",
     "react-tabs": "^6.1.0",
+    "sonner": "^2.0.7",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx
index f9b99f6..3d6bdf6 100644
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/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);
   };
 
diff --git a/src/components/SettingForms/NPED/NPEDCard.tsx b/src/components/SettingForms/NPED/NPEDCard.tsx
index c55acef..e7f222f 100644
--- a/src/components/SettingForms/NPED/NPEDCard.tsx
+++ b/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>
   );
 };
diff --git a/src/components/SettingForms/NPED/NPEDFields.tsx b/src/components/SettingForms/NPED/NPEDFields.tsx
index e69de29..cc4d33f 100644
--- a/src/components/SettingForms/NPED/NPEDFields.tsx
+++ b/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;
diff --git a/src/components/SettingForms/NPED/NPEDHotlist.tsx b/src/components/SettingForms/NPED/NPEDHotlist.tsx
new file mode 100644
index 0000000..7e07e8d
--- /dev/null
+++ b/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;
diff --git a/src/components/SettingForms/NPED/NPEDHotlistCard.tsx b/src/components/SettingForms/NPED/NPEDHotlistCard.tsx
new file mode 100644
index 0000000..92582e0
--- /dev/null
+++ b/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;
diff --git a/src/components/UI/Footer.tsx b/src/components/UI/Footer.tsx
index 3cacc12..a950c87 100644
--- a/src/components/UI/Footer.tsx
+++ b/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.
diff --git a/src/pages/FrontCamera.tsx b/src/pages/FrontCamera.tsx
index 9a22518..774904c 100644
--- a/src/pages/FrontCamera.tsx
+++ b/src/pages/FrontCamera.tsx
@@ -1,5 +1,6 @@
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
+import { Toaster } from "sonner";
 import { useNavigate } from "react-router";
 import { useSwipeable } from "react-swipeable";
 
@@ -21,6 +22,7 @@ const FrontCamera = () => {
         settingsPage={true}
       />
       <CameraSettings title="Front Camera Settings" />
+      <Toaster />
     </div>
   );
 };
diff --git a/src/pages/SystemSettings.tsx b/src/pages/SystemSettings.tsx
index 2f90d14..6603d64 100644
--- a/src/pages/SystemSettings.tsx
+++ b/src/pages/SystemSettings.tsx
@@ -2,6 +2,7 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import NPEDCard from "../components/SettingForms/NPED/NPEDCard";
 import SettingForms from "../components/SettingForms/SettingForms/SettingForms";
+import NPEDHotlistCard from "../components/SettingForms/NPED/NPEDHotlistCard";
 
 const SystemSettings = () => {
   return (
@@ -19,6 +20,7 @@ const SystemSettings = () => {
         <TabPanel>
           <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">
             <NPEDCard />
+            <NPEDHotlistCard />
           </div>
         </TabPanel>
       </Tabs>
diff --git a/src/types/types.ts b/src/types/types.ts
index 137304b..31fa975 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -57,3 +57,13 @@ export type InitialValuesForm = {
   connectTimeoutSeconds: number;
   readTimeoutSeconds: number;
 };
+
+export type NPEDFieldType = {
+  username: string;
+  password: string;
+  clientId: string;
+};
+
+export type HotlistUploadType = {
+  file: string | null;
+};
diff --git a/yarn.lock b/yarn.lock
index 43c8fa0..8a1b642 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1921,6 +1921,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+sonner@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-2.0.7.tgz#810c1487a67ec3370126e0f400dfb9edddc3e4f6"
+  integrity sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==
+
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"