added NPED form and sonner toast

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": {

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/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>
   );
 };

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>

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;
+};

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"