updated forms along with addg tabs

src/pages/SystemSettings.tsx

@@ -1,10 +1,27 @@
-import Output from "../components/Output/Output";
+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";
 
 const SystemSettings = () => {
   return (
-    <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">
-      <Output />
-      <Output />
+    <div className="m-4">
+      <Tabs selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none">
+        <TabList>
+          <Tab>Output</Tab>
+          <Tab>Integrations</Tab>
+        </TabList>
+        <TabPanel>
+          <div className="flex flex-col space-y-3">
+            <SettingForms />
+          </div>
+        </TabPanel>
+        <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 />
+          </div>
+        </TabPanel>
+      </Tabs>
     </div>
   );
 };