From a563a3c34173f95a47daa873dfc3b6fa532086d5 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 8 Dec 2025 12:50:14 +0000
Subject: [PATCH] - need endpoint for include and exclude

---
 src/features/output/components/OSDFields.tsx      |  1 -
 src/features/output/components/OSDOptionsCard.tsx | 15 ++++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/features/output/components/OSDFields.tsx b/src/features/output/components/OSDFields.tsx
index 56e2954..c79a704 100644
--- a/src/features/output/components/OSDFields.tsx
+++ b/src/features/output/components/OSDFields.tsx
@@ -29,7 +29,6 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
     <div>
       <div className="flex flex-col space-y-4">
         <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
-          <h2 className="text-2xl mb-4">OSD Options</h2>
           <div className="flex flex-col space-y-4">
             {includeKeys.map((key) => (
               <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
diff --git a/src/features/output/components/OSDOptionsCard.tsx b/src/features/output/components/OSDOptionsCard.tsx
index 5eb0c61..dc0f924 100644
--- a/src/features/output/components/OSDOptionsCard.tsx
+++ b/src/features/output/components/OSDOptionsCard.tsx
@@ -1,6 +1,8 @@
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import OSDFields from "./OSDFields";
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
 
 type OSDOptionsCardProps = {
   isOSDLoading: boolean;
@@ -10,7 +12,18 @@ const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
   return (
     <Card className="p-4 flex-1">
       <CardHeader title="OSD Payload Options" />
-      <OSDFields isOSDLoading={isOSDLoading} />
+      <Tabs>
+        <TabList>
+          <Tab>OSD Settings</Tab>
+          <Tab>payload Settings</Tab>
+        </TabList>
+        <TabPanel>
+          <OSDFields isOSDLoading={isOSDLoading} />
+        </TabPanel>
+        <TabPanel>
+          <div>payload settings</div>
+        </TabPanel>
+      </Tabs>
     </Card>
   );
 };