added ui for sound settings

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>