From 673df1a4f4330b2a5d9b64082bdad452d627af20 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 30 Sep 2025 13:25:11 +0100
Subject: [PATCH] added ui for sound settings

---
 .../SettingForms/Sound/SoundSettingsCard.tsx  |  14 ++
 .../Sound/SoundSettingsFields.tsx             | 127 ++++++++++++++++++
 .../SettingForms/Sound/SoundUpload.tsx        |  45 +++++++
 .../SettingForms/Sound/SoundUploadCard.tsx    |  14 ++
 src/pages/SystemSettings.tsx                  |   9 ++
 src/types/types.ts                            |  17 +++
 6 files changed, 226 insertions(+)
 create mode 100644 src/components/SettingForms/Sound/SoundSettingsCard.tsx
 create mode 100644 src/components/SettingForms/Sound/SoundSettingsFields.tsx
 create mode 100644 src/components/SettingForms/Sound/SoundUpload.tsx
 create mode 100644 src/components/SettingForms/Sound/SoundUploadCard.tsx

diff --git a/src/components/SettingForms/Sound/SoundSettingsCard.tsx b/src/components/SettingForms/Sound/SoundSettingsCard.tsx
new file mode 100644
index 0000000..e2b904c
--- /dev/null
+++ b/src/components/SettingForms/Sound/SoundSettingsCard.tsx
@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import SoundSettingsFields from "./SoundSettingsFields";
+
+const SoundSettingsCard = () => {
+  return (
+    <Card className="p-4">
+      <CardHeader title={"Sound Settings"} />
+      <SoundSettingsFields />
+    </Card>
+  );
+};
+
+export default SoundSettingsCard;
diff --git a/src/components/SettingForms/Sound/SoundSettingsFields.tsx b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
new file mode 100644
index 0000000..18a84c9
--- /dev/null
+++ b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
@@ -0,0 +1,127 @@
+import { Field, FieldArray, Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { FormValues, Hotlist } from "../../../types/types";
+
+const SoundSettingsFields = () => {
+  const hotlists: Hotlist[] = [
+    { name: "hotlist0", sound: "" },
+    { name: "hotlist1", sound: "" },
+    { name: "hotlist2", sound: "" },
+  ];
+
+  const soundOptions = [
+    {
+      value: "switch",
+      label: "Switch (Default)",
+    },
+    {
+      value: "notification",
+      label: "Notification",
+    },
+    {
+      value: "popup",
+      label: "popup",
+    },
+  ];
+
+  const initialValues: FormValues = {
+    sightingSound: "switch",
+    NPEDsound: "popup",
+    hotlists,
+  };
+
+  const handleSubmit = (values: FormValues) => {
+    console.log(values);
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {({ values }) => (
+        <Form className="flex flex-col space-y-3">
+          <FormGroup>
+            <label htmlFor="sightingSound">Sighting Sound</label>
+            <Field
+              as="select"
+              name="sightingSound"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
+            >
+              {soundOptions.map(({ value, label }) => {
+                return (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                );
+              })}
+            </Field>
+          </FormGroup>
+          <FormGroup>
+            <label htmlFor="NPEDsound">NPED notification Sound</label>
+            <Field
+              as="select"
+              name="NPEDsound"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
+            >
+              {soundOptions.map(({ value, label }) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </Field>
+          </FormGroup>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
+
+            <FormGroup>
+              <FieldArray
+                name="hotlists"
+                render={() => (
+                  <div>
+                    {values.hotlists.length > 0 ? (
+                      values.hotlists.map((hotlist, index) => (
+                        <div
+                          key={hotlist.name}
+                          className="flex items-center gap-3"
+                        >
+                          <label
+                            htmlFor={`hotlists.${index}.sound`}
+                            className="w-32 shrink-0"
+                          >
+                            {hotlist.name}
+                          </label>
+                          <Field
+                            as="select"
+                            name={`hotlists.${index}.sound`}
+                            id={`hotlists.${index}.sound`}
+                            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
+                          >
+                            {soundOptions.map(({ value, label }) => (
+                              <option key={value} value={value}>
+                                {label}
+                              </option>
+                            ))}
+                          </Field>
+                        </div>
+                      ))
+                    ) : (
+                      <>No hotlists yet, Add one</>
+                    )}
+                  </div>
+                )}
+              />
+            </FormGroup>
+          </div>
+
+          <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"
+          >
+            Save Settings
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SoundSettingsFields;
diff --git a/src/components/SettingForms/Sound/SoundUpload.tsx b/src/components/SettingForms/Sound/SoundUpload.tsx
new file mode 100644
index 0000000..46dc654
--- /dev/null
+++ b/src/components/SettingForms/Sound/SoundUpload.tsx
@@ -0,0 +1,45 @@
+import { Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { SoundUploadValue } from "../../../types/types";
+
+const SoundUpload = () => {
+  const initialValues: SoundUploadValue = {
+    soundFile: null,
+  };
+
+  const handleSubmit = (values: SoundUploadValue) => {
+    console.log(values);
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {({ setFieldValue }) => (
+        <Form>
+          <FormGroup>
+            <label htmlFor="soundFile">Sighting Sound</label>
+            <input
+              type="file"
+              name="soundFile"
+              id="sightingSoundinput"
+              onChange={(e) => {
+                if (
+                  e.target.files &&
+                  e.target.files[0].type.lastIndexOf(".mp3")
+                )
+                  setFieldValue("sightingSound", e.target.files[0]);
+              }}
+            />
+          </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"
+          >
+            Upload
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SoundUpload;
diff --git a/src/components/SettingForms/Sound/SoundUploadCard.tsx b/src/components/SettingForms/Sound/SoundUploadCard.tsx
new file mode 100644
index 0000000..e751959
--- /dev/null
+++ b/src/components/SettingForms/Sound/SoundUploadCard.tsx
@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import SoundUpload from "./SoundUpload";
+
+const SoundUploadCard = () => {
+  return (
+    <Card className="p-4">
+      <CardHeader title={"Sound upload"} />
+      <SoundUpload />
+    </Card>
+  );
+};
+
+export default SoundUploadCard;
diff --git a/src/pages/SystemSettings.tsx b/src/pages/SystemSettings.tsx
index ec6d4bd..138070c 100644
--- a/src/pages/SystemSettings.tsx
+++ b/src/pages/SystemSettings.tsx
@@ -8,6 +8,8 @@ import ModemCard from "../components/SettingForms/WiFi&Modem/ModemCard";
 import SystemCard from "../components/SettingForms/System/SystemCard";
 import { Toaster } from "sonner";
 import { useNPEDAuth } from "../hooks/useNPEDAuth";
+import SoundSettingsCard from "../components/SettingForms/Sound/SoundSettingsCard";
+import SoundUploadCard from "../components/SettingForms/Sound/SoundUploadCard";
 
 const SystemSettings = () => {
   useNPEDAuth();
@@ -20,6 +22,7 @@ const SystemSettings = () => {
           <Tab>Output</Tab>
           <Tab>Integrations</Tab>
           <Tab>WiFi and Modem</Tab>
+          <Tab>Sound</Tab>
         </TabList>
         <TabPanel>
           <div className="flex flex-col space-y-3">
@@ -43,6 +46,12 @@ const SystemSettings = () => {
             <ModemCard />
           </div>
         </TabPanel>
+        <TabPanel>
+          <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full">
+            <SoundSettingsCard />
+            <SoundUploadCard />
+          </div>
+        </TabPanel>
       </Tabs>
       <Toaster />
     </div>
diff --git a/src/types/types.ts b/src/types/types.ts
index e70d706..2034252 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -261,3 +261,20 @@ export type ZoomLevel = {
   py: number;
   level?: number;
 };
+
+export type SoundValue = string;
+
+export type Hotlist = {
+  name: string;
+  sound: SoundValue;
+};
+
+export type FormValues = {
+  sightingSound: SoundValue;
+  NPEDsound: SoundValue;
+  hotlists: Hotlist[];
+};
+
+export type SoundUploadValue = {
+  soundFile: File | null;
+};