From a1f20c960c6d02ec8e36eb4d321c1fbd0896d8de Mon Sep 17 00:00:00 2001 From: "dheerkatharshini.s" Date: Mon, 6 Oct 2025 11:37:15 +0530 Subject: [PATCH] Added font,Changed bg for sliding modal --- README.md | 36 - dd.txt | 0 src/app/component/BrokerManagement.jsx | 1409 +++++++++++++++++------- src/app/layout.js | 17 +- src/app/page.js | 5 +- 5 files changed, 1025 insertions(+), 442 deletions(-) create mode 100644 dd.txt diff --git a/README.md b/README.md index 66bb426..e69de29 100644 --- a/README.md +++ b/README.md @@ -1,36 +0,0 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/dd.txt b/dd.txt new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/BrokerManagement.jsx b/src/app/component/BrokerManagement.jsx index 26e176a..b68f4dd 100644 --- a/src/app/component/BrokerManagement.jsx +++ b/src/app/component/BrokerManagement.jsx @@ -1,7 +1,614 @@ +// "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 ●; +// case 'inactive': +// return ●; +// case 'expired': +// return ●; +// default: +// return ●; +// } +// }; +// const ToggleSwitch = ({ checked, onChange }) => ( +// +// ); +// const SlidePanel = ({ isOpen, onClose, title, children, width = "w-96" }) => ( +// <> + +// {isOpen && ( +//
+// )} + +//
+//
+ +//
+//

{title}

+// +//
+ +//
+// {children} +//
+//
+//
+// +// ); +// 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 ( + //
+ //
+ //
+ //
+ // + //
+ //
+ // {mainTabs.map(tab => ( + // + // ))} + //
+ //
+ //
+ // + // + //
+ // NSE + // + //
+ // + //
+ //
+ +//
+//

Brokers / API Management

+//
+// {subTabs.map(tab => ( +// +// ))} +//
+//
+ +//
+//
+// setSearchTerm(e.target.value)} +// className="px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" +// /> +// +//
+//
+// {statusFilters.map(status => ( +// +// ))} +// +// +//
+//
+ +//
+// +// +// +// +// +// +// +// +// +// +// +// +// +// +// {Object.entries(groupedBrokers).map(([groupKey, groupBrokers]) => ( +// +// {filterStatus !== 'All' && ( +// +// +// +// )} +// {groupBrokers +// .sort((a,b)=> a.id - b.id ) +// .map(broker => ( +// +// +// +// +// +// +// +// +// +// +// ))} +// +// ))} +// +//
NameAPI IDBrokerDate AddedStatusBalanceActionOn/Off
+// {groupKey.split('-')[0].charAt(0).toUpperCase() + groupKey.split('-')[0].slice(1)} - {groupKey.split('-')[1].toUpperCase()} +//
{broker.name}{broker.apiId}{broker.broker}{broker.dateAdded}{getStatusIcon(broker.status)}{broker.balance} +//
+// +// +// +//
+// 		+// handleToggle(broker.id)} +// /> +//
+//
+ +//
+//
Last Synced: May 26, 2025 12:30
+//
+// +// +// +//
+//
+ +// { +// setIsPanelOpen(false); +// setShowAddPanel(false); +// }} +// title="Add Broker" +// width="w-96" +// > +//
+//
+// +// 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" +// /> +//
+ +//
+// +// +//
+ +//
+//
+//

API Details

+// +//
+ +//
+//
+// +// 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" +// /> +//

Date Created: {formData.dateAdded}

+//
+ +//
+// +// 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" +// /> +//
+ +//
+// +// 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" +// /> +//
+ +//
+// +// +//
+//
+//
+ +//
+// +// +//
+//
+// + +// { +// setIsPanelOpen(false); +// setShowEditPanel(false); +// }} +// title="Edit Broker" +// width="w-96" +// > +//
+//
+// +// 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" +// /> +//
+ +//
+// +// +//
+ +//
+//
+//

API Details

+// +//
+ +//
+//
+// +// 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" +// /> +//

Date Modified: {formData.dateAdded}

+//
+ +//
+// +// 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" +// /> +//
+ +//
+// +// 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" +// /> +//
+ +//
+// +// +//
+//
+//
+ +//
+// +// +//
+//
+// +//
+// ); +// }; + +// export default BrokerManagement; + + + "use client"; -import Image from "next/image"; +import Image from 'next/image'; import logo from "../assets/images.png" + import React, { useState, useEffect } from 'react'; + const getStatusIcon = (status) => { switch (status) { case 'active': @@ -14,6 +621,7 @@ const getStatusIcon = (status) => { return ●; } }; + const ToggleSwitch = ({ checked, onChange }) => ( ); + const SlidePanel = ({ isOpen, onClose, title, children, width = "w-96" }) => ( <> - {isOpen && (
)} @@ -51,7 +659,6 @@ const SlidePanel = ({ isOpen, onClose, title, children, width = "w-96" }) => ( }`} >
-

{title}

); + const BrokerManagement = () => { const [activeMainTab, setActiveMainTab] = useState('Brokers'); const [activeSubTab, setActiveSubTab] = useState('API Management'); @@ -88,6 +696,7 @@ 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...' }, @@ -100,6 +709,7 @@ 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({ @@ -116,6 +726,7 @@ const BrokerManagement = () => { setShowAddPanel(true); setShowEditPanel(false); }; + const handleEditBroker = (broker) => { setEditingBroker(broker); setFormData({ ...broker }); @@ -123,11 +734,13 @@ 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'); @@ -149,9 +762,9 @@ const BrokerManagement = () => { }; const handleToggle = (id) => { - const updated=brokers.map(b => + const updated = brokers.map(b => b.id === id ? { ...b, onOff: !b.onOff } : b - ) + ); setBrokers(updated); }; @@ -177,19 +790,59 @@ const BrokerManagement = () => { const statusFilters = ['All', 'Active', 'Inactive', 'Expired']; return ( -
-
-
-
- + <> + + +
+
+
+
+ LOGO +
+
+ {mainTabs.map(tab => ( + + ))} +
+
+ + +
+ NSE + +
+ +
+
+ +
+

Brokers / API Management

- {mainTabs.map(tab => ( + {subTabs.map(tab => (
-
- - -
- NSE - + +
+
+ setSearchTerm(e.target.value)} + className="px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
- -
-
- -
-

Brokers / API Management

-
- {subTabs.map(tab => ( - - ))} -
-
- -
-
- setSearchTerm(e.target.value)} - className="px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" - /> - -
-
- {statusFilters.map(status => ( - - ))} - - -
-
- -
- - - - - - - - - - - - - - - {Object.entries(groupedBrokers).map(([groupKey, groupBrokers]) => ( - - {filterStatus !== 'All' && ( - - - - )} - {groupBrokers - .sort((a,b)=> a.id - b.id ) - .map(broker => ( - - - - - - - - - - - ))} - +
+ {statusFilters.map(status => ( + ))} -
-
NameAPI IDBrokerDate AddedStatusBalanceActionOn/Off
- {groupKey.split('-')[0].charAt(0).toUpperCase() + groupKey.split('-')[0].slice(1)} - {groupKey.split('-')[1].toUpperCase()} -
{broker.name}{broker.apiId}{broker.broker}{broker.dateAdded}{getStatusIcon(broker.status)}{broker.balance} -
- - - -
- 		- handleToggle(broker.id)} - /> -
-
- -
-
Last Synced: May 26, 2025 12:30
-
- - - -
-
- - { - setIsPanelOpen(false); - setShowAddPanel(false); - }} - title="Add Broker" - width="w-96" - > -
-
- - 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" - /> -
- -
- - + Add Broker + +
+
-
-
-

API Details

- + + +
+
+ + { + setIsPanelOpen(false); + setShowAddPanel(false); + }} + title="Add Broker" + width="w-96" + > +
+
+ + 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" + /> +
+ +
+ + +
+ +
+
+

API Details

+ +
+ +
+
+ + 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" + /> +

Date Created: {formData.dateAdded}

+
+ +
+ + 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" + /> +
+ +
+ + 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" + /> +
+ +
+ + +
+
+
+ +
+ +
+
+ -
-
- - 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" - /> -

Date Created: {formData.dateAdded}

+ { + setIsPanelOpen(false); + setShowEditPanel(false); + }} + title="Edit Broker" + width="w-96" + > +
+
+ + 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" + /> +
+ +
+ + +
+ +
+
+

API Details

+
-
- - 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" - /> -
+
+
+ + 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" + /> +

Date Modified: {formData.dateAdded}

+
-
- - 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" - /> -
+
+ + 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" + /> +
-
- - +
+ + 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" + /> +
+ +
+ + +
-
-
- - -
-
- - - { - setIsPanelOpen(false); - setShowEditPanel(false); - }} - title="Edit Broker" - width="w-96" - > -
-
- - 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" - /> -
- -
- - -
- -
-
-

API Details

- +
- -
-
- - 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" - /> -

Date Modified: {formData.dateAdded}

-
- -
- - 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" - /> -
- -
- - 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" - /> -
- -
- - -
-
- -
- - -
-
- -
+ +
+ ); }; diff --git a/src/app/layout.js b/src/app/layout.js index 7bf337d..20b3ef9 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,15 +1,12 @@ -import { Geist, Geist_Mono } from "next/font/google"; +import { Be_Vietnam_Pro } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const BeVietnamPro = Be_Vietnam_Pro({ + variable: "--font-be-vietnam-pro", subsets: ["latin"], + weight:['100','200','300','400','500','600','700','800','900'] }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); export const metadata = { title: "Create Next App", @@ -18,10 +15,8 @@ export const metadata = { export default function RootLayout({ children }) { return ( - - + + {children} diff --git a/src/app/page.js b/src/app/page.js index af1b7e3..971d9ca 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,9 +1,10 @@ // app/page.jsx import BrokerManagement from "./component/BrokerManagement"; -export default function Home() { +export default function Home() +{ return (
- + {/* */}
);