- added volume setting for sighting hits

src/components/SettingForms/Sound/SoundSettingsCard.tsx

@@ -4,7 +4,7 @@ import SoundSettingsFields from "./SoundSettingsFields";
 
 const SoundSettingsCard = () => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 col-span-5 w-full">
       <CardHeader title={"Sound Settings"} />
       <SoundSettingsFields />
     </Card>

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -4,6 +4,7 @@ import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
 import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { toast } from "sonner";
+import SliderComponent from "../../UI/Slider";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
@@ -40,34 +41,40 @@ const SoundSettingsFields = () => {
       {({ 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={label} value={value}>
-                    {label}
-                  </option>
-                );
-              })}
-            </Field>
+            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+              <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={label} value={value}>
+                      {label}
+                    </option>
+                  );
+                })}
+              </Field>
+              <SliderComponent soundCategory="SIGHTINGVOLUME" />
+            </div>
           </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>
+            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+              <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>
+              <SliderComponent soundCategory="NPEDVOLUME" />
+            </div>
           </FormGroup>
           <div>
             <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>

src/components/SettingForms/Sound/SoundUploadCard.tsx

@@ -4,7 +4,7 @@ import SoundUpload from "./SoundUpload";
 
 const SoundUploadCard = () => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 col-span-3 w-full">
       <CardHeader title={"Sound upload"} />
       <SoundUpload />
     </Card>

src/components/SettingForms/components/FormGroup.tsx

@@ -5,11 +5,7 @@ type FormGroupProps = {
 };
 
 const FormGroup = ({ children }: FormGroupProps) => {
-  return (
-    <div className="flex flex-col md:flex-row md:items-center justify-between relative">
-      {children}
-    </div>
-  );
+  return <div className="flex flex-col md:flex-row md:items-center justify-between relative space-y-2">{children}</div>;
 };
 
 export default FormGroup;

src/components/SightingModal/SightingModal.tsx

@@ -122,7 +122,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                   <p className="text-gray-300">Hotlist</p>
                   <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500">
                     <p className="font-medium text-2xl break-all text-amber-800">
-                      {hotlistName ? hotlistName[0] : "-"}
+                      {hotlistName ? hotlistName[0].replace(/\.csv$/i, "") : "-"}
                     </p>
                   </div>
                 </div>

src/components/UI/Slider.tsx

@@ -0,0 +1,47 @@
+import "rc-slider/assets/index.css";
+import Slider from "rc-slider";
+import { useSoundContext } from "../../context/SoundContext";
+
+const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME" }) => {
+  const { dispatch, state } = useSoundContext();
+  const volume = soundCategory === "SIGHTINGVOLUME" ? state.sightingVolume : state.NPEDsoundVolume;
+
+  const handleChange = (value: number | number[]) => {
+    const number = typeof value === "number" ? value : value[0];
+    dispatch({ type: soundCategory, payload: number });
+  };
+
+  return (
+    <div className="flex flex-row w-full lg:w-[40%] space-x-5">
+      <Slider
+        min={0}
+        max={1}
+        onChange={handleChange}
+        value={volume}
+        step={0.1}
+        styles={{
+          handle: {
+            width: "1.2rem",
+            height: "1.2rem",
+            marginTop: -7,
+            backgroundColor: "#3b82f6",
+            border: "2px solid white",
+            borderRadius: "50%",
+            boxShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
+          },
+          track: {
+            backgroundColor: "#3b82f6",
+            height: 6,
+          },
+          rail: {
+            backgroundColor: "#e5e7eb",
+            height: 6,
+          },
+        }}
+      />
+      <span>{volume * 10}</span>
+    </div>
+  );
+};
+
+export default SliderComponent;