diff --git a/src/app/component/BrokerManagement.jsx b/src/app/component/BrokerManagement.jsx
index b68f4dd..a1a16a9 100644
--- a/src/app/component/BrokerManagement.jsx
+++ b/src/app/component/BrokerManagement.jsx
@@ -1,614 +1,7 @@
-// "use client";
-// import Image from "next/image";
-// import logo from "../assets/images.png"
-// import React, { useState, useEffect } from 'react';
-// const getStatusIcon = (status) => {
-//   switch (status) {
-//     case 'active':
-//       return <span className="text-green-500">●</span>;
-//     case 'inactive':
-//       return <span className="text-red-500">●</span>;
-//     case 'expired':
-//       return <span className="text-orange-500">●</span>;
-//     default:
-//       return <span>●</span>;
-//   }
-// };
-// const ToggleSwitch = ({ checked, onChange }) => (
-//   <label className="relative inline-block cursor-pointer">
-//     <input
-//       type="checkbox"
-//       checked={checked}
-//       onChange={onChange}
-//       className="opacity-0 absolute w-full h-full"
-//     />
-//     <span
-//       className={`block w-10 h-5 rounded-full transition-colors duration-300 ${
-//         checked ? 'bg-green-500' : 'bg-gray-300'
-//       }`}
-//     >
-//       <span
-//         className={`block w-4 h-4 rounded-full bg-white absolute top-0.5 transition-all duration-300 ${
-//           checked ? 'left-5' : 'left-0.5'
-//         }`}
-//       ></span>
-//     </span>
-//   </label>
-// );
-// const SlidePanel = ({ isOpen, onClose, title, children, width = "w-96" }) => (
-//   <>
-
-//     {isOpen && (
-//       <div
-//         className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
-//         onClick={onClose}
-//       />
-//     )}
-
-//     <div
-//       className={`fixed top-0 right-0 h-full ${width} bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out ${
-//         isOpen ? 'translate-x-0' : 'translate-x-full'
-//       }`}
-//     >
-//       <div className="flex flex-col h-full">
-
-//         <div className="flex items-center justify-between p-6 border-b">
-//           <h2 className="text-xl font-semibold">{title}</h2>
-//           <button
-//             onClick={onClose}
-//             className="text-gray-400 hover:text-gray-600 text-2xl"
-//           >
-//             ×
-//           </button>
-//         </div>
-        
-//         <div className="flex-1 overflow-y-auto p-6">
-//           {children}
-//         </div>
-//       </div>
-//     </div>
-//   </>
-// );
-// const BrokerManagement = () => {
-//   const [activeMainTab, setActiveMainTab] = useState('Brokers');
-//   const [activeSubTab, setActiveSubTab] = useState('API Management');
-//   const [filterStatus, setFilterStatus] = useState('All');
-//   const [searchTerm, setSearchTerm] = useState('');
-//   const [isPanelOpen, setIsPanelOpen] = useState(false);
-//   const [editingBroker, setEditingBroker] = useState(null);
-//   const [showAddPanel, setShowAddPanel] = useState(false);
-//   const [showEditPanel, setShowEditPanel] = useState(false);
-//   const [formData, setFormData] = useState({
-//     name: '',
-//     apiId: '',
-//     broker: '',
-//     dateAdded: '',
-//     status: 'active',
-//     balance: '',
-//     onOff: true,
-//     secretKey: ''
-//   });
-//   const [brokers, setBrokers] = useState([
-//     { id: 1, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', dateAdded: 'Feb 14, 2025', status: 'active', balance: '$150.25', onOff: true, secretKey: 'sk-41ZBkLjY...' },
-//     { id: 2, name: 'Tradeweb Markets', apiId: '89245', broker: 'Angel One', dateAdded: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', onOff: true, secretKey: 'sk-98AbcDeF...' },
-//     { id: 3, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', dateAdded: 'Feb 14, 2025', status: 'active', balance: '$150.25', onOff: false, secretKey: 'sk-34GhIjKl...' },
-//     { id: 4, name: 'Tradeweb Markets', apiId: '89245', broker: 'Zerodha', dateAdded: 'Mar 01, 2025', status: 'expired', balance: '$175.50', onOff: true, secretKey: 'sk-56MnOpQr...' },
-//     { id: 5, name: 'MarketAxess', apiId: '88234', broker: 'Dhan', dateAdded: 'Feb 14, 2025', status: 'active', balance: '$150.25', onOff: true, secretKey: 'sk-78RsTuVw...' },
-//     { id: 6, name: 'Tradeweb Markets', apiId: '89245', broker: 'Angel One', dateAdded: 'Mar 01, 2025', status: 'expired', balance: '$175.50', onOff: true, secretKey: 'sk-12XyZaBc...' },
-//     { id: 7, name: 'MarketAxess', apiId: '88234', broker: 'Dhan', dateAdded: 'Feb 14, 2025', status: 'active', balance: '$150.25', onOff: false, secretKey: 'sk-34DefGhi...' },
-//     { id: 8, name: 'Tradeweb Markets', apiId: '89245', broker: 'Angel One', dateAdded: 'Mar 01, 2025', status: 'expired', balance: '$175.50', onOff: true, secretKey: 'sk-56JklMno...' },
-//     { id: 9, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', dateAdded: 'Feb 14, 2025', status: 'active', balance: '$150.25', onOff: true, secretKey: 'sk-78PqrStu...' },
-//     { id: 10, name: 'Tradeweb Markets', apiId: '89245', broker: 'Dhan', dateAdded: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', onOff: true, secretKey: 'sk-98VwxYza...' },
-//   ]);
-//   const handleAddBroker = () => {
-//     setEditingBroker(null);
-//     setFormData({
-//       name: '',
-//       apiId: '',
-//       broker: '',
-//       dateAdded: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
-//       status: 'active',
-//       balance: '$0.00',
-//       onOff: true,
-//       secretKey: ''
-//     });
-//     setIsPanelOpen(true);
-//     setShowAddPanel(true);
-//     setShowEditPanel(false);
-//   };
-//   const handleEditBroker = (broker) => {
-//     setEditingBroker(broker);
-//     setFormData({ ...broker });
-//     setIsPanelOpen(true);
-//     setShowAddPanel(false);
-//     setShowEditPanel(true);
-//   };
-//   const handleDeleteBroker = (id) => {
-//     if (window.confirm('Are you sure you want to delete this broker?')) {
-//       setBrokers(brokers.filter(b => b.id !== id));
-//     }
-//   };
-//   const handleSaveBroker = () => {
-//     if (!formData.name || !formData.apiId || !formData.broker) {
-//       alert('Please fill in all required fields');
-//       return;
-//     }
-
-//     if (editingBroker) {
-//       setBrokers(brokers.map(b => b.id === editingBroker.id ? { ...formData, id: editingBroker.id } : b));
-//     } else {
-//       const newBroker = {
-//         ...formData,
-//         id: Math.max(...brokers.map(b => b.id)) + 1
-//       };
-//       setBrokers([...brokers, newBroker]);
-//     }
-//     setIsPanelOpen(false);
-//     setShowAddPanel(false);
-//     setShowEditPanel(false);
-//   };
-
-//   const handleToggle = (id) => {
-//     const updated=brokers.map(b => 
-//       b.id === id ? { ...b, onOff: !b.onOff } : b
-//     )
-//     setBrokers(updated);
-//   };
-
-//   const filteredBrokers = brokers.filter(broker => {
-//     const matchesSearch = broker.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-//                          broker.broker.toLowerCase().includes(searchTerm.toLowerCase()) ||
-//                          broker.apiId.includes(searchTerm);
-    
-//     const matchesStatus = filterStatus === 'All' || broker.status.toLowerCase() === filterStatus.toLowerCase();
-    
-//     return matchesSearch && matchesStatus;
-//   });
-
-//   const groupedBrokers = filteredBrokers.reduce((acc, broker) => {
-//     const key = `${broker.status}-${broker.onOff ? 'on' : 'off'}`;
-//     if (!acc[key]) acc[key] = [];
-//     acc[key].push(broker);
-//     return acc;
-//   }, {});
-
-//   const mainTabs = ['Dashboard', 'Brokers', 'Scan & Trade', 'Positions', 'AI Strategy Builder'];
-//   const subTabs = ['API Management', 'Risk Management', 'Hook Hub'];
-//   const statusFilters = ['All', 'Active', 'Inactive', 'Expired'];
-
-//   return (
-    // <div className="min-h-screen bg-gray-100 p-5 font-sans">
-    //   <div className="flex justify-between items-center mb-5">
-    //     <div className="flex items-center gap-8">
-    //       <div className="w-16 h-16 rounded-lg flex items-center justify-center text-white font-bold text-xl">
-    //         <Image src={logo} height={100} width={100}/>
-    //       </div>
-    //       <div className="flex gap-6">
-    //         {mainTabs.map(tab => (
-    //           <button 
-    //             key={tab} 
-    //             onClick={() => setActiveMainTab(tab)}
-    //             className={`pb-2 transition-all ${
-    //               activeMainTab === tab 
-    //                 ? 'text-blue-600 font-semibold border-b-2 border-blue-600' 
-    //                 : 'text-gray-600 hover:text-gray-900'
-    //             }`}
-    //           >
-    //             {tab}
-    //           </button>
-    //         ))}
-    //       </div>
-    //     </div>
-    //     <div className="flex gap-4 items-center">
-    //       <button className="text-gray-600 hover:text-gray-900 text-xl">📞</button>
-    //       <button className="text-gray-600 hover:text-gray-900 text-xl">🔔</button>
-    //       <div className="flex items-center gap-2">
-    //         <span className="text-sm">NSE</span>
-    //         <select className="px-2 py-1 border rounded">
-    //           <option>✓</option>
-    //         </select>
-    //       </div>
-    //       <button className="text-gray-600 hover:text-gray-900 text-xl">👤</button>
-    //     </div>
-    //   </div>
-
-//       <div className="flex justify-between items-center mb-5">
-//         <h3 className="text-xl font-semibold m-0">Brokers / API Management</h3>
-//         <div className="flex gap-6">
-//           {subTabs.map(tab => (
-//             <button 
-//               key={tab} 
-//               onClick={() => setActiveSubTab(tab)}
-//               className={`pb-2 transition-all ${
-//                 activeSubTab === tab 
-//                   ? 'text-blue-600 font-semibold border-b-2 border-blue-600' 
-//                   : 'text-gray-600 hover:text-gray-900'
-//               }`}
-//             >
-//               {tab}
-//             </button>
-//           ))}
-//         </div>
-//       </div>
-
-//       <div className="flex justify-between mb-5">
-//         <div className="flex gap-3">
-//           <input 
-//             type="text" 
-//             placeholder="Search" 
-//             value={searchTerm}
-//             onChange={(e) => setSearchTerm(e.target.value)}
-//             className="px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-//           />
-//           <button className="px-4 py-2 rounded border border-gray-300 bg-white hover:bg-gray-50">
-//             Filters ▼
-//           </button>
-//         </div>
-//         <div className="flex gap-3">
-//           {statusFilters.map(status => (
-//             <button 
-//               key={status} 
-//               onClick={() => setFilterStatus(status)}
-//               className={`px-4 py-2 rounded border transition-colors ${
-//                 filterStatus === status 
-//                   ? 'bg-blue-100 border-blue-500 text-blue-700' 
-//                   : 'bg-white border-gray-300 hover:bg-gray-50'
-//               }`}
-//             >
-//               {status}
-//             </button>
-//           ))}
-//           <button className="px-4 py-2 rounded border border-gray-300 bg-white hover:bg-gray-50">
-//             Export CSV
-//           </button>
-//           <button 
-//             onClick={handleAddBroker}
-//             className="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors"
-//           >
-//             Add Broker +
-//           </button>
-//         </div>
-//       </div>
-
-//       <div className="overflow-x-auto">
-//         <table className="w-full bg-white rounded-lg shadow">
-//           <thead>
-//             <tr className="bg-gray-50 border-b">
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Name</th>
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">API ID</th>
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Broker</th>
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Date Added</th>
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Status</th>
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Balance</th>
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Action</th>
-//               <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">On/Off</th>
-//             </tr>
-//           </thead>
-//           <tbody>
-//             {Object.entries(groupedBrokers).map(([groupKey, groupBrokers]) => (
-//               <React.Fragment key={groupKey}>
-//                 {filterStatus !== 'All' && (
-//                   <tr className="bg-gray-100">
-//                     <td colSpan="8" className="px-4 py-2 text-sm font-semibold text-gray-600">
-//                       {groupKey.split('-')[0].charAt(0).toUpperCase() + groupKey.split('-')[0].slice(1)} - {groupKey.split('-')[1].toUpperCase()}
-//                     </td>
-//                   </tr>
-//                 )}
-//                 {groupBrokers
-//                 .sort((a,b)=> a.id - b.id )
-//                 .map(broker => (
-//                   <tr key={broker.id} className="border-b hover:bg-gray-50 transition-colors">
-//                     <td className="px-4 py-3 text-sm">{broker.name}</td>
-//                     <td className="px-4 py-3 text-sm">{broker.apiId}</td>
-//                     <td className="px-4 py-3 text-sm">{broker.broker}</td>
-//                     <td className="px-4 py-3 text-sm">{broker.dateAdded}</td>
-//                     <td className="px-4 py-3 text-sm">{getStatusIcon(broker.status)}</td>
-//                     <td className="px-4 py-3 text-sm">{broker.balance}</td>
-//                     <td className="px-4 py-3 text-sm">
-//                       <div className="flex gap-3">
-//                         <button className="hover:scale-110 transition-transform">📋</button>
-//                         <button 
-//                           onClick={() => handleEditBroker(broker)}
-//                           className="hover:scale-110 transition-transform"
-//                         >
-//                           ✏️
-//                         </button>
-//                         <button 
-//                           onClick={() => handleDeleteBroker(broker.id)}
-//                           className="hover:scale-110 transition-transform"
-//                         >
-//                           🗑️
-//                         </button>
-//                       </div>
-//                     </td>
-//                     <td className="px-4 py-3 text-sm">
-//                       <ToggleSwitch 
-//                         checked={broker.onOff} 
-//                         onChange={() => handleToggle(broker.id)}
-//                       />
-//                     </td>
-//                   </tr>
-//                 ))}
-//               </React.Fragment>
-//             ))}
-//           </tbody>
-//         </table>
-//       </div>
-
-//       <div className="flex justify-between mt-5 text-xs text-gray-600">
-//         <div>Last Synced: May 26, 2025 12:30</div>
-//         <div className="flex gap-2">
-//           <button className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">1</button>
-//           <button className="px-3 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">2</button>
-//           <button className="px-3 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">▶</button>
-//         </div>
-//       </div>
-
-//       <SlidePanel
-//         isOpen={isPanelOpen && showAddPanel}
-//         onClose={() => {
-//           setIsPanelOpen(false);
-//           setShowAddPanel(false);
-//         }}
-//         title="Add Broker"
-//         width="w-96"
-//       >
-//         <div className="space-y-4">
-//           <div>
-//             <label className="block text-sm font-medium text-gray-700 mb-2">
-//               Name *
-//             </label>
-//             <input
-//               type="text"
-//               value={formData.name}
-//               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-//               placeholder="Enter a Name"
-//               className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//             />
-//           </div>
-
-//           <div>
-//             <label className="block text-sm font-medium text-gray-700 mb-2">
-//               Select Broker *
-//             </label>
-//             <select
-//               value={formData.broker}
-//               onChange={(e) => setFormData({ ...formData, broker: e.target.value })}
-//               className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//             >
-//               <option value="">Select Broker</option>
-//               <option value="Meta5">Meta5</option>
-//               <option value="Angel One">Angel One</option>
-//               <option value="Zerodha">Zerodha</option>
-//               <option value="Dhan">Dhan</option>
-//             </select>
-//           </div>
-
-//           <div className="border-t pt-4">
-//             <div className="flex justify-between items-center mb-2">
-//               <h3 className="text-sm font-medium text-gray-700">API Details</h3>
-//               <button className="text-xs text-blue-600 hover:text-blue-700">
-//                 Help me connect to the API
-//               </button>
-//             </div>
-
-//             <div className="space-y-4">
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   API Key *
-//                 </label>
-//                 <input
-//                   type="text"
-//                   value={formData.apiId}
-//                   onChange={(e) => setFormData({ ...formData, apiId: e.target.value })}
-//                   placeholder="api_key_1234567890abcdefABCDE"
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 />
-//                 <p className="text-xs text-gray-500 mt-1">Date Created: {formData.dateAdded}</p>
-//               </div>
-
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   Secret API Key
-//                 </label>
-//                 <input
-//                   type="text"
-//                   value={formData.secretKey}
-//                   onChange={(e) => setFormData({ ...formData, secretKey: e.target.value })}
-//                   placeholder="sk-41ZBkLjY..."
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 />
-//               </div>
-
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   Balance
-//                 </label>
-//                 <input
-//                   type="text"
-//                   value={formData.balance}
-//                   onChange={(e) => setFormData({ ...formData, balance: e.target.value })}
-//                   placeholder="$0.00"
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 />
-//               </div>
-
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   Status
-//                 </label>
-//                 <select
-//                   value={formData.status}
-//                   onChange={(e) => setFormData({ ...formData, status: e.target.value })}
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 >
-//                   <option value="active">Active</option>
-//                   <option value="inactive">Inactive</option>
-//                   <option value="expired">Expired</option>
-//                 </select>
-//               </div>
-//             </div>
-//           </div>
-
-//           <div className="flex gap-3 pt-4">
-//             <button
-//               onClick={() => {
-//                 setIsPanelOpen(false);
-//                 setShowAddPanel(false);
-//               }}
-//               className="flex-1 px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
-//             >
-//               Cancel
-//             </button>
-//             <button
-//               onClick={handleSaveBroker}
-//               className="flex-1 px-4 py-2 bg-teal-500 text-white rounded hover:bg-teal-600 transition-colors"
-//             >
-//               Add
-//             </button>
-//           </div>
-//         </div>
-//       </SlidePanel>
-
-//       <SlidePanel
-//         isOpen={isPanelOpen && showEditPanel}
-//         onClose={() => {
-//           setIsPanelOpen(false);
-//           setShowEditPanel(false);
-//         }}
-//         title="Edit Broker"
-//         width="w-96"
-//       >
-//         <div className="space-y-4">
-//           <div>
-//             <label className="block text-sm font-medium text-gray-700 mb-2">
-//               Name *
-//             </label>
-//             <input
-//               type="text"
-//               value={formData.name}
-//               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-//               placeholder="Enter a Name"
-//               className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//             />
-//           </div>
-
-//           <div>
-//             <label className="block text-sm font-medium text-gray-700 mb-2">
-//               Select Broker *
-//             </label>
-//             <select
-//               value={formData.broker}
-//               onChange={(e) => setFormData({ ...formData, broker: e.target.value })}
-//               className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//             >
-//               <option value="">Select Broker</option>
-//               <option value="Meta5">Meta5</option>
-//               <option value="Angel One">Angel One</option>
-//               <option value="Zerodha">Zerodha</option>
-//               <option value="Dhan">Dhan</option>
-//             </select>
-//           </div>
-
-//           <div className="border-t pt-4">
-//             <div className="flex justify-between items-center mb-2">
-//               <h3 className="text-sm font-medium text-gray-700">API Details</h3>
-//               <button className="text-xs text-blue-600 hover:text-blue-700">
-//                 Help me connect to the API
-//               </button>
-//             </div>
-
-//             <div className="space-y-4">
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   API Key *
-//                 </label>
-//                 <input
-//                   type="text"
-//                   value={formData.apiId}
-//                   onChange={(e) => setFormData({ ...formData, apiId: e.target.value })}
-//                   placeholder="api_key_1234567890abcdefABCDE"
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 />
-//                 <p className="text-xs text-gray-500 mt-1">Date Modified: {formData.dateAdded}</p>
-//               </div>
-
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   Secret API Key
-//                 </label>
-//                 <input
-//                   type="text"
-//                   value={formData.secretKey}
-//                   onChange={(e) => setFormData({ ...formData, secretKey: e.target.value })}
-//                   placeholder="sk-41ZBkLjY..."
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 />
-//               </div>
-
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   Balance
-//                 </label>
-//                 <input
-//                   type="text"
-//                   value={formData.balance}
-//                   onChange={(e) => setFormData({ ...formData, balance: e.target.value })}
-//                   placeholder="$0.00"
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 />
-//               </div>
-
-//               <div>
-//                 <label className="block text-sm font-medium text-gray-700 mb-2">
-//                   Status
-//                 </label>
-//                 <select
-//                   value={formData.status}
-//                   onChange={(e) => setFormData({ ...formData, status: e.target.value })}
-//                   className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-//                 >
-//                   <option value="active">Active</option>
-//                   <option value="inactive">Inactive</option>
-//                   <option value="expired">Expired</option>
-//                 </select>
-//               </div>
-//             </div>
-//           </div>
-
-//           <div className="flex gap-3 pt-4">
-//             <button
-//               onClick={() => {
-//                 setIsPanelOpen(false);
-//                 setShowEditPanel(false);
-//               }}
-//               className="flex-1 px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
-//             >
-//               Cancel
-//             </button>
-//             <button
-//               onClick={handleSaveBroker}
-//               className="flex-1 px-4 py-2 bg-teal-500 text-white rounded hover:bg-teal-600 transition-colors"
-//             >
-//               Save
-//             </button>
-//           </div>
-//         </div>
-//       </SlidePanel>
-//     </div>
-//   );
-// };
-
-// export default BrokerManagement;
-
-
-
 "use client";
 import Image from 'next/image';
 import logo from "../assets/images.png"
-
 import React, { useState, useEffect } from 'react';
-
 const getStatusIcon = (status) => {
   switch (status) {
     case 'active':
@@ -621,7 +14,6 @@ const getStatusIcon = (status) => {
       return <span>●</span>;
   }
 };
-
 const ToggleSwitch = ({ checked, onChange }) => (
   <label className="relative inline-block cursor-pointer">
     <input
@@ -652,7 +44,6 @@ const SlidePanel = ({ isOpen, onClose, title, children, width = "w-96" }) => (
         onClick={onClose}
       />
     )}
-
     <div
       className={`fixed top-0 right-0 h-full ${width} bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out ${
         isOpen ? 'translate-x-0' : 'translate-x-full'
@@ -667,8 +58,7 @@ const SlidePanel = ({ isOpen, onClose, title, children, width = "w-96" }) => (
           >
             ×
           </button>
-        </div>
-        
+        </div>     
         <div className="flex-1 overflow-y-auto p-6">
           {children}
         </div>
@@ -676,7 +66,6 @@ const SlidePanel = ({ isOpen, onClose, title, children, width = "w-96" }) => (
     </div>
   </>
 );
-
 const BrokerManagement = () => {
   const [activeMainTab, setActiveMainTab] = useState('Brokers');
   const [activeSubTab, setActiveSubTab] = useState('API Management');
@@ -696,7 +85,6 @@ const BrokerManagement = () => {
     onOff: true,
     secretKey: ''
   });
-  
   const [brokers, setBrokers] = useState([
     { id: 1, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', dateAdded: 'Feb 14, 2025', status: 'active', balance: '$150.25', onOff: true, secretKey: 'sk-41ZBkLjY...' },
     { id: 2, name: 'Tradeweb Markets', apiId: '89245', broker: 'Angel One', dateAdded: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', onOff: true, secretKey: 'sk-98AbcDeF...' },
@@ -709,7 +97,6 @@ const BrokerManagement = () => {
     { id: 9, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', dateAdded: 'Feb 14, 2025', status: 'active', balance: '$150.25', onOff: true, secretKey: 'sk-78PqrStu...' },
     { id: 10, name: 'Tradeweb Markets', apiId: '89245', broker: 'Dhan', dateAdded: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', onOff: true, secretKey: 'sk-98VwxYza...' },
   ]);
-
   const handleAddBroker = () => {
     setEditingBroker(null);
     setFormData({
@@ -726,7 +113,6 @@ const BrokerManagement = () => {
     setShowAddPanel(true);
     setShowEditPanel(false);
   };
-
   const handleEditBroker = (broker) => {
     setEditingBroker(broker);
     setFormData({ ...broker });
@@ -734,19 +120,16 @@ const BrokerManagement = () => {
     setShowAddPanel(false);
     setShowEditPanel(true);
   };
-
   const handleDeleteBroker = (id) => {
     if (window.confirm('Are you sure you want to delete this broker?')) {
       setBrokers(brokers.filter(b => b.id !== id));
     }
   };
-
   const handleSaveBroker = () => {
     if (!formData.name || !formData.apiId || !formData.broker) {
       alert('Please fill in all required fields');
       return;
     }
-
     if (editingBroker) {
       setBrokers(brokers.map(b => b.id === editingBroker.id ? { ...formData, id: editingBroker.id } : b));
     } else {
@@ -760,35 +143,28 @@ const BrokerManagement = () => {
     setShowAddPanel(false);
     setShowEditPanel(false);
   };
-
   const handleToggle = (id) => {
     const updated = brokers.map(b => 
       b.id === id ? { ...b, onOff: !b.onOff } : b
     );
     setBrokers(updated);
   };
-
   const filteredBrokers = brokers.filter(broker => {
     const matchesSearch = broker.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                          broker.broker.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         broker.apiId.includes(searchTerm);
-    
-    const matchesStatus = filterStatus === 'All' || broker.status.toLowerCase() === filterStatus.toLowerCase();
-    
+                         broker.apiId.includes(searchTerm);   
+    const matchesStatus = filterStatus === 'All' || broker.status.toLowerCase() === filterStatus.toLowerCase();   
     return matchesSearch && matchesStatus;
   });
-
   const groupedBrokers = filteredBrokers.reduce((acc, broker) => {
     const key = `${broker.status}-${broker.onOff ? 'on' : 'off'}`;
     if (!acc[key]) acc[key] = [];
     acc[key].push(broker);
     return acc;
   }, {});
-
   const mainTabs = ['Dashboard', 'Brokers', 'Scan & Trade', 'Positions', 'AI Strategy Builder'];
   const subTabs = ['API Management', 'Risk Management', 'Hook Hub'];
   const statusFilters = ['All', 'Active', 'Inactive', 'Expired'];
-
   return (
     <>
       <style>{`
@@ -797,8 +173,7 @@ const BrokerManagement = () => {
         * {
           font-family: 'Be Vietnam Pro', sans-serif;
         }
-      `}</style>
-      
+      `}</style>     
       <div className="min-h-screen bg-gray-100 p-5">
         <div className="flex justify-between items-center mb-5">
           <div className="flex items-center gap-8">
@@ -833,7 +208,6 @@ const BrokerManagement = () => {
             <button className="text-gray-600 hover:text-gray-900 text-xl">👤</button>
           </div>
         </div>
-
         <div className="flex justify-between items-center mb-5">
           <h3 className="text-xl font-semibold m-0">Brokers / API Management</h3>
           <div className="flex gap-6">
@@ -852,7 +226,6 @@ const BrokerManagement = () => {
             ))}
           </div>
         </div>
-
         <div className="flex justify-between mb-5">
           <div className="flex gap-3">
             <input 
@@ -891,7 +264,6 @@ const BrokerManagement = () => {
             </button>
           </div>
         </div>
-
         <div className="overflow-x-auto">
           <table className="w-full bg-white rounded-lg shadow">
             <thead>
@@ -956,7 +328,6 @@ const BrokerManagement = () => {
             </tbody>
           </table>
         </div>
-
         <div className="flex justify-between mt-5 text-xs text-gray-600">
           <div>Last Synced: May 26, 2025 12:30</div>
           <div className="flex gap-2">
@@ -965,7 +336,6 @@ const BrokerManagement = () => {
             <button className="px-3 py-1 bg-white border border-gray-300 rounded hover:bg-gray-50">▶</button>
           </div>
         </div>
-
         <SlidePanel
           isOpen={isPanelOpen && showAddPanel}
           onClose={() => {
@@ -988,7 +358,6 @@ const BrokerManagement = () => {
                 className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
               />
             </div>
-
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-2">
                 Select Broker *
@@ -1005,7 +374,6 @@ const BrokerManagement = () => {
                 <option value="Dhan">Dhan</option>
               </select>
             </div>
-
             <div className="border-t pt-4">
               <div className="flex justify-between items-center mb-2">
                 <h3 className="text-sm font-medium text-gray-700">API Details</h3>
@@ -1028,7 +396,6 @@ const BrokerManagement = () => {
                   />
                   <p className="text-xs text-gray-500 mt-1">Date Created: {formData.dateAdded}</p>
                 </div>
-
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     Secret API Key
@@ -1041,7 +408,6 @@ const BrokerManagement = () => {
                     className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
-
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     Balance
@@ -1054,7 +420,6 @@ const BrokerManagement = () => {
                     className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
-
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     Status
@@ -1091,7 +456,6 @@ const BrokerManagement = () => {
             </div>
           </div>
         </SlidePanel>
-
         <SlidePanel
           isOpen={isPanelOpen && showEditPanel}
           onClose={() => {
@@ -1114,7 +478,6 @@ const BrokerManagement = () => {
                 className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
               />
             </div>
-
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-2">
                 Select Broker *
@@ -1131,7 +494,6 @@ const BrokerManagement = () => {
                 <option value="Dhan">Dhan</option>
               </select>
             </div>
-
             <div className="border-t pt-4">
               <div className="flex justify-between items-center mb-2">
                 <h3 className="text-sm font-medium text-gray-700">API Details</h3>
@@ -1139,7 +501,6 @@ const BrokerManagement = () => {
                   Help me connect to the API
                 </button>
               </div>
-
               <div className="space-y-4">
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
@@ -1154,7 +515,6 @@ const BrokerManagement = () => {
                   />
                   <p className="text-xs text-gray-500 mt-1">Date Modified: {formData.dateAdded}</p>
                 </div>
-
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     Secret API Key
@@ -1167,7 +527,6 @@ const BrokerManagement = () => {
                     className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
-
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     Balance
@@ -1180,7 +539,6 @@ const BrokerManagement = () => {
                     className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
-
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     Status
@@ -1197,7 +555,6 @@ const BrokerManagement = () => {
                 </div>
               </div>
             </div>
-
             <div className="flex gap-3 pt-4">
               <button
                 onClick={() => {
@@ -1221,5 +578,4 @@ const BrokerManagement = () => {
     </>
   );
 };
-
 export default BrokerManagement;
\ No newline at end of file