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

refer README.md for commit details

Browse Source
This commit is contained in:
23CABSHIYAMR 2025-10-06 12:53:12 +05:30
parent 78e5596339
commit 06f87e0ead
9 changed files with 120 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -9,7 +9,7 @@ Tech stack - Next.js , tailwind css
Next Goal - Break down one huge file into different components to improve readability and reusability. Next Goal - Break down one huge file into different components to improve readability and reusability.
----> The directories for this has been already created ----> The directories for this has been already created
Commit-2 Commit-2 & 3
Status - Currently, the UI and resuable components has been seperated to improve performance. Status - Currently, the UI and resuable components has been seperated to improve performance.
Helper functions have been moved to utils to reduce clutter Helper functions have been moved to utils to reduce clutter
@ -17,3 +17,11 @@ Tech stack - Next.js , tailwind css
Issues - Make the eye button work(toggle between view/hide) Issues - Make the eye button work(toggle between view/hide)
Next Goal - Add the sub-routes like API Management, Risk Management and Hook Hub. Next Goal - Add the sub-routes like API Management, Risk Management and Hook Hub.
Commit - 4
Status - Changed the fonts and UI(bg for slide-in modal).
Also made the eye and on/off button work.
Next Goal - Add search and filter functionality.

10
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "hook-nest", "name": "hook-nest",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@next/font": "^14.2.15",
"@tailwindcss/postcss": "^4.1.14", "@tailwindcss/postcss": "^4.1.14",
"framer-motion": "^12.23.22", "framer-motion": "^12.23.22",
"lucide-react": "^0.544.0", "lucide-react": "^0.544.0",
@ -772,6 +773,15 @@
"fast-glob": "3.3.1" "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==",
"license": "MIT",
"peerDependencies": {
"next": "*"
}
},
"node_modules/@next/swc-darwin-arm64": { "node_modules/@next/swc-darwin-arm64": {
"version": "15.5.4", "version": "15.5.4",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.4.tgz", "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" "lint": "eslint"
}, },
"dependencies": { "dependencies": {
"@next/font": "^14.2.15",
"@tailwindcss/postcss": "^4.1.14", "@tailwindcss/postcss": "^4.1.14",
"framer-motion": "^12.23.22", "framer-motion": "^12.23.22",
"lucide-react": "^0.544.0", "lucide-react": "^0.544.0",

3
src/app/globals.css
View File

@ -3,3 +3,6 @@
@theme { @theme {
} }
:root {
font-family: var(--font-be-vietnam-pro), sans-serif;
}

14
src/app/layout.js
View File

@ -1,5 +1,7 @@
import "./globals.css"; import "./globals.css";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import { Be_Vietnam_Pro } from 'next/font/google';
import Header from "../layouts/Header"; import Header from "../layouts/Header";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@ -10,16 +12,20 @@ const geistMono = Geist_Mono({
variable: "--font-geist-mono", variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
}); });
const beVietnamPro = Be_Vietnam_Pro({
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
variable: "--font-be-vietnam-pro",
});
export const metadata = { export const metadata = {
title: "Create Next App", title: "Hook-Nest",
description: "Generated by create next app", description: "Generated by create next app",
}; };
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="en"> <html lang="en" className={beVietnamPro.variable}>
<body className={`${geistSans.variable} ${geistMono.variable}`}> <body>
<div className="p-5"> <div className="p-5">
<Header/> <Header/>
</div> </div>

90
src/components/brokers/TableRow.js
View File

@ -1,3 +1,68 @@
// 'use client';
// import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react';
// import BrokerAvatar from './BrokerAvatar';
// import StatusIndicator from './StatusIndicator';
// import ToggleSwitch from '@/components/ui/ToggleSwitch';
// export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) {
// const BrokerData=isHidden?{name:"---",id:'---',dateAdded:'---',balance:"---",}:broker;
// // if (isHidden) broker={name:"---",id:'---',dateAdded:'---'};
// return (
// <tr className={index%2!==0?"bg-gray-100 hover:bg-gray-50":"hover:bg-gray-50"}>
// <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
// {BrokerData.name}
// </td>
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
// {BrokerData.id}
// </td>
// <td className="px-6 py-4 whitespace-nowrap">
// <BrokerAvatar brokerName={broker.broker} />
// </td>
// <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
// {BrokerData.dateAdded}
// </td>
// <td className="px-6 py-4 whitespace-nowrap">
// <StatusIndicator status={broker.status} />
// </td>
// <td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
// {BrokerData.balance}
// </td>
// <td className="px-6 py-4 whitespace-nowrap">
// <div className="flex items-center justify-center gap-2">
// <button
// onClick={() => onToggleVisibility(broker.id)}
// className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
// title={isHidden ? "Show" : "Hide"}
// >
// {isHidden ? <EyeOff size={18} /> : <Eye size={18} />}
// </button>
// <button
// onClick={() => onEdit(broker)}
// className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
// title="Edit"
// >
// <Edit2 size={18} />
// </button>
// <button
// onClick={() => onDelete(broker.id)}
// className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
// title="Delete"
// >
// <Trash2 size={18} />
// </button>
// </div>
// </td>
// <td className="px-6 py-4 whitespace-nowrap text-center">
// <ToggleSwitch
// isActive={broker.status === 'active'}
// onToggle={() => onToggleStatus(broker.id)}
// />
// </td>
// </tr>
// );
// }
'use client'; 'use client';
import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react'; import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react';
@ -5,28 +70,30 @@ import BrokerAvatar from './BrokerAvatar';
import StatusIndicator from './StatusIndicator'; import StatusIndicator from './StatusIndicator';
import ToggleSwitch from '@/components/ui/ToggleSwitch'; import ToggleSwitch from '@/components/ui/ToggleSwitch';
export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) { export default function TableRow({ index, broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) {
if (isHidden) return null; const BrokerData = isHidden
? { name: "---", id: '---', dateAdded: '---', balance: "---" }
: broker;
return ( return (
<tr className={index%2!==0?"bg-gray-100 hover:bg-gray-50":"hover:bg-gray-50"}> <tr className={index % 2 !== 0 ? "bg-gray-100 hover:bg-gray-50" : "hover:bg-gray-50"}>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{broker.name} {BrokerData.name}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{broker.id} {BrokerData.id}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<BrokerAvatar brokerName={broker.broker} /> <BrokerAvatar brokerName={isHidden ? "---" : broker.broker} />
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{broker.dateAdded} {BrokerData.dateAdded}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<StatusIndicator status={broker.status} /> <StatusIndicator status={isHidden ? "---" : broker.status} />
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-green-500"> <td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
{broker.balance} {BrokerData.balance}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
@ -41,6 +108,7 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu
onClick={() => onEdit(broker)} onClick={() => onEdit(broker)}
className="p-1.5 hover:bg-gray-100 rounded text-gray-600" className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
title="Edit" title="Edit"
disabled={isHidden}
> >
<Edit2 size={18} /> <Edit2 size={18} />
</button> </button>
@ -48,6 +116,7 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu
onClick={() => onDelete(broker.id)} onClick={() => onDelete(broker.id)}
className="p-1.5 hover:bg-gray-100 rounded text-gray-600" className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
title="Delete" title="Delete"
disabled={isHidden}
> >
<Trash2 size={18} /> <Trash2 size={18} />
</button> </button>
@ -55,8 +124,9 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-center"> <td className="px-6 py-4 whitespace-nowrap text-center">
<ToggleSwitch <ToggleSwitch
isActive={broker.status === 'active'} isActive={!isHidden && broker.status === 'active'}
onToggle={() => onToggleStatus(broker.id)} onToggle={() => onToggleStatus(broker.id)}
disabled={isHidden}
/> />
</td> </td>
</tr> </tr>

0
src/components/ui/Button.js
View File

2
src/components/ui/SlidePanel.js
View File

@ -16,7 +16,7 @@ export default function SlidePanel({
return ( return (
<> <>
<div <div
className="fixed inset-0 bg-black bg-opacity-50 z-40" className="fixed inset-0 bg-gray-400 opacity-50 z-40"
onClick={onClose} onClick={onClose}
/> />

5
src/components/ui/ToggleSwitch.js
View File

@ -1,12 +1,13 @@
'use client'; 'use client';
export default function ToggleSwitch({ isActive, onToggle }) { export default function ToggleSwitch({ isActive, onToggle, disabled = false }) {
return ( return (
<button <button
onClick={onToggle} onClick={onToggle}
disabled={disabled}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
isActive ? 'bg-teal-500' : 'bg-gray-300' isActive ? 'bg-teal-500' : 'bg-gray-300'
}`} } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
> >
<span <span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${ className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${