dashboard fixed

app/accountDetails/page.js

@@ -1,11 +1,29 @@
+"use client"; // Ensure this is a Client Component
+
 import GetBankDropdown from "./components/accountDetails";
-import Link from "next/link";
 import Image from "next/image";
+import { useState } from "react"; 
+import { useRouter } from "next/navigation"; // For client-side routing in Next.js App Router
 import img from "@/public/woman1.png";
 import dropdown from "@/resources/listOfBanks/dropdown.json";
 
 export default function Page() {
   const banks = dropdown.data.banks;
+  const router = useRouter(); // Ensure routing happens only on client
+
+  const [accountNumber, setAccountNumber] = useState(""); 
+  const [selectedBank, setSelectedBank] = useState("");
+  const [amount, setAmount] = useState(""); 
+
+  const handleContinue = () => {
+    if (!accountNumber || !selectedBank || !amount) {
+      alert("Please fill out all fields");
+      return;
+    }
+
+    // Navigate to the next page
+    router.push(`/accountverification?accountNumber=${accountNumber}&selectedBank=${selectedBank}&amount=${amount}`);
+  };
 
   return (
     <div className="mt-36">
@@ -16,29 +34,38 @@ export default function Page() {
             type="number"
             className="h-14 rounded-lg col-span-3 bg-transparent border w-full"
             placeholder="Input your 10-digit account number"
+            value={accountNumber}
+            onChange={(e) => setAccountNumber(e.target.value)}
           />
-          <select className="h-14 bg-transparent border w-full rounded-lg text-white">
-            <option disabled selected>
+          <select
+            className="h-14 bg-transparent border w-full rounded-lg text-white"
+            value={selectedBank}
+            onChange={(e) => setSelectedBank(e.target.value)}
+          >
+            <option disabled selected value="">
               Select your bank
             </option>
             {banks.map((bank, index) => (
-              <option
-                className="text-black bg-[#FAE315] hover:bg-yellow-400"
-                key={index}
-                value={bank.code}
-              >
+              <option className="bg-yellow-500" key={index} value={bank.code}>
                 {bank.name}
               </option>
             ))}
           </select>
-          <Link
-            href="/accountDetails/page"
-            className={`text-sm text-black mt-4 tracking-wide bg-yellow-400 hover:bg-[#FAE315] hover:border-none font-semibold w-56 flex justify-center items-left rounded-lg h-11`}
+
+          <input
+            type="number"
+            className="h-14 mt-4 rounded-lg col-span-3 bg-transparent border w-full"
+            placeholder="Input amount"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+          />
+
+          <button
+            onClick={handleContinue}
+            className="text-sm text-black mt-4 tracking-wide bg-yellow-400 hover:bg-[#FAE315] hover:border-none font-semibold w-56 flex justify-center items-left rounded-lg h-11"
           >
-            <p className="items-center font-bold capitalize justify-center border-[#9CA3AF] mt-3 bg-transparent">
-              continue
-            </p>
-          </Link>
+            Continue
+          </button>
         </div>
         <div className="col-span-2">
           <Image className="flex justify-end" src={img} alt="picture" />

app/accountverification/component/verification.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+export default function TransactionDetails() {
+  const [transactionData, setTransactionData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchTransactionDetails = async () => {
+      try {
+        const response = await axios.post(
+          'https://api.analogueshifts.com/api/tool/bank/withdraw/request/28fb98b5-3cd2-3cc5-b1f4-d6b5d667cb54',
+          {
+            amount: "10000", // Set the amount dynamically
+            pin: "your-pin-here" // Set the pin dynamically
+          },
+          {
+            headers: {
+              Authorization: `Bearer YOUR_SECRET_TOKEN`, // Your token goes here
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+
+        console.log("API Response:", response);
+        setTransactionData(response.data.data.transaction); // Set transaction data
+      } catch (err) {
+        console.error("Error fetching transaction details:", err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTransactionDetails();
+  }, []);
+
+  if (loading) {
+    return <p>Loading...</p>; // Show loading state
+  }
+
+  if (error) {
+    return <p>Error: {error}</p>; // Display error message
+  }
+
+  return (
+    <div className="m-4">
+      <div className="flex text-yellow-400 justify-center font-bold text-2xl border-b-2 border-dashed">
+        Transaction details
+      </div>
+      <div className="border-b-2 mb-8 border-dashed">
+        <div className="grid grid-cols-2 m-3">
+          <p className="col-span-1 text-[20px] text-left">Recepient Details</p>
+          <p className="col-span-1 text-[20px] text-right font-semibold">
+            {/* Dynamic recipient details */}
+            Account Name | Bank Name | Account Number
+          </p>
+        </div>
+        <div className="grid grid-cols-2 m-3">
+          <p className="col-span-1 text-[20px] text-left">Transaction type</p>
+          <p className="col-span-1 text-[20px] text-right font-semibold">
+            {transactionData?.reason || "Bank Transfer"}
+          </p>
+        </div>
+        <div className="grid grid-cols-2 m-3">
+          <p className="col-span-1 text-[20px] text-left">Transaction Id</p>
+          <p className="col-span-1 text-[20px] text-right font-semibold">
+            {transactionData?.uuid}
+          </p>
+        </div>
+        <div className="grid grid-cols-2 m-3">
+          <p className="col-span-1 text-[20px] text-left">Transaction Date & Time</p>
+          <p className="col-span-1 text-[20px] text-right font-semibold">
+            {new Date(transactionData?.created_at).toLocaleString()}
+          </p>
+        </div>
+      </div>
+      <div className="flex justify-center w-32 h-10 hover:bg-yellow-500 rounded-lg bg-yellow-400">
+        <button>Confirm</button>
+      </div>
+    </div>
+  );
+}

app/accountverification/page.js

@@ -0,0 +1,50 @@
+"use client"; // Mark this as a Client Component
+
+import { useSearchParams } from 'next/navigation'; // Import useSearchParams
+import TransactionDetails from "./component/verification";
+
+export default function Page() {
+  const searchParams = useSearchParams(); // Use searchParams to get query params
+
+  // Extract query parameters from the URL
+  const accountNumber = searchParams.get('accountNumber');
+  const selectedBank = searchParams.get('selectedBank');
+  const amount = searchParams.get('amount');
+
+  return (
+    <div className="mt-20">
+      <TransactionDetails />
+      <div className="m-4">
+        <div className="flex text-yellow-400 justify-center font-bold text-2xl border-b-2 border-dashed">
+          Transaction details
+        </div>
+        <div className="border-b-2 mb-8 border-dashed">
+          <div className="grid grid-cols-2 m-3">
+            <p className="col-span-1 text-[20px] text-left">Recepient Details</p>
+            <p className="col-span-1 text-[20px] text-right font-semibold">
+              Account Name | {selectedBank} | {accountNumber} {/* Dynamic Details */}
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 m-3">
+            <p className="col-span-1 text-[20px] text-left">Transaction Type</p>
+            <p className="col-span-1 text-[20px] text-right font-semibold">
+              Bank Transfer
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 m-3">
+            <p className="col-span-1 text-[20px] text-left">Transaction Amount</p>
+            <p className="col-span-1 text-[20px] text-right font-semibold">
+              {amount} NGN {/* Dynamic Amount */}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex justify-center w-32 h-10 hover:bg-yellow-500 rounded-lg bg-yellow-400">
+          <button>Confirm</button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/dashboard/component/TransactionHistory.js

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { FaEye, FaEyeSlash } from 'react-icons/fa';
+import NavigationPage from '../resources/payments/page';
+
+export default function UserDashboard() {
+  const [balanceVisible, setBalanceVisible] = useState(false); // Balance visibility
+  const [activeTab, setActiveTab] = useState('transactionHistory'); // Manage active tab
+
+  // Placeholder for dynamic data
+  const user = {
+    name: "Aleshinloye Olamilekan",
+    walletId: "80xxxxx192",
+    walletBalance: "50,000 NGN", // Replace with actual balance data
+  };
+
+  // Toggle wallet balance visibility
+  const toggleBalanceVisibility = () => {
+    setBalanceVisible(!balanceVisible);
+  };
+
+  // Conditional rendering based on activeTab
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'transactionHistory':
+        return <TransactionHistory />;
+      case 'payments':
+        return <Payments />;
+      case 'subscriptions':
+        return <Subscriptions />;
+      default:
+        return <TransactionHistory />;
+    }
+  };
+
+  return (
+    <div className="m-6 mt-11">
+      {/* User Information */}
+      <div className="border-b-2 border-dashed border-slate-400 pb-3">
+        <div className="m-2 mb-0">
+          <img
+            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUGA7nerjBgCBfK9VYQAZzlp_XaFr4Njns6w&s"
+            alt="User Avatar"
+            className="w-11 rounded-full"
+          />
+          <p className="text-yellow-400 font-bold text-[30px]">
+            {user.name}
+          </p>
+          <p className="text-yellow-400 font-bold text-[25px]">
+            {user.walletId}
+          </p>
+
+          {/* Wallet Balance with Toggle */}
+          <div className="flex items-center">
+            <p className="text-black font-bold text-[20px]">
+              Wallet Balance: {balanceVisible ? user.walletBalance : '•••••••'}
+            </p>
+            <button onClick={toggleBalanceVisibility} className="ml-2">
+              {balanceVisible ? (
+                <FaEyeSlash className="text-gray-500" /> // Eye-slash for hidden
+              ) : (
+                <FaEye className="text-gray-500" /> // Eye for visible
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation Menu */}
+      <nav className="bg-yellow-300 flex justify-between items-center w-full mt-4">
+        <ul className="flex items-center gap-4">
+          <li className={`hover:text-yellow-500 ${activeTab === 'transactionHistory' ? 'text-yellow-600' : ''}`}>
+            <button onClick={() => setActiveTab('transactionHistory')}>
+              Transaction History
+            </button>
+          </li>
+          <li className={`hover:text-yellow-500 ${activeTab === 'payments' ? 'text-yellow-600' : ''}`}>
+            <button onClick={() => setActiveTab('payments')}>
+              Payments
+            </button>
+          </li>
+          <li className={`hover:text-yellow-500 ${activeTab === 'subscriptions' ? 'text-yellow-600' : ''}`}>
+            <button onClick={() => setActiveTab('subscriptions')}>
+              Subscriptions
+            </button>
+          </li>
+        </ul>
+      </nav>
+
+      {/* Content Area */}
+      <div className="mt-5">
+        {renderContent()}
+      </div>
+    </div>
+  );
+}
+
+// Components for the different sections (replace with actual content)
+function TransactionHistory() {
+  return (
+    <NavigationPage />
+  );
+}
+
+function Payments() {
+  return (
+    <NavigationPage />
+  );
+}
+
+function Subscriptions() {
+  return (
+    <NavigationPage />
+  );
+}

app/dashboard/page.js

@@ -0,0 +1,13 @@
+"use client"
+import UserDashboard from './component/TransactionHistory'; // Adjust path if needed
+
+export default function DashboardPage() {
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-center text-yellow-500 mt-5">
+        User Dashboard
+      </h1>
+      <UserDashboard />
+    </div>
+  );
+}

app/dashboard/resources/payments/createPayments/Page.js

@@ -0,0 +1,10 @@
+"use client"
+import CreatePayment from './components/createPayment'; // Adjust path if needed
+
+export default function Page() {
+  return (
+    <div className="mt-11">
+      <CreatePayment />
+    </div>
+  );
+}