refer README.md for commit details

2025-10-06 12:53:12 +05:30 · 2025-10-06 12:53:12 +05:30 · 06f87e0ead
commit 06f87e0ead
parent 78e5596339
9 changed files with 120 additions and 21 deletions
--- a/README.md
+++ b/README.md
@ -9,11 +9,19 @@ Tech stack - Next.js , tailwind css
 Next Goal - Break down one huge file into different components to improve readability and reusability.
 ----> 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. 
 Helper functions have been moved to utils to reduce clutter

 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.
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,7 @@
      "name": "hook-nest",
      "version": "0.1.0",
      "dependencies": {
+        "@next/font": "^14.2.15",
        "@tailwindcss/postcss": "^4.1.14",
        "framer-motion": "^12.23.22",
        "lucide-react": "^0.544.0",
@ -772,6 +773,15 @@
        "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": {
      "version": "15.5.4",
      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.4.tgz",
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@next/font": "^14.2.15",
    "@tailwindcss/postcss": "^4.1.14",
    "framer-motion": "^12.23.22",
    "lucide-react": "^0.544.0",
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -3,3 +3,6 @@
@theme {
 
 }
+:root {
+  font-family: var(--font-be-vietnam-pro), sans-serif;
+}
--- a/src/app/layout.js
+++ b/src/app/layout.js
@ -1,5 +1,7 @@
 import "./globals.css";
 import { Geist, Geist_Mono } from "next/font/google";
+import { Be_Vietnam_Pro } from 'next/font/google';
+
 import Header from "../layouts/Header";
 const geistSans = Geist({
  variable: "--font-geist-sans",
@ -10,16 +12,20 @@ const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  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 = {
-  title: "Create Next App",
+  title: "Hook-Nest",
  description: "Generated by create next app",
 };

 export default function RootLayout({ children }) {
  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+    <html lang="en" className={beVietnamPro.variable}>
+      <body>
        <div className="p-5">
          <Header/>
        </div>
--- a/src/components/brokers/TableRow.js
+++ b/src/components/brokers/TableRow.js
@ -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';

 import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react';
@ -5,28 +70,30 @@ 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 }) {
-  if (isHidden) return null;
+export default function TableRow({ index, broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) {
+  const BrokerData = isHidden 
+    ? { name: "---", id: '---', dateAdded: '---', balance: "---" } 
+    : broker;

  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">
-        {broker.name}
+        {BrokerData.name}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-        {broker.id}
+        {BrokerData.id}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
-        <BrokerAvatar brokerName={broker.broker} />
+        <BrokerAvatar brokerName={isHidden ? "---" : broker.broker} />
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-        {broker.dateAdded}
+        {BrokerData.dateAdded}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
-        <StatusIndicator status={broker.status} />
+        <StatusIndicator status={isHidden ? "---" : broker.status} />
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
-        {broker.balance}
+        {BrokerData.balance}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <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)}
            className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
            title="Edit"
+            disabled={isHidden}
          >
            <Edit2 size={18} />
          </button>
@ -48,6 +116,7 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu
            onClick={() => onDelete(broker.id)}
            className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
            title="Delete"
+            disabled={isHidden}
          >
            <Trash2 size={18} />
          </button>
@ -55,8 +124,9 @@ export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatu
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-center">
        <ToggleSwitch 
-          isActive={broker.status === 'active'} 
-          onToggle={() => onToggleStatus(broker.id)} 
+          isActive={!isHidden && broker.status === 'active'} 
+          onToggle={() => onToggleStatus(broker.id)}
+          disabled={isHidden}
        />
      </td>
    </tr>
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
--- a/src/components/ui/SlidePanel.js
+++ b/src/components/ui/SlidePanel.js
@ -16,7 +16,7 @@ export default function SlidePanel({
  return (
    <>
      <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}
      />

--- a/src/components/ui/ToggleSwitch.js
+++ b/src/components/ui/ToggleSwitch.js
@ -1,12 +1,13 @@
 'use client';

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