loordhusteny.a/Hook-Nest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the interface smarter then its look

Browse Source
This commit is contained in:
loordhusteny.a 2025-10-06 11:27:37 +05:30
parent 435584980f
commit be25a5c733
4 changed files with 307 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

11
src/app/components/BrokerManagement.jsx
View File

@ -12,8 +12,10 @@ export default function BrokerManagementApp() {
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: 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 },
@ -225,7 +227,7 @@ export default function BrokerManagementApp() {
</main>
<div className={`fixed inset-0 z-50 transition-opacity duration-300 ${modal.show ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
<div className="absolute inset-0 bg-black bg-opacity-50" onClick={() => setModal({ show: false, mode: 'add', data: null })}></div>
<div className="absolute inset-0 bg-gray-300 opacity-40" onClick={() => setModal({ show: false, mode: 'add', data: null })}></div>
<div className={`absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl transform transition-transform duration-300 ${modal.show ? 'translate-x-0' : 'translate-x-full'}`}>
<div className="h-full flex flex-col">
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
@ -237,7 +239,6 @@ export default function BrokerManagementApp() {
<X className="w-5 h-5 text-gray-400" />
</button>
</div>
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 ">
<div className="space-y-4">
<h4 className="font-semibold text-gray-900">Broker Details</h4>
@ -269,7 +270,7 @@ export default function BrokerManagementApp() {
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1.5">API Key</label>
<label className="block text-sm font-medium text-gray-700 mb-1.5">API ID</label>
<div className="relative">
<input type="text" name="apiKey" value={form.apiKey} onChange={handleChange} placeholder="api_key_1234567890abcdefABCDE"
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 ${errors.apiKey ? 'border-red-500' : 'border-gray-200'}`}

16
src/app/layout.js
View File

@ -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 (
<html lang="en">
<html lang="en" className={BeVietnamPro.variable}>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>