From bfe5d041b3b4ddefb7502e572e5b9653f592ef49 Mon Sep 17 00:00:00 2001 From: Leanstix Date: Sat, 21 Sep 2024 00:42:49 +0100 Subject: [PATCH 1/2] dashboard fixed --- app/accountDetails/page.js | 57 ++++-- .../component/verification.js | 84 +++++++++ app/accountverification/page.js | 50 +++++ app/dashboard/component/TransactionHistory.js | 114 ++++++++++++ app/dashboard/page.js | 13 ++ app/dashboard/resources/invoice/Invoice.js | 0 .../resources/payments/createPayments/Page.js | 10 + .../components/createPayment.js | 171 ++++++++++++++++++ .../individualPayments/individualPayments.js | 53 ++++++ .../payments/listOfPayments/listOfPayments.js | 49 +++++ .../payments/makePayments/makePayments.js | 109 +++++++++++ app/dashboard/resources/payments/page.js | 53 ++++++ .../payments/trasactions/viewPayment.js | 116 ++++++++++++ .../resources/subscription/Subscription.js | 0 package-lock.json | 12 +- package.json | 3 +- 16 files changed, 877 insertions(+), 17 deletions(-) create mode 100644 app/accountverification/component/verification.js create mode 100644 app/accountverification/page.js create mode 100644 app/dashboard/component/TransactionHistory.js create mode 100644 app/dashboard/page.js create mode 100644 app/dashboard/resources/invoice/Invoice.js create mode 100644 app/dashboard/resources/payments/createPayments/Page.js create mode 100644 app/dashboard/resources/payments/createPayments/components/createPayment.js create mode 100644 app/dashboard/resources/payments/individualPayments/individualPayments.js create mode 100644 app/dashboard/resources/payments/listOfPayments/listOfPayments.js create mode 100644 app/dashboard/resources/payments/makePayments/makePayments.js create mode 100644 app/dashboard/resources/payments/page.js create mode 100644 app/dashboard/resources/payments/trasactions/viewPayment.js create mode 100644 app/dashboard/resources/subscription/Subscription.js diff --git a/app/accountDetails/page.js b/app/accountDetails/page.js index 276ce54..57943ac 100644 --- a/app/accountDetails/page.js +++ b/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 (
@@ -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)} /> - setSelectedBank(e.target.value)} + > + {banks.map((bank, index) => ( - ))} - setAmount(e.target.value)} + /> + +
picture diff --git a/app/accountverification/component/verification.js b/app/accountverification/component/verification.js new file mode 100644 index 0000000..95267d0 --- /dev/null +++ b/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

Loading...

; // Show loading state + } + + if (error) { + return

Error: {error}

; // Display error message + } + + return ( +
+
+ Transaction details +
+
+
+

Recepient Details

+

+ {/* Dynamic recipient details */} + Account Name | Bank Name | Account Number +

+
+
+

Transaction type

+

+ {transactionData?.reason || "Bank Transfer"} +

+
+
+

Transaction Id

+

+ {transactionData?.uuid} +

+
+
+

Transaction Date & Time

+

+ {new Date(transactionData?.created_at).toLocaleString()} +

+
+
+
+ +
+
+ ); +} diff --git a/app/accountverification/page.js b/app/accountverification/page.js new file mode 100644 index 0000000..4c8c44d --- /dev/null +++ b/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 ( +
+ +
+
+ Transaction details +
+
+
+

Recepient Details

+

+ Account Name | {selectedBank} | {accountNumber} {/* Dynamic Details */} +

+
+ +
+

Transaction Type

+

+ Bank Transfer +

+
+ +
+

Transaction Amount

+

+ {amount} NGN {/* Dynamic Amount */} +

+
+
+ +
+ +
+
+
+ ); +} diff --git a/app/dashboard/component/TransactionHistory.js b/app/dashboard/component/TransactionHistory.js new file mode 100644 index 0000000..a5dda0b --- /dev/null +++ b/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 ; + case 'payments': + return ; + case 'subscriptions': + return ; + default: + return ; + } + }; + + return ( +
+ {/* User Information */} +
+
+ User Avatar +

+ {user.name} +

+

+ {user.walletId} +

+ + {/* Wallet Balance with Toggle */} +
+

+ Wallet Balance: {balanceVisible ? user.walletBalance : '•••••••'} +

+ +
+
+
+ + {/* Navigation Menu */} + + + {/* Content Area */} +
+ {renderContent()} +
+
+ ); +} + +// Components for the different sections (replace with actual content) +function TransactionHistory() { + return ( + + ); +} + +function Payments() { + return ( + + ); +} + +function Subscriptions() { + return ( + + ); +} diff --git a/app/dashboard/page.js b/app/dashboard/page.js new file mode 100644 index 0000000..2e73d0e --- /dev/null +++ b/app/dashboard/page.js @@ -0,0 +1,13 @@ +"use client" +import UserDashboard from './component/TransactionHistory'; // Adjust path if needed + +export default function DashboardPage() { + return ( +
+

+ User Dashboard +

+ +
+ ); +} diff --git a/app/dashboard/resources/invoice/Invoice.js b/app/dashboard/resources/invoice/Invoice.js new file mode 100644 index 0000000..e69de29 diff --git a/app/dashboard/resources/payments/createPayments/Page.js b/app/dashboard/resources/payments/createPayments/Page.js new file mode 100644 index 0000000..5e7768a --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/app/dashboard/resources/payments/createPayments/components/createPayment.js b/app/dashboard/resources/payments/createPayments/components/createPayment.js new file mode 100644 index 0000000..19b45f3 --- /dev/null +++ b/app/dashboard/resources/payments/createPayments/components/createPayment.js @@ -0,0 +1,171 @@ +import { useState, useEffect } from 'react'; +import { useRouter } from 'next/router'; + +export default function CreatePayment() { + const [isMounted, setIsMounted] = useState(false); // Guard for SSR issues + const router = useRouter(); + + const [formData, setFormData] = useState({ + title: '', + description: '', + amount: '', + min_amount: '', + max_amount: '', + payment_method: '', + reoccurring_limit: '', + valid_to: '', + }); + + const [isEditMode, setIsEditMode] = useState(false); + + // Get Bearer token from the cookie + const getBearerToken = () => { + const cookieValue = document.cookie + .split('; ') + .find((row) => row.startsWith('analogueshifts=')) + ?.split('=')[1]; + return cookieValue || ''; + }; + + // Ensure the component only accesses the router when mounted on the client + useEffect(() => { + setIsMounted(true); // Mark as mounted on client-side + }, []); + + // Populate the form with query parameters when in edit mode (only on client) + useEffect(() => { + if (isMounted && router.query.title) { + setFormData({ + title: router.query.title || '', + description: router.query.description || '', + amount: router.query.amount || '', + min_amount: router.query.min_amount || '', + max_amount: router.query.max_amount || '', + payment_method: router.query.payment_method || '', + reoccurring_limit: router.query.reoccurring_limit || '', + valid_to: router.query.validity_period || '', + }); + setIsEditMode(true); + } + }, [isMounted, router.query]); + + // Handle input change + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + // Handle form submission (either create or update) + const handleSubmit = async () => { + const token = getBearerToken(); + + const apiUrl = isEditMode + ? 'https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c' // PUT request for editing payment + : 'https://api.analogueshifts.com/api/tool/pay'; // POST request for creating payment + + const response = await fetch(apiUrl, { + method: isEditMode ? 'PUT' : 'POST', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + title: formData.title, + description: formData.description, + amount: parseFloat(formData.amount), + min_amount: parseFloat(formData.min_amount), + max_amount: parseFloat(formData.max_amount), + payment_method: formData.payment_method || null, + reoccurring_limit: parseFloat(formData.reoccurring_limit), + valid_to: new Date(formData.valid_to).toISOString(), + status: true, + }), + }); + + if (response.ok) { + const result = await response.json(); + alert(isEditMode ? 'Payment updated successfully!' : 'Payment created successfully!'); + console.log(result); + } else { + const error = await response.json(); + alert('Error: ' + error.message); + } + }; + + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/app/dashboard/resources/payments/individualPayments/individualPayments.js b/app/dashboard/resources/payments/individualPayments/individualPayments.js new file mode 100644 index 0000000..36578b0 --- /dev/null +++ b/app/dashboard/resources/payments/individualPayments/individualPayments.js @@ -0,0 +1,53 @@ +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; + +export default function PaymentDetail() { + const router = useRouter(); + const { paymentId } = router.query; + const [payment, setPayment] = useState(null); + + // Get Bearer token from the cookie + const getBearerToken = () => { + const cookieValue = document.cookie + .split('; ') + .find((row) => row.startsWith('analogueshifts=')) + ?.split('=')[1]; + return cookieValue || ''; + }; + + // Fetch the individual payment data + useEffect(() => { + async function fetchPaymentDetail() { + const token = getBearerToken(); + const response = await fetch(`https://api.analogueshifts.com/api/tool/pay/${paymentId}`, { + method: 'GET', + headers: { + 'Authorization': `Bearer ${token}`, + }, + }); + const data = await response.json(); + setPayment(data); + } + + if (paymentId) { + fetchPaymentDetail(); + } + }, [paymentId]); + + if (!payment) { + return
Loading...
; + } + + return ( +
+

Payment Detail

+

Title: {payment.title}

+

Description: {payment.description}

+

Amount: {payment.amount} NGN

+

Min Amount: {payment.min_amount} NGN

+

Max Amount: {payment.max_amount} NGN

+

Limit: {payment.reoccurring_limit}

+

Valid Until: {new Date(payment.valid_to).toLocaleDateString()}

+
+ ); +} diff --git a/app/dashboard/resources/payments/listOfPayments/listOfPayments.js b/app/dashboard/resources/payments/listOfPayments/listOfPayments.js new file mode 100644 index 0000000..1deb4aa --- /dev/null +++ b/app/dashboard/resources/payments/listOfPayments/listOfPayments.js @@ -0,0 +1,49 @@ +import { useEffect, useState } from 'react'; +import Image from 'next/image'; + +export default function PaymentList() { + const [payments, setPayments] = useState([]); + + // Get Bearer token from the cookie + const getBearerToken = () => { + const cookieValue = document.cookie + .split('; ') + .find((row) => row.startsWith('analogueshifts=')) + ?.split('=')[1]; + return cookieValue || ''; + }; + + // Fetch all public payments + useEffect(() => { + async function fetchPayments() { + const token = getBearerToken(); + const response = await fetch('https://api.analogueshifts.com/api/tool/pay/payments', { + method: 'GET', + headers: { + 'Authorization': `Bearer ${token}`, + }, + }); + const data = await response.json(); + setPayments(data); + } + fetchPayments(); + }, []); + + return ( +
+ {payments.map((payment, index) => ( +
+

+ +

+

+ {payment.title} +

+
+ ))} +
+ ); +} diff --git a/app/dashboard/resources/payments/makePayments/makePayments.js b/app/dashboard/resources/payments/makePayments/makePayments.js new file mode 100644 index 0000000..f1f01f6 --- /dev/null +++ b/app/dashboard/resources/payments/makePayments/makePayments.js @@ -0,0 +1,109 @@ +import { useState } from 'react'; + +export default function ProceedToPay() { + const [formData, setFormData] = useState({ + amount: '', + name: '', + email: '', + contact: '', + description: '', + }); + + // Get Bearer token from the cookie + const getBearerToken = () => { + const cookieValue = document.cookie + .split('; ') + .find((row) => row.startsWith('analogueshifts=')) + ?.split('=')[1]; + return cookieValue || ''; + }; + + // Handle input changes + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + // Handle form submission + const handleSubmit = async () => { + const token = getBearerToken(); + + const response = await fetch('https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c', { + method: 'POST', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + amount: formData.amount ? parseFloat(formData.amount) : null, // Set amount as null if empty + name: formData.name, + email: formData.email, + contact: formData.contact, + message: formData.description, // Mapping to 'message' field + }), + }); + + if (response.ok) { + const result = await response.json(); + alert('Payment details submitted successfully!'); + console.log(result); + } else { + const error = await response.json(); + alert('Error submitting payment: ' + error.message); + } + }; + + return ( +
+ + + + + + +
+ ); +} diff --git a/app/dashboard/resources/payments/page.js b/app/dashboard/resources/payments/page.js new file mode 100644 index 0000000..e9f74a5 --- /dev/null +++ b/app/dashboard/resources/payments/page.js @@ -0,0 +1,53 @@ +import Link from 'next/link'; +import Image from 'next/image'; + +export default function NavigationPage() { + return ( +
+ {/* Create Payment */} +
+

+ +

+

+ + Create Payment + +

+
+ + {/* Pay a Biller */} +
+

+ +

+

+ + Pay a Biller + +

+
+ + {/* View Existing Payments */} +
+

+ +

+

+ + View Existing Payments + +

+
+
+ ); +} diff --git a/app/dashboard/resources/payments/trasactions/viewPayment.js b/app/dashboard/resources/payments/trasactions/viewPayment.js new file mode 100644 index 0000000..083c545 --- /dev/null +++ b/app/dashboard/resources/payments/trasactions/viewPayment.js @@ -0,0 +1,116 @@ +import { useRouter } from 'next/router'; + +export default function PaymentDetails() { + const router = useRouter(); + + const paymentDetails = { + title: 'Lorem Ipsum', + description: 'Lorem Ipsum', + amount: 5000, + min_amount: 5000, + max_amount: 5000, + limit: 1, + validity_period: '2024-09-18', + }; + + // Get Bearer token from the cookie + const getBearerToken = () => { + const cookieValue = document.cookie + .split('; ') + .find((row) => row.startsWith('analogueshifts=')) + ?.split('=')[1]; + return cookieValue || ''; + }; + + // Handle End Payment (DELETE request) + const handleEndPayment = async () => { + const token = getBearerToken(); + + const response = await fetch('https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c', { + method: 'DELETE', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + }); + + if (response.ok) { + alert('Payment ended successfully!'); + } else { + const error = await response.json(); + alert('Error ending payment: ' + error.message); + } + }; + + // Redirect to payment page + const proceedToPay = () => { + // Replace the URL with your actual payment page link + router.push('@/components/resources/payments/makePayment'); + }; + + // Redirect to edit page with query parameters + const editPayment = () => { + router.push({ + pathname: '@/components/resources/payments/createPayment', + query: { + title: paymentDetails.title, + description: paymentDetails.description, + amount: paymentDetails.amount, + min_amount: paymentDetails.min_amount, + max_amount: paymentDetails.max_amount, + limit: paymentDetails.limit, + validity_period: paymentDetails.validity_period, + }, + }); + }; + + return ( +
+
+

+ Title: {paymentDetails.title} +

+

+ Description: {paymentDetails.description} +

+

+ Amount: {paymentDetails.amount} NGN +

+

+ Min-Amount: {paymentDetails.min_amount} NGN +

+

+ Max-Amount: {paymentDetails.max_amount} NGN +

+

+ Limit: {paymentDetails.limit} +

+

+ Validity-Period: {paymentDetails.validity_period} +

+
+
+ + + + + +
+
+ ); +} diff --git a/app/dashboard/resources/subscription/Subscription.js b/app/dashboard/resources/subscription/Subscription.js new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index bc6829f..eb7141f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "js-cookie": "^3.0.5", "next": "14.0.2", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^5.3.0" }, "devDependencies": { "autoprefixer": "^10.0.1", @@ -3440,6 +3441,15 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index f2bd061..ef4468f 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "js-cookie": "^3.0.5", "next": "14.0.2", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^5.3.0" }, "devDependencies": { "autoprefixer": "^10.0.1", From 3e4129aa2556ac763d41c1a46fb8ede0caed8cdd Mon Sep 17 00:00:00 2001 From: Leanstix Date: Wed, 2 Oct 2024 12:38:55 +0100 Subject: [PATCH 2/2] final commit --- app/createPayments/component/createPayment.js | 168 +++++++++++++++++ app/createPayments/page.js | 10 + app/dashboard/component/TransactionHistory.js | 2 +- .../resources/payments/createPayments/Page.js | 10 - .../components/createPayment.js | 171 ------------------ .../page.js} | 1 + .../resources/invoice/Invoice.js | 0 .../individualPayments/individualPayments.js | 0 .../payments/makePayments/makePayments.js | 71 ++++---- .../resources/payments/page.js | 6 +- .../payments/trasactions/viewPayment.js | 50 +---- .../resources/subscription/Subscription.js | 0 12 files changed, 221 insertions(+), 268 deletions(-) create mode 100644 app/createPayments/component/createPayment.js create mode 100644 app/createPayments/page.js delete mode 100644 app/dashboard/resources/payments/createPayments/Page.js delete mode 100644 app/dashboard/resources/payments/createPayments/components/createPayment.js rename app/{dashboard/resources/payments/listOfPayments/listOfPayments.js => listOfPayments/page.js} (95%) rename app/{dashboard => }/resources/invoice/Invoice.js (100%) rename app/{dashboard => }/resources/payments/individualPayments/individualPayments.js (100%) rename app/{dashboard => }/resources/payments/makePayments/makePayments.js (55%) rename app/{dashboard => }/resources/payments/page.js (86%) rename app/{dashboard => }/resources/payments/trasactions/viewPayment.js (56%) rename app/{dashboard => }/resources/subscription/Subscription.js (100%) diff --git a/app/createPayments/component/createPayment.js b/app/createPayments/component/createPayment.js new file mode 100644 index 0000000..3554f59 --- /dev/null +++ b/app/createPayments/component/createPayment.js @@ -0,0 +1,168 @@ +"use client" +import { useState, useEffect } from 'react'; +// import { useRouter } from 'next/router'; + +export default function CreatePayment() { + const [isMounted, setIsMounted] = useState(false); // Guard for SSR issues + // const router = useRouter(); + + const [formData, setFormData] = useState({ + title: 'Sample Title', + description: 'Sample Description', + amount: '100', + min_amount: '50', + max_amount: '200', + payment_method: 'Credit Card', + reoccurring_limit: '12', + valid_to: '2024-12-31', + }); + + const [isEditMode, setIsEditMode] = useState(false); + + // Get Bearer token from the cookie (client-side only) + // const getBearerToken = () => { + // if (typeof window === 'undefined') return ''; // Ensure it's only accessed client-side + // const cookieValue = document.cookie + // .split('; ') + // .find((row) => row.startsWith('analogueshifts=')) + // ?.split('=')[1]; + // return cookieValue || ''; + // }; + + // Populate the form with query parameters when in edit mode (only on client) + // useEffect(() => { + // if (isMounted && router.query.title) { + // setFormData({ + // title: router.query.title || '', + // description: router.query.description || '', + // amount: router.query.amount || '', + // min_amount: router.query.min_amount || '', + // max_amount: router.query.max_amount || '', + // payment_method: router.query.payment_method || '', + // reoccurring_limit: router.query.reoccurring_limit || '', + // valid_to: router.query.validity_period || '', + // }); + // setIsEditMode(true); + // } + // }, [isMounted, router.query]); + + // Handle input change + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + // Handle form submission (either create or update) + // const handleSubmit = async () => { + // const token = getBearerToken(); + + // const apiUrl = isEditMode + // ? 'https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c' // PUT request for editing payment + // : 'https://api.analogueshifts.com/api/tool/pay'; // POST request for creating payment + + // const response = await fetch(apiUrl, { + // method: isEditMode ? 'PUT' : 'POST', + // headers: { + // 'Authorization': `Bearer ${token}`, + // 'Content-Type': 'application/json', + // }, + // body: JSON.stringify({ + // title: formData.title, + // description: formData.description, + // amount: parseFloat(formData.amount), + // min_amount: parseFloat(formData.min_amount), + // max_amount: parseFloat(formData.max_amount), + // payment_method: formData.payment_method || null, + // reoccurring_limit: parseFloat(formData.reoccurring_limit), + // valid_to: new Date(formData.valid_to).toISOString(), + // status: true, + // }), + // }); + + // if (response.ok) { + // const result = await response.json(); + // alert(isEditMode ? 'Payment updated successfully!' : 'Payment created successfully!'); + // console.log(result); + // } else { + // const error = await response.json(); + // alert('Error: ' + error.message); + // } + // }; + + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/app/createPayments/page.js b/app/createPayments/page.js new file mode 100644 index 0000000..569bfcb --- /dev/null +++ b/app/createPayments/page.js @@ -0,0 +1,10 @@ +"use client" +import CreatePayment from "./component/createPayment"; // Adjust path if needed + +export default function DashboardPage() { + return ( +
+ +
+ ); +} diff --git a/app/dashboard/component/TransactionHistory.js b/app/dashboard/component/TransactionHistory.js index a5dda0b..edfea05 100644 --- a/app/dashboard/component/TransactionHistory.js +++ b/app/dashboard/component/TransactionHistory.js @@ -1,6 +1,6 @@ import { useState } from 'react'; import { FaEye, FaEyeSlash } from 'react-icons/fa'; -import NavigationPage from '../resources/payments/page'; +import NavigationPage from '@/app/resources/payments/page'; export default function UserDashboard() { const [balanceVisible, setBalanceVisible] = useState(false); // Balance visibility diff --git a/app/dashboard/resources/payments/createPayments/Page.js b/app/dashboard/resources/payments/createPayments/Page.js deleted file mode 100644 index 5e7768a..0000000 --- a/app/dashboard/resources/payments/createPayments/Page.js +++ /dev/null @@ -1,10 +0,0 @@ -"use client" -import CreatePayment from './components/createPayment'; // Adjust path if needed - -export default function Page() { - return ( -
- -
- ); -} diff --git a/app/dashboard/resources/payments/createPayments/components/createPayment.js b/app/dashboard/resources/payments/createPayments/components/createPayment.js deleted file mode 100644 index 19b45f3..0000000 --- a/app/dashboard/resources/payments/createPayments/components/createPayment.js +++ /dev/null @@ -1,171 +0,0 @@ -import { useState, useEffect } from 'react'; -import { useRouter } from 'next/router'; - -export default function CreatePayment() { - const [isMounted, setIsMounted] = useState(false); // Guard for SSR issues - const router = useRouter(); - - const [formData, setFormData] = useState({ - title: '', - description: '', - amount: '', - min_amount: '', - max_amount: '', - payment_method: '', - reoccurring_limit: '', - valid_to: '', - }); - - const [isEditMode, setIsEditMode] = useState(false); - - // Get Bearer token from the cookie - const getBearerToken = () => { - const cookieValue = document.cookie - .split('; ') - .find((row) => row.startsWith('analogueshifts=')) - ?.split('=')[1]; - return cookieValue || ''; - }; - - // Ensure the component only accesses the router when mounted on the client - useEffect(() => { - setIsMounted(true); // Mark as mounted on client-side - }, []); - - // Populate the form with query parameters when in edit mode (only on client) - useEffect(() => { - if (isMounted && router.query.title) { - setFormData({ - title: router.query.title || '', - description: router.query.description || '', - amount: router.query.amount || '', - min_amount: router.query.min_amount || '', - max_amount: router.query.max_amount || '', - payment_method: router.query.payment_method || '', - reoccurring_limit: router.query.reoccurring_limit || '', - valid_to: router.query.validity_period || '', - }); - setIsEditMode(true); - } - }, [isMounted, router.query]); - - // Handle input change - const handleChange = (e) => { - const { name, value } = e.target; - setFormData((prevData) => ({ - ...prevData, - [name]: value, - })); - }; - - // Handle form submission (either create or update) - const handleSubmit = async () => { - const token = getBearerToken(); - - const apiUrl = isEditMode - ? 'https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c' // PUT request for editing payment - : 'https://api.analogueshifts.com/api/tool/pay'; // POST request for creating payment - - const response = await fetch(apiUrl, { - method: isEditMode ? 'PUT' : 'POST', - headers: { - 'Authorization': `Bearer ${token}`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - title: formData.title, - description: formData.description, - amount: parseFloat(formData.amount), - min_amount: parseFloat(formData.min_amount), - max_amount: parseFloat(formData.max_amount), - payment_method: formData.payment_method || null, - reoccurring_limit: parseFloat(formData.reoccurring_limit), - valid_to: new Date(formData.valid_to).toISOString(), - status: true, - }), - }); - - if (response.ok) { - const result = await response.json(); - alert(isEditMode ? 'Payment updated successfully!' : 'Payment created successfully!'); - console.log(result); - } else { - const error = await response.json(); - alert('Error: ' + error.message); - } - }; - - return ( -
- - - - - - - - - -
- ); -} diff --git a/app/dashboard/resources/payments/listOfPayments/listOfPayments.js b/app/listOfPayments/page.js similarity index 95% rename from app/dashboard/resources/payments/listOfPayments/listOfPayments.js rename to app/listOfPayments/page.js index 1deb4aa..7b6592f 100644 --- a/app/dashboard/resources/payments/listOfPayments/listOfPayments.js +++ b/app/listOfPayments/page.js @@ -1,3 +1,4 @@ +"use client" import { useEffect, useState } from 'react'; import Image from 'next/image'; diff --git a/app/dashboard/resources/invoice/Invoice.js b/app/resources/invoice/Invoice.js similarity index 100% rename from app/dashboard/resources/invoice/Invoice.js rename to app/resources/invoice/Invoice.js diff --git a/app/dashboard/resources/payments/individualPayments/individualPayments.js b/app/resources/payments/individualPayments/individualPayments.js similarity index 100% rename from app/dashboard/resources/payments/individualPayments/individualPayments.js rename to app/resources/payments/individualPayments/individualPayments.js diff --git a/app/dashboard/resources/payments/makePayments/makePayments.js b/app/resources/payments/makePayments/makePayments.js similarity index 55% rename from app/dashboard/resources/payments/makePayments/makePayments.js rename to app/resources/payments/makePayments/makePayments.js index f1f01f6..587be00 100644 --- a/app/dashboard/resources/payments/makePayments/makePayments.js +++ b/app/resources/payments/makePayments/makePayments.js @@ -2,22 +2,13 @@ import { useState } from 'react'; export default function ProceedToPay() { const [formData, setFormData] = useState({ - amount: '', - name: '', - email: '', - contact: '', - description: '', + amount: '100', + name: 'John Doe', + email: 'john.doe@example.com', + contact: '1234567890', + description: 'Sample payment description', }); - // Get Bearer token from the cookie - const getBearerToken = () => { - const cookieValue = document.cookie - .split('; ') - .find((row) => row.startsWith('analogueshifts=')) - ?.split('=')[1]; - return cookieValue || ''; - }; - // Handle input changes const handleChange = (e) => { const { name, value } = e.target; @@ -28,33 +19,33 @@ export default function ProceedToPay() { }; // Handle form submission - const handleSubmit = async () => { - const token = getBearerToken(); + // const handleSubmit = async () => { + // const token = getBearerToken(); - const response = await fetch('https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c', { - method: 'POST', - headers: { - 'Authorization': `Bearer ${token}`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - amount: formData.amount ? parseFloat(formData.amount) : null, // Set amount as null if empty - name: formData.name, - email: formData.email, - contact: formData.contact, - message: formData.description, // Mapping to 'message' field - }), - }); + // const response = await fetch('https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c', { + // method: 'POST', + // headers: { + // 'Authorization': `Bearer ${token}`, + // 'Content-Type': 'application/json', + // }, + // body: JSON.stringify({ + // amount: formData.amount ? parseFloat(formData.amount) : null, // Set amount as null if empty + // name: formData.name, + // email: formData.email, + // contact: formData.contact, + // message: formData.description, // Mapping to 'message' field + // }), + // }); - if (response.ok) { - const result = await response.json(); - alert('Payment details submitted successfully!'); - console.log(result); - } else { - const error = await response.json(); - alert('Error submitting payment: ' + error.message); - } - }; + // if (response.ok) { + // const result = await response.json(); + // alert('Payment details submitted successfully!'); + // console.log(result); + // } else { + // const error = await response.json(); + // alert('Error submitting payment: ' + error.message); + // } + // }; return (
@@ -100,7 +91,7 @@ export default function ProceedToPay() { /> diff --git a/app/dashboard/resources/payments/page.js b/app/resources/payments/page.js similarity index 86% rename from app/dashboard/resources/payments/page.js rename to app/resources/payments/page.js index e9f74a5..9e958da 100644 --- a/app/dashboard/resources/payments/page.js +++ b/app/resources/payments/page.js @@ -13,7 +13,7 @@ export default function NavigationPage() { />

- + Create Payment

@@ -28,7 +28,7 @@ export default function NavigationPage() { />

- + Pay a Biller

@@ -43,7 +43,7 @@ export default function NavigationPage() { />

- + View Existing Payments

diff --git a/app/dashboard/resources/payments/trasactions/viewPayment.js b/app/resources/payments/trasactions/viewPayment.js similarity index 56% rename from app/dashboard/resources/payments/trasactions/viewPayment.js rename to app/resources/payments/trasactions/viewPayment.js index 083c545..65c2252 100644 --- a/app/dashboard/resources/payments/trasactions/viewPayment.js +++ b/app/resources/payments/trasactions/viewPayment.js @@ -13,55 +13,19 @@ export default function PaymentDetails() { validity_period: '2024-09-18', }; - // Get Bearer token from the cookie - const getBearerToken = () => { - const cookieValue = document.cookie - .split('; ') - .find((row) => row.startsWith('analogueshifts=')) - ?.split('=')[1]; - return cookieValue || ''; + // Handle End Payment (dummy function) + const handleEndPayment = () => { + alert('Payment ended successfully!'); }; - // Handle End Payment (DELETE request) - const handleEndPayment = async () => { - const token = getBearerToken(); - - const response = await fetch('https://api.analogueshifts.com/api/tool/pay/9d312d2a-5738-33d2-9b10-72ccc46ab58c', { - method: 'DELETE', - headers: { - 'Authorization': `Bearer ${token}`, - 'Content-Type': 'application/json', - }, - }); - - if (response.ok) { - alert('Payment ended successfully!'); - } else { - const error = await response.json(); - alert('Error ending payment: ' + error.message); - } - }; - - // Redirect to payment page + // Redirect to payment page (dummy function) const proceedToPay = () => { - // Replace the URL with your actual payment page link - router.push('@/components/resources/payments/makePayment'); + alert('Redirecting to the payment page...'); }; - // Redirect to edit page with query parameters + // Redirect to edit page with query parameters (dummy function) const editPayment = () => { - router.push({ - pathname: '@/components/resources/payments/createPayment', - query: { - title: paymentDetails.title, - description: paymentDetails.description, - amount: paymentDetails.amount, - min_amount: paymentDetails.min_amount, - max_amount: paymentDetails.max_amount, - limit: paymentDetails.limit, - validity_period: paymentDetails.validity_period, - }, - }); + alert('Redirecting to the edit payment page...'); }; return ( diff --git a/app/dashboard/resources/subscription/Subscription.js b/app/resources/subscription/Subscription.js similarity index 100% rename from app/dashboard/resources/subscription/Subscription.js rename to app/resources/subscription/Subscription.js