diff --git a/src/app/dashboard/admin/transactions/components/Chart.tsx b/src/app/dashboard/admin/transactions/components/Chart.tsx new file mode 100644 index 0000000..43b74a8 --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/Chart.tsx @@ -0,0 +1,83 @@ +export interface ChartData { + label: string; + value: number; + color: string; +} + +interface ChartProps { + data: ChartData[]; + size?: number; +} + +const Chart: React.FC = ({ data, size = 200 }) => { + const radius = (size - 40) / 2; // 40 = strokeWidth + const strokeWidth = 40; + const center = size / 2; + const circumference = 2 * Math.PI * radius; + + let cumulativePercent = 0; + + return ( +
+ + {/* Centered background ring */} + + + {/* Colored segments */} + {data.map((item, index) => { + const percent = item.value / 100; + const strokeLength = percent * circumference; + const strokeGap = circumference - strokeLength; + + const dashArray = `${strokeLength} ${strokeGap}`; + const dashOffset = -cumulativePercent * circumference; + + cumulativePercent += percent; + + return ( + + ); + })} + + + {/* Donut center */} +
+
+ ); +}; + +export default Chart; + diff --git a/src/app/dashboard/admin/transactions/components/ChartLegend.tsx b/src/app/dashboard/admin/transactions/components/ChartLegend.tsx new file mode 100644 index 0000000..82e2bd8 --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/ChartLegend.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import type { ChartData } from './Chart'; + +interface ChartLegendProps { + data: ChartData[]; + } + + const ChartLegend: React.FC = ({ data }) => ( +
+ {data.map((item, index) => ( +
+
+ + {item.value}% {item.label} + +
+ ))} +
+ ); + +export default ChartLegend; \ No newline at end of file diff --git a/src/app/dashboard/admin/transactions/components/NFTDetailModal.tsx b/src/app/dashboard/admin/transactions/components/NFTDetailModal.tsx new file mode 100644 index 0000000..aa4bf5c --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/NFTDetailModal.tsx @@ -0,0 +1,277 @@ +import React from "react"; +import { X, ArrowUpRight } from "lucide-react"; +import type { NFTMinting } from "./NFTMintingTable"; +import Image from "next/image"; + +interface NFTDetailModalProps { + isOpen: boolean; + onClose: () => void; + nft: NFTMinting | null; + onRetryMinting?: (nft: NFTMinting) => void; +} + +const NFTDetailModal: React.FC = ({ + isOpen, + onClose, + nft, + onRetryMinting, +}) => { + if (!isOpen || !nft) return null; + + const isSuccessful = nft.status === "Minted"; + const isFailed = nft.status === "Failed"; + + return ( +
+
+ {/* Header */} +
+

{nft.title}

+ +
+ +
+ {/* Top Section - Book Info */} +
+ {/* Left: Book Details */} +
+ {/* Book Cover */} +
+ Book Cover +
+ + {/* Book Info */} +
+

{nft.title}

+ +
+ By {nft.author} + {/* Verified icon */} + + + +
+ +
+ + NFT Edition + +
+ +
+ ★ + 4.5 +
+
+
+ +
+ {isFailed && onRetryMinting && ( + + )} +
+
+ + {/* Detail Stat Boxes */} +
+
+
Payment Type
+
+ One-Time Payment +
+
+
+
Price
+
+ {nft.feeAmount} +
+
+
+
Published Date
+
+ {nft.mintDate} +
+
+
+
Sold
+
57
+
+
+
Transaction
+
+ + All Transactions +
+
+
+ + {/* Blockchain Details Section */} +
+

+ Blockchain Details +

+ +
+
+
+ Smart Contract Address +
+
+ {nft.smartContractAddress || "0x9f...d45A"} +
+
+
+
Token Standard
+
+ {nft.tokenStandard || "ERC-721"} +
+
+
+
Network
+
+ {nft.network} +
+
+
+
Status
+
+ + {isSuccessful ? "Successful" : nft.status} + +
+
+
+
Fee Amount
+
+ {nft.smartContractAddress || "0x9f...d45A"} +
+
+
+
Fee Amount
+
+ starknet icon + + {nft.feeAmount} + +
+
+
+
Mint Date
+
+ {nft.mintDate} +
+
+
+
+ + {/* Description Section */} +
+

+ Description +

+
+

+ {nft.description || + "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era."} +

+ +
+
+ + {/* Additional Details Grid */} +
+
+
Genre(s)
+
+ + Fiction + + + Comic + +
+
+
+
Page count
+
+ 21 Pages +
+
+
+
Language
+
English
+
+
+
Date published
+
+ 12 April, 2025 +
+
+
+
ISBN
+
+ 978-3-16-148410-0 +
+
+
+ + {/* Action Buttons */} + {/*
+ + +
*/} +
+
+
+ ); +}; + +export default NFTDetailModal; diff --git a/src/app/dashboard/admin/transactions/components/NFTMintingTable.tsx b/src/app/dashboard/admin/transactions/components/NFTMintingTable.tsx new file mode 100644 index 0000000..5574b1c --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/NFTMintingTable.tsx @@ -0,0 +1,120 @@ +// NFTMintingTable.tsx +import React from "react"; +import Image from "next/image"; + +export interface NFTMinting { + id: string; + title: string; + author: string; + feeAmount: string; + network: string; + mintDate: string; + status: "Minted" | "Failed" | "Pending"; + coverImage?: string; + smartContractAddress?: string; + tokenStandard?: string; + transactionHash?: string; + confirmationStatus?: string; + description?: string; + genres?: string[]; + pageCount?: number; + language?: string; + isbn?: string; +} + +interface NFTMintingTableProps { + nftMinings: NFTMinting[]; + onViewMore: (nft: NFTMinting) => void; +} + +const NFTMintingTable: React.FC = ({ + nftMinings, + onViewMore, +}) => { + return ( +
+ + + + + + + + + + + + + + {nftMinings.map((nft, index) => ( + + + + + + + + + + ))} + +
+ Cover + + Title and Author + + Fee Amount + + Network + + Mint Date + + Status +
+
+ 		+
+
+ {nft.title} +
+
by {nft.author}
+
+ 		+
+ starknet icon + {nft.feeAmount} +
+ 		+ {nft.network} + + {nft.mintDate} + + + {nft.status} + + + +
+
+ ); +}; + +export default NFTMintingTable; diff --git a/src/app/dashboard/admin/transactions/components/Pagination.tsx b/src/app/dashboard/admin/transactions/components/Pagination.tsx new file mode 100644 index 0000000..74707dd --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/Pagination.tsx @@ -0,0 +1,23 @@ +import { ChevronDown } from "lucide-react"; + +interface PaginationProps { + currentItems: number; + totalItems: number; + itemsPerPage: number; + } + + const Pagination: React.FC = ({ currentItems, totalItems}) => ( +
+
+ Showing 1 to {currentItems} of {totalItems} +
+
+ + +
+
+ ); + +export default Pagination \ No newline at end of file diff --git a/src/app/dashboard/admin/transactions/components/PayoutRequestDetailModal.tsx b/src/app/dashboard/admin/transactions/components/PayoutRequestDetailModal.tsx new file mode 100644 index 0000000..24c84dc --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/PayoutRequestDetailModal.tsx @@ -0,0 +1,157 @@ +import React from "react"; +import { X, Link2Off } from "lucide-react"; +import type { PayoutRequest } from "./PayoutRequestTable"; +import Image from "next/image"; + +interface PayoutRequestDetailModalProps { + isOpen: boolean; + onClose: () => void; + request: PayoutRequest | null; + onApprove: (request: PayoutRequest) => void; + onDecline: (request: PayoutRequest) => void; +} + +const PayoutRequestDetailModal: React.FC = ({ + isOpen, + onClose, + request, + // onApprove, + // onDecline, +}) => { + if (!isOpen || !request) return null; + + return ( +
+
+
+

+ Payment Request Details +

+ +
+ +
+
+ {/* User Info */} +
+
+
+

+ Nana_Hamza +

+

nanahamza@gmail.com

+
+
+ + {/* Wallet Info */} +
+
+ Braavos +
+
+ + 0x04a093c37ab61065d001550089b108...979 + + + +
+
+ +
+ {/* Left Column */} +
+
+

Transaction Type

+

Withdraw

+
+
+

Status

+

+ Pending +

+
+
+

Request Date

+

12 March, 2025

+
+
+

Time

+

16:32

+
+
+ + {/* Right Column */} +
+
+

Amount to Paid

+
+ STRK +

800.00 STRK

+
+
+
+

Gas fee

+
+ STRK +

-80.00 STRK

+
+
+
+

To be Paid

+
+ STRK +

720.00 STRK

+
+
+
+
+ + {/* Action Buttons */} +
+ + +
+
+
+
+
+ ); +}; + +export default PayoutRequestDetailModal; diff --git a/src/app/dashboard/admin/transactions/components/PayoutRequestTable.tsx b/src/app/dashboard/admin/transactions/components/PayoutRequestTable.tsx new file mode 100644 index 0000000..d62fe67 --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/PayoutRequestTable.tsx @@ -0,0 +1,109 @@ +import React from 'react'; +import Image from 'next/image'; + +export interface PayoutRequest { + author: string; + email: string; + amount: string; + walletAddress: string; + requestDate: string; + status: string; +} + +interface PayoutRequestTableProps { + requests: PayoutRequest[]; + onApprove: (request: PayoutRequest) => void; + onDecline: (request: PayoutRequest) => void; + onRowClick: (request: PayoutRequest) => void; +} + +const PayoutRequestTable: React.FC = ({ + requests, + onApprove, + onDecline, + onRowClick +}) => ( +
+ + + + {[ + "Author", + "Amount", + "Wallet Address", + "Request Date", + "Status", + "Actions" + ].map((header) => ( + + ))} + + + + {requests.map((request, index) => ( + onRowClick(request)} + > + + + + + + + + ))} + +
+ {header} +
+
+
{request.author}
+
{request.email}
+
+ 		+
+ starknet icon + {request.amount} +
+ 		+ {request.walletAddress} + + {request.requestDate} + + + {request.status} + + + + +
+
+); + +export default PayoutRequestTable; diff --git a/src/app/dashboard/admin/transactions/components/SearchFilterBar.tsx b/src/app/dashboard/admin/transactions/components/SearchFilterBar.tsx new file mode 100644 index 0000000..0d5312c --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/SearchFilterBar.tsx @@ -0,0 +1,29 @@ +import TimeFilter from "./TimeFilter"; + +interface SearchFilterBarProps { + timeFilter: string; + onTimeFilterChange: (filter: string) => void; + searchPlaceholder?: string; +} + +const SearchFilterBar: React.FC = ({ + timeFilter, + onTimeFilterChange, +}) => ( +
+
+ {/* Time Filter on the left */} + + + {/* Button on the right */} + +
+
+ +); +export default SearchFilterBar; diff --git a/src/app/dashboard/admin/transactions/components/StatsCard.tsx b/src/app/dashboard/admin/transactions/components/StatsCard.tsx new file mode 100644 index 0000000..443e720 --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/StatsCard.tsx @@ -0,0 +1,57 @@ +import Image from "next/image"; + +interface StatsCardProps { + title: string; + value: string; + currency?: string; + growth?: string; + variant?: "default" | "primary"; + size?: "small" | "large"; + currencyTextSize?: string; + currencyFontWeight?: string; + classname?: string; +} + +const StatsCard: React.FC = ({ + title, + value, + currency, + growth, + variant = "default", + size = "large", + currencyTextSize = "text-sm", + currencyFontWeight = "font-normal", +}) => { + const cardClass = + variant === "primary" + ? "bg-[#edf7ff] border-[#edf7ff]" + : "bg-white border-gray-200"; + + const textSize = size === "large" ? "text-3xl" : "text-lg"; + const paddingClass = size === "large" ? "p-6" : "p-4"; + const heightClass = size === "large" ? "h-full" : "h-20"; + const alignmentClass = size === "large" ? "justify-center items-center text-center" : "justify-center"; + + return ( +
+

{title}

+
+ {currency && ( + strk + )} + + {value} {currency && {currency}} + +
+ {growth && ( + + {growth} + + )} +
+ ); +}; + +export default StatsCard; diff --git a/src/app/dashboard/admin/transactions/components/SubscriptionTable.tsx b/src/app/dashboard/admin/transactions/components/SubscriptionTable.tsx new file mode 100644 index 0000000..0f3d22b --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/SubscriptionTable.tsx @@ -0,0 +1,78 @@ +import Image from "next/image"; + +export interface Subscription { + id: string; + type: string; + amount: string; + user: string; + userName: string; + status: string; + date: string; +} + +interface SubscriptionTableProps { + transactions: Subscription[]; +} + +const SubscriptionTable: React.FC = ({ + transactions, +}) => { + // Only keep "Successful" and "Failed" transactions + const filtered = transactions.filter(tx => + tx.status === "Successful" || tx.status === "Failed" + ); + + return ( +
+ + + + + + + + + + + + + + + {filtered.map((transaction, index) => ( + + + + + + + + + + + ))} + +
Transaction IDTransaction TypeAmount (STRK)UserUser NameStatusDate
{transaction.id}{transaction.type} +
+ starknet icon + {transaction.amount} +
+ 		{transaction.user}{transaction.userName} + + {transaction.status} + + {transaction.date} + +
+
+ ); +}; + +export default SubscriptionTable; diff --git a/src/app/dashboard/admin/transactions/components/TabNavigation.tsx b/src/app/dashboard/admin/transactions/components/TabNavigation.tsx new file mode 100644 index 0000000..32e6810 --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/TabNavigation.tsx @@ -0,0 +1,59 @@ +import { Search, Filter } from "lucide-react"; + +export interface Tab { + name: string; + badge?: string; + active?: boolean; +} + +interface TabNavigationProps { + tabs: Tab[]; + activeTab: string; + onTabClick: (tab: string) => void; + // searchPlaceholder?: string; +} + +const TabNavigation: React.FC = ({ tabs, activeTab, onTabClick }) => ( +
+
+ {tabs.map((tab) => ( + + ))} +
+ +
+
+ + +
+ + +
+
+); + +export default TabNavigation; + diff --git a/src/app/dashboard/admin/transactions/components/TimeFilter.tsx b/src/app/dashboard/admin/transactions/components/TimeFilter.tsx new file mode 100644 index 0000000..47c9168 --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/TimeFilter.tsx @@ -0,0 +1,56 @@ +interface TimeFilterProps { + activeFilter: string; + onFilterChange: (filter: string) => void; + showDateRange?: boolean; + showApplyButton?: boolean; + } + + const TimeFilter: React.FC = ({ + activeFilter, + onFilterChange, + showDateRange = true, + showApplyButton = true + }) => { + const filters = ['This Week', 'This Month', 'This Year', 'All Time']; + + return ( +
+ {filters.map((filter) => ( + + ))} + + {showDateRange && ( +
+ + to + + {showApplyButton && ( + + )} +
+ )} +
+ ); + }; + +export default TimeFilter; \ No newline at end of file diff --git a/src/app/dashboard/admin/transactions/components/TransactionDetailModal.tsx b/src/app/dashboard/admin/transactions/components/TransactionDetailModal.tsx new file mode 100644 index 0000000..5b1b17f --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/TransactionDetailModal.tsx @@ -0,0 +1,193 @@ +import Image from "next/image"; +import { X, Download } from "lucide-react"; + +export interface Transaction { + type: "Subscription" | "Purchase" | string; + amount: string; + status: "Successful" | "Failed" | string; + bookTitle?: string; + userName: string; +} + +interface TransactionDetailModalProps { + isOpen: boolean; + onClose: () => void; + transaction: Transaction | null; +} + +const TransactionDetailModal: React.FC = ({ + isOpen, + onClose, + transaction, +}) => { + if (!isOpen || !transaction) return null; + + return ( +
+
+ + {/* Header */} +
+

+ {transaction.type === "Purchase" + ? "Book Purchase Details" + : transaction.type === "Subscription" + ? "Subscription Details" + : "Transaction Details"} +

+ +
+ +
+ {/* Top Section - Book Info and Payment Breakdown */} +
+ {/* Left - Book Info */} +
+
+
+
+

+ {transaction.bookTitle && transaction.bookTitle !== "-" + ? transaction.bookTitle + : "99 Laws of Power"} +

+

Series

+

Regular Book

+
+
+
+ + {/* Right - Payment Breakdown */} +
+
+ Amount + 800.00 STRK +
+
+ Royalty Earned + 80.00 STRK +
+
+ Platform Commission + 80.00 STRK +
+
+ Total Paid +
+ starknet icon + 916.00 STRK +
+
+
+
+ + {/* Bottom Section Transaction Details */} +
+ {/* Left Column */} +
+
+ + Transaction Type + + Book Purchase +
+
+ Status + + {transaction.status} + +
+
+ Date + + 12 March, 2025 + +
+
+ Time + 16:32 +
+
+ + {/* Right Column */} +
+
+ Reader + + {transaction.userName} + +
+
+ + Transaction ID + + TRANS-00112 +
+
+ + Transaction Hash + +
+ + 0x5a3f7b...d6e7f8g + + + + +
+
+
+ + Confirmation Status + + 12/12 +
+
+
+ + {/* Action Buttons */} +
+ + +
+
+
+
+ ); +}; + +export default TransactionDetailModal; diff --git a/src/app/dashboard/admin/transactions/components/TransactionTable.tsx b/src/app/dashboard/admin/transactions/components/TransactionTable.tsx new file mode 100644 index 0000000..d87fd97 --- /dev/null +++ b/src/app/dashboard/admin/transactions/components/TransactionTable.tsx @@ -0,0 +1,106 @@ +import Image from "next/image"; + +export interface Transaction { + id: string; + type: string; + amount: string; + user: string; + userName: string; + bookTitle: string; + status: string; + date: string; +} + +interface TransactionTableProps { + transactions: Transaction[]; + onViewDetails: (tx: Transaction) => void; +} + +const TransactionTable: React.FC = ({ + transactions, onViewDetails +}) => ( +
+ + + + {[ + "Transaction ID", + "Transaction Type", + "Amount (STRK)", + "User", + "User Name", + "Book Title", + "Status", + "Date", + "", + ].map((header) => ( + + ))} + + + + {transactions.map((transaction, index) => ( + + + + + + + + + + + + ))} + +
+ {header} +
+ {transaction.id} + + {transaction.type} + +
+ starknet icon + {transaction.amount} +
+ 		+ {transaction.user} + + {transaction.userName} + + {transaction.bookTitle} + + + {transaction.status} + + + {transaction.date} + + +
+
+); + +export default TransactionTable; diff --git a/src/app/dashboard/admin/transactions/page.tsx b/src/app/dashboard/admin/transactions/page.tsx index 3698b6c..777d085 100644 --- a/src/app/dashboard/admin/transactions/page.tsx +++ b/src/app/dashboard/admin/transactions/page.tsx @@ -1,21 +1,495 @@ -"use-client"; +"use client"; +import { useState } from "react"; +import { Filter } from "lucide-react"; import { Header } from "@/components/dashboard/header"; +import Chart from "./components/Chart"; +import type { ChartData } from "./components/Chart"; +import ChartLegend from "./components/ChartLegend"; +import Pagination from "./components/Pagination"; +import SearchFilterBar from "./components/SearchFilterBar"; +import StatsCard from "./components/StatsCard"; +import TimeFilter from "./components/TimeFilter"; +import TabNavigation, {type Tab} from "./components/TabNavigation"; +import TransactionTable, {type Transaction} from "./components/TransactionTable"; +import TransactionDetailModal from "./components/TransactionDetailModal"; +import PayoutRequestTable, {type PayoutRequest} from "./components/PayoutRequestTable"; +import PayoutRequestDetailModal from "./components/PayoutRequestDetailModal"; +import SubscriptionTable, {type Subscription} from "./components/SubscriptionTable"; +import NFTMintingTable, { type NFTMinting } from "./components/NFTMintingTable"; +import NFTDetailModal from "./components/NFTDetailModal"; +const Transactions = () => { + const [activeTab, setActiveTab] = useState("Transaction History"); + const [timeFilter, setTimeFilter] = useState("This Week"); + const [salesTimeFilter, setSalesTimeFilter] = useState("This Week"); + const [tableTimeFilter, setTableTimeFilter] = useState("This Week"); + + // Transaction modal states + const [isTransactionModalOpen, setIsTransactionModalOpen] = useState(false); + const [selectedTransaction, setSelectedTransaction] = useState(null); + + // Payout modal states + const [isPayoutModalOpen, setIsPayoutModalOpen] = useState(false); + const [selectedPayoutRequest, setSelectedPayoutRequest] = useState(null); + + // NFT modal states + const [isNFTModalOpen, setIsNFTModalOpen] = useState(false); + const [selectedNFT, setSelectedNFT] = useState(null); -export default function Transactions() { + // Chart data + const chartData: ChartData[] = [ + { label: "Subscription", value: 45, color: "#096cff" }, + { label: "NFT Edition", value: 32, color: "#822ecb" }, + { label: "One Time Purchase", value: 23, color: "#b6e0ff" }, + ]; + // Tab configuration + const tabs: Tab[] = [ + { name: "Transaction History", active: true }, + { name: "Payout Request", badge: "27" }, + { name: "Subscription", active: false }, + { name: "NFT Minting", active: false }, + ]; + + // Sample transaction data + const transactionHistoryData: Transaction[] = [ + { + id: "Tran-124B", + type: "Subscription", + amount: "10.99 STRK", + user: "Reader", + userName: "jake_reader", + bookTitle: "-", + status: "Successful", + date: "26 April", + }, + { + id: "Tran-124B", + type: "Purchase", + amount: "76.09 STRK", + user: "Reader", + userName: "Paul_John", + bookTitle: "Book Purchase", + status: "Successful", + date: "25 April", + }, + { + id: "Tran-124B", + type: "Payout", + amount: "1560.00 STRK", + user: "Writer", + userName: "Nana_Hamza", + bookTitle: "-", + status: "Failed", + date: "20 April", + }, + { + id: "Tran-124B", + type: "Payout", + amount: "7.02 STRK", + user: "Writer", + userName: "Leo_17", + bookTitle: "-", + status: "Successful", + date: "18 April", + }, + { + id: "Tran-124B", + type: "Purchase", + amount: "8.09 STRK", + user: "Reader", + userName: "Lil_ma", + bookTitle: "Who Me Out", + status: "Successful", + date: "18 April", + }, + ]; + + // Payout request data + const payoutRequestData: PayoutRequest[] = [ + { + author: "Olu Ademola", + email: "oluade...@gmail.com", + amount: "500.67 STR", + walletAddress: "0xABC...789", + requestDate: "27 May,2025", + status: "Pending", + }, + { + author: "Olu Ademola", + email: "oluade...@gmail.com", + amount: "500.67 STR", + walletAddress: "0xABC...789", + requestDate: "27 May,2025", + status: "Pending", + }, + { + author: "Olu Ademola", + email: "oluade...@gmail.com", + amount: "500.67 STR", + walletAddress: "0xABC...789", + requestDate: "27 May,2025", + status: "Pending", + }, + { + author: "Olu Ademola", + email: "oluade...@gmail.com", + amount: "500.67 STR", + walletAddress: "0xABC...789", + requestDate: "27 May,2025", + status: "Pending", + }, + { + author: "Olu Ademola", + email: "oluade...@gmail.com", + amount: "500.67 STR", + walletAddress: "0xABC...789", + requestDate: "27 May,2025", + status: "Pending", + }, + ]; + + // Subscription data + const subscriptionData: Subscription[] = [ + { + id: "Sub-001", + type: "Monthly Subscription", + amount: "29.99 STRK", + user: "Reader", + userName: "alex_reader", + status: "Successful", + date: "28 July", + }, + { + id: "Sub-002", + type: "Annual Subscription", + amount: "299.99 STRK", + user: "Reader", + userName: "sarah_writer", + status: "Successful", + date: "27 July", + }, + { + id: "Sub-001", + type: "Monthly Subscription", + amount: "29.99 STRK", + user: "Reader", + userName: "alex_reader", + status: "Failed", + date: "28 July", + }, + { + id: "Sub-001", + type: "Monthly Subscription", + amount: "29.99 STRK", + user: "Reader", + userName: "alex_reader", + status: "Successful", + date: "28 July", + }, + { + id: "Sub-001", + type: "Monthly Subscription", + amount: "29.99 STRK", + user: "Reader", + userName: "alex_reader", + status: "Failed", + date: "28 July", + }, + ]; + + const nftMintingData: NFTMinting[] = [ + { + id: "1", + title: "Whispers of Dawn", + author: "John Doe", + feeAmount: "5.00 STRK", + network: "Ethereum", + mintDate: "12 May, 2025", + status: "Minted", + smartContractAddress: "0x9f...d45A", + tokenStandard: "ERC-721", + description: "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era." + }, + { + id: "2", + title: "Native Invisibility", + author: "Darrin Collins", + feeAmount: "5.00 STRK", + network: "Ethereum", + mintDate: "12 May, 2025", + status: "Minted", + smartContractAddress: "0x9f...d45A", + tokenStandard: "ERC-721", + description: "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era." + }, + { + id: "3", + title: "Digital Dreams", + author: "Jane Smith", + feeAmount: "5.00 STRK", + network: "Ethereum", + mintDate: "12 May, 2025", + status: "Failed", + smartContractAddress: "0x9f...d45A", + tokenStandard: "ERC-721", + description: "A journey through the digital landscape of modern storytelling." + }, + { + id: "1", + title: "Whispers of Dawn", + author: "John Doe", + feeAmount: "5.00 STRK", + network: "Ethereum", + mintDate: "12 May, 2025", + status: "Minted", + smartContractAddress: "0x9f...d45A", + tokenStandard: "ERC-721", + description: "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era." + }, + { + id: "1", + title: "Whispers of Dawn", + author: "John Doe", + feeAmount: "5.00 STRK", + network: "Ethereum", + mintDate: "12 May, 2025", + status: "Minted", + smartContractAddress: "0x9f...d45A", + tokenStandard: "ERC-721", + description: "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era." + }, + ]; + + // Handler functions + const handleTabClick = (tab: string) => { + setActiveTab(tab); + }; + + const handlePayoutRowClick = (request: PayoutRequest) => { + setSelectedPayoutRequest(request); + setIsPayoutModalOpen(true); + }; + + const handleClosePayoutModal = () => { + setIsPayoutModalOpen(false); + setSelectedPayoutRequest(null); + }; + + const handleViewDetails = (transaction: Transaction) => { + setSelectedTransaction(transaction); + setIsTransactionModalOpen(true); + }; + + const handleCloseTransactionModal = () => { + setIsTransactionModalOpen(false); + setSelectedTransaction(null); + }; + + const handleViewMore = (nft: NFTMinting) => { + setSelectedNFT(nft); + setIsNFTModalOpen(true); + }; + + const handleCloseNFTModal = () => { + setIsNFTModalOpen(false); + setSelectedNFT(null); + }; + + const handleRetryMinting = (nft: NFTMinting) => { + console.log('Retrying minting for:', nft.title); + // Handle retry logic here + handleCloseNFTModal(); + }; + + const handleApprove = (request: PayoutRequest) => { + console.log("Approving:", request); + // Handle approval logic + }; + + const handleDecline = (request: PayoutRequest) => { + console.log("Declining:", request); + // Handle decline logic + }; return ( <> -
-
-
-

Transactions

-

- Welcome to Transactions section of the admin dashboard! Here, you can manage and monitor all transactions on your platform. This space is designed to help you ensure the integrity and security of financial activities, providing insights into transaction history, status, and details. You can also handle any issues related to transactions efficiently. -

+
+ +
+ {/* Time Filter */} +
+ + +
+ + {/* Top Stats Cards */} +
+ {/* Large rectangular card on the left - controlled width */} +
+ +
+ + {/* 2x2 grid of smaller cards on the right */} +
+
+ + + + +
+
+
+ + {/* Sales Distribution */} +
+

+ Sales Distribution +

+ + + +
+ {/* Chart */} +
+

+ Top Read Genres +

+ +
+ +
+ +
+
+
+ + {/* Stats */} +
+ + + +
+
+
+ + {/* Transaction Table Section */} +
+
+ + + + + {activeTab === "Payout Request" ? ( + + ) : activeTab === "Subscription" ? ( + + ) : activeTab === "NFT Minting" ? ( + + ) : ( + + )} + + +
+ + {/* Transaction Detail Modal */} + + + {/* Payout Request Detail Modal */} + + + {/* NFT Detail Modal */} + ); -} +}; + +export default Transactions; diff --git a/src/components/landingpage/NavBar.tsx b/src/components/landingpage/NavBar.tsx index 6d063c5..7540829 100644 --- a/src/components/landingpage/NavBar.tsx +++ b/src/components/landingpage/NavBar.tsx @@ -19,8 +19,8 @@ const NavBar = () => { const [isConnectModalOpen, setIsConnectModalOpen] = useState(false); const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const path = usePathname() - + const path = usePathname(); + const dropdownRef = useRef(null); const navItems = [ { label: "Home", href: "/" }, @@ -73,7 +73,7 @@ const NavBar = () => { }; if (path.includes("dashboard")) { - return + return; } return ( @@ -109,7 +109,6 @@ const NavBar = () => { ))} - {/* Wallet Connection Button or Connected Wallet */}
@@ -159,7 +158,6 @@ const NavBar = () => { > Disconnect -
)} @@ -168,7 +166,7 @@ const NavBar = () => {
-