From be25a5c7339ffb3903a5380fa729531c9b441a4f Mon Sep 17 00:00:00 2001 From: "loordhusteny.a" Date: Mon, 6 Oct 2025 11:27:37 +0530 Subject: [PATCH] Made the interface smarter then its look --- package-lock.json | 9 + package.json | 1 + src/app/components/BrokerManagement.jsx | 581 ++++++++++++------------ src/app/layout.js | 16 +- 4 files changed, 307 insertions(+), 300 deletions(-) diff --git a/package-lock.json b/package-lock.json index acc76ce..a762f54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "hooknest", "version": "0.1.0", "dependencies": { + "@next/font": "^14.2.15", "lucide-react": "^0.544.0", "next": "15.5.4", "react": "19.1.0", @@ -730,6 +731,14 @@ "fast-glob": "3.3.1" } }, + "node_modules/@next/font": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz", + "integrity": "sha512-QopYhBmCDDrNDynbi+ZD1hDZXmQXVFo7TmAFp4DQgO/kogz1OLbQ92hPigJbj572eZ3GaaVxNIyYVn3/eAsehg==", + "peerDependencies": { + "next": "*" + } + }, "node_modules/@next/swc-darwin-arm64": { "version": "15.5.4", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.4.tgz", diff --git a/package.json b/package.json index f35d5b5..338123b 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "eslint" }, "dependencies": { + "@next/font": "^14.2.15", "lucide-react": "^0.544.0", "next": "15.5.4", "react": "19.1.0", diff --git a/src/app/components/BrokerManagement.jsx b/src/app/components/BrokerManagement.jsx index fd105cd..5a8d7af 100644 --- a/src/app/components/BrokerManagement.jsx +++ b/src/app/components/BrokerManagement.jsx @@ -3,315 +3,316 @@ import React, { useState } from 'react'; import { Search, Filter, Plus, X, Edit2, Trash2, Copy, Eye, EyeOff } from 'lucide-react'; export default function BrokerManagementApp() { - const [route, setRoute] = useState('brokers'); - const [modal, setModal] = useState({ show: false, mode: 'add', data: null }); - const [search, setSearch] = useState(''); - const [tab, setTab] = useState('active'); - const [errors, setErrors] = useState({}); - const [hiddenRows, setHiddenRows] = useState([]); - const [form, setForm] = useState({ name: '', broker: '', apiKey: '', secretKey: '', balance: '' }); - const [brokers, setBrokers] = useState([ - { id: 1, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: true }, - { id: 2, name: - 'Tradeweb Market', apiId: '89245', broker: 'Angel One', date: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', on: true }, - { id: 3, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: false }, - { id: 4, name: 'Tradeweb Markets', apiId: '89245', broker: 'Zerodha', date: 'Mar 01, 2025', status: 'warning', balance: '$175.50', on: true }, - { id: 5, name: 'MarketAxess', apiId: '88234', broker: 'Dhan', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: true }, - ]); + const [route, setRoute] = useState('brokers'); + const [modal, setModal] = useState({ show: false, mode: 'add', data: null }); + const [search, setSearch] = useState(''); + const [tab, setTab] = useState('active'); + const [errors, setErrors] = useState({}); + const [hiddenRows, setHiddenRows] = useState([]); + const [form, setForm] = useState({ name: '', broker: '', apiKey: '', secretKey: '', balance: '' }); + const [brokers, setBrokers] = useState([ + { id: 1, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: true }, + { + id: 2, name: + 'Tradeweb Market', apiId: '89245', broker: 'Angel One', date: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', on: true + }, + { id: 3, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: false }, + { id: 4, name: 'Tradeweb Markets', apiId: '89245', broker: 'Zerodha', date: 'Mar 01, 2025', status: 'warning', balance: '$175.50', on: true }, + { id: 5, name: 'MarketAxess', apiId: '88234', broker: 'Dhan', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: true }, + ]); - const brokerList = ['Meta5', 'Angel One', 'Zerodha', 'Dhan', 'Upstox']; - const routes = ['Dashboard', 'Brokers', 'Scan & Trade', 'Positions', 'AI Strategy Builder']; + const brokerList = ['Meta5', 'Angel One', 'Zerodha', 'Dhan', 'Upstox']; + const routes = ['Dashboard', 'Brokers', 'Scan & Trade', 'Positions', 'AI Strategy Builder']; - const handleChange = (e) => { - const { name, value } = e.target; - setForm(prev => ({ ...prev, [name]: value })); - if (errors[name]) setErrors(prev => ({ ...prev, [name]: '' })); - }; + const handleChange = (e) => { + const { name, value } = e.target; + setForm(prev => ({ ...prev, [name]: value })); + if (errors[name]) setErrors(prev => ({ ...prev, [name]: '' })); + }; - const validate = () => { - const err = {}; - if (!form.name.trim()) err.name = 'Name required'; - if (!form.broker) err.broker = 'Select broker'; - if (!form.apiKey.trim()) err.apiKey = 'API Key required'; - if (!form.secretKey.trim()) err.secretKey = 'Secret Key required'; - if (form.balance && isNaN(parseFloat(form.balance))) err.balance = 'Invalid balance'; - setErrors(err); - return Object.keys(err).length === 0; - }; + const validate = () => { + const err = {}; + if (!form.name.trim()) err.name = 'Name required'; + if (!form.broker) err.broker = 'Select broker'; + if (!form.apiKey.trim()) err.apiKey = 'API Key required'; + if (!form.secretKey.trim()) err.secretKey = 'Secret Key required'; + if (form.balance && isNaN(parseFloat(form.balance))) err.balance = 'Invalid balance'; + setErrors(err); + return Object.keys(err).length === 0; + }; - const openAdd = () => { - setModal({ show: true, mode: 'add', data: null }); - setForm({ name: '', broker: '', apiKey: '', secretKey: '', balance: '' }); - setErrors({}); - }; + const openAdd = () => { + setModal({ show: true, mode: 'add', data: null }); + setForm({ name: '', broker: '', apiKey: '', secretKey: '', balance: '' }); + setErrors({}); + }; - const openEdit = (broker) => { - setModal({ show: true, mode: 'edit', data: broker }); - setForm({ name: broker.name, broker: broker.broker, apiKey: broker.apiId, secretKey: 'sk-41Z8kLjY...', balance: broker.balance.replace('$', '') }); - setErrors({}); - }; + const openEdit = (broker) => { + setModal({ show: true, mode: 'edit', data: broker }); + setForm({ name: broker.name, broker: broker.broker, apiKey: broker.apiId, secretKey: 'sk-41Z8kLjY...', balance: broker.balance.replace('$', '') }); + setErrors({}); + }; - const deleteBroker = (id) => { - if (confirm('Delete this broker?')) setBrokers(brokers.filter(b => b.id !== id)); - }; + const deleteBroker = (id) => { + if (confirm('Delete this broker?')) setBrokers(brokers.filter(b => b.id !== id)); + }; - const submit = () => { - if (!validate()) return; - if (modal.mode === 'add') { - const newBroker = { - id: Date.now(), name: form.name, apiId: Math.floor(10000 + Math.random() * 90000).toString(), - broker: form.broker, date: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }), - status: 'active', balance: `$${parseFloat(form.balance || 0).toFixed(2)}`, on: true - }; - setBrokers([...brokers, newBroker]); - } else { - setBrokers(brokers.map(b => b.id === modal.data.id ? { ...b, name: form.name, broker: form.broker, balance: `$${parseFloat(form.balance || 0).toFixed(2)}` } : b)); - } - setModal({ show: false, mode: 'add', data: null }); - }; + const submit = () => { + if (!validate()) return; + if (modal.mode === 'add') { + const newBroker = { + id: Date.now(), name: form.name, apiId: Math.floor(10000 + Math.random() * 90000).toString(), + broker: form.broker, date: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }), + status: 'active', balance: `$${parseFloat(form.balance || 0).toFixed(2)}`, on: true + }; + setBrokers([...brokers, newBroker]); + } else { + setBrokers(brokers.map(b => b.id === modal.data.id ? { ...b, name: form.name, broker: form.broker, balance: `$${parseFloat(form.balance || 0).toFixed(2)}` } : b)); + } + setModal({ show: false, mode: 'add', data: null }); + }; - const toggle = (id) => setBrokers(brokers.map(b => b.id === id ? { ...b, on: !b.on } : b)); + const toggle = (id) => setBrokers(brokers.map(b => b.id === id ? { ...b, on: !b.on } : b)); - const toggleVisibility = (id) => { - setHiddenRows(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]); - }; + const toggleVisibility = (id) => { + setHiddenRows(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]); + }; - const statusIcon = (status) => { - const colors = { active: 'bg-green-500', inactive: 'bg-red-500', warning: 'bg-yellow-500' }; - return
; - }; + const statusIcon = (status) => { + const colors = { active: 'bg-green-500', inactive: 'bg-red-500', warning: 'bg-yellow-500' }; + return
; + }; - const filtered = brokers.filter(b => { - const matchSearch = b.name.toLowerCase().includes(search.toLowerCase()) || b.broker.toLowerCase().includes(search.toLowerCase()); - const matchTab = tab === 'active' ? b.status === 'active' : tab === 'inactive' ? b.status === 'inactive' : tab === 'expired' ? b.status === 'expired' : true; - return matchSearch && matchTab && !hiddenRows.includes(b.id); - }); + const filtered = brokers.filter(b => { + const matchSearch = b.name.toLowerCase().includes(search.toLowerCase()) || b.broker.toLowerCase().includes(search.toLowerCase()); + const matchTab = tab === 'active' ? b.status === 'active' : tab === 'inactive' ? b.status === 'inactive' : tab === 'expired' ? b.status === 'expired' : true; + return matchSearch && matchTab && !hiddenRows.includes(b.id); + }); - return ( -
-
-
-
-
-
-
-
- Hook nest -
- -
-
- - - -
- NSE - 📊 -
- -
-
-
- -
- {route === 'brokers' ? ( -
-
-
-
- 👥 - Brokers / API Management -
-
- - - -
-
-
-
-
- - setSearch(e.target.value)} - className="pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" /> -
- -
- {['active', 'inactive', 'expired'].map(t => ( - - ))} -
-
-
- - -
-
-
- -
- - - - {['Name', 'API ID', 'Broker', 'Date Added', 'Status', 'Balance', 'Action', 'On/Off'].map(h => ( - - ))} - - - - {filtered.map(b => ( - - - - - - - - - - - ))} - -
{h}
{b.name}{b.apiId} + return ( +
+
+
+
-
{b.broker[0]}
- {b.broker} +
+
+
+ Hook nest
-
{b.date}{statusIcon(b.status)}{b.balance} -
- - - + +
+
+ + + +
+ NSE + 📊
-
- -
-
-
- ) : ( -
-

{routes.find(r => route === r.toLowerCase().replace(/ & /g, '-').replace(/ /g, '-'))}

-

This page is under construction

-
- )} -
+ +
+ + -
-
setModal({ show: false, mode: 'add', data: null })}>
-
-
-
-
-

{modal.mode === 'add' ? 'Add Broker' : 'Edit Broker'}

-

Choose your preferred exchange to add a broker.

-
- -
+
+ {route === 'brokers' ? ( +
+
+
+
+ 👥 + Brokers / API Management +
+
+ + + +
+
+
+
+
+ + setSearch(e.target.value)} + className="pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" /> +
+ +
+ {['active', 'inactive', 'expired'].map(t => ( + + ))} +
+
+
+ + +
+
+
-
-
-

Broker Details

-
- - - {errors.name &&

{errors.name}

} -
-
- - - {errors.broker &&

{errors.broker}

} -
-
- -
-
-

API Details

- {modal.mode === 'edit' && ( - - )} -
-
- -
- - -
- {errors.apiKey &&

{errors.apiKey}

} -

Date {modal.mode === 'add' ? 'Created' : 'Modified'}: {modal.mode === 'add' ? new Date().toLocaleDateString() : '30/12/2025'}

-
-
- - - {errors.secretKey &&

{errors.secretKey}

} -
-
- - - {errors.balance &&

{errors.balance}

} -
- {modal.mode === 'add' && form.broker && ( - Help me connect to the API +
+ + + + {['Name', 'API ID', 'Broker', 'Date Added', 'Status', 'Balance', 'Action', 'On/Off'].map(h => ( + + ))} + + + + {filtered.map(b => ( + + + + + + + + + + + ))} + +
{h}
{b.name}{b.apiId} +
+
{b.broker[0]}
+ {b.broker} +
+ 		{b.date}{statusIcon(b.status)}{b.balance} +
+ + + +
+ 		+ +
+
+
+ ) : ( +
+

{routes.find(r => route === r.toLowerCase().replace(/ & /g, '-').replace(/ /g, '-'))}

+

This page is under construction

+
)} -
-
+
-
- - +
+
setModal({ show: false, mode: 'add', data: null })}>
+
+
+
+
+

{modal.mode === 'add' ? 'Add Broker' : 'Edit Broker'}

+

Choose your preferred exchange to add a broker.

+
+ +
+
+
+

Broker Details

+
+ + + {errors.name &&

{errors.name}

} +
+
+ + + {errors.broker &&

{errors.broker}

} +
+
+ +
+
+

API Details

+ {modal.mode === 'edit' && ( + + )} +
+
+ +
+ + +
+ {errors.apiKey &&

{errors.apiKey}

} +

Date {modal.mode === 'add' ? 'Created' : 'Modified'}: {modal.mode === 'add' ? new Date().toLocaleDateString() : '30/12/2025'}

+
+
+ + + {errors.secretKey &&

{errors.secretKey}

} +
+
+ + + {errors.balance &&

{errors.balance}

} +
+ {modal.mode === 'add' && form.broker && ( + Help me connect to the API + )} +
+
+ +
+ + +
+
+
-
-
-
- ); + ); } - \ No newline at end of file + diff --git a/src/app/layout.js b/src/app/layout.js index 7bf337d..a7aeed6 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,14 +1,10 @@ -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", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const BeVietnamPro = Be_Vietnam_Pro({ + variable: "--font-be-vietnam-pro", subsets: ["latin"], + weight: ['100','200','300','400','500','600','700','800','900'], }); export const metadata = { @@ -18,9 +14,9 @@ export const metadata = { export default function RootLayout({ children }) { return ( - + {children}