From 4785ef2aaa5cf2c583fdefa658cdcbec5b038679 Mon Sep 17 00:00:00 2001 From: smfahim25 Date: Tue, 30 Sep 2025 12:09:33 +0600 Subject: [PATCH] added design --- src/index.css | 4 + src/pages/Earnings.tsx | 575 +++++++++++++++++++++++++++++++++++++++- src/pages/Referrals.tsx | 358 ++++++++++++++++++++++--- src/pages/Signup.tsx | 2 +- 4 files changed, 890 insertions(+), 49 deletions(-) diff --git a/src/index.css b/src/index.css index 9ad2e90..da1a0e7 100644 --- a/src/index.css +++ b/src/index.css @@ -162,3 +162,7 @@ button:focus-visible { @apply bg-background text-foreground; } } + +button { + cursor: pointer; +} diff --git a/src/pages/Earnings.tsx b/src/pages/Earnings.tsx index 9d11ffa..4de022f 100644 --- a/src/pages/Earnings.tsx +++ b/src/pages/Earnings.tsx @@ -1,22 +1,569 @@ -// src/pages/dashboard/Earnings.tsx -import ChartEarnings from "@/components/ChartEarnings"; -import React from "react"; +import React, { useState } from "react"; +import { + DollarSign, + TrendingUp, + Calendar, + CreditCard, + Download, + ArrowUpRight, + ArrowDownRight, + Wallet, + Clock, + CheckCircle, + X, + AlertCircle, +} from "lucide-react"; +import { + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, + Area, + AreaChart, +} from "recharts"; const Earnings: React.FC = () => { + const [timeframe, setTimeframe] = useState<"7d" | "30d" | "90d" | "1y">( + "30d" + ); + const [showPayoutModal, setShowPayoutModal] = useState(false); + const [payoutAmount, setPayoutAmount] = useState("890"); + const [isProcessing, setIsProcessing] = useState(false); + + const earningsData = [ + { date: "Sep 1", amount: 120 }, + { date: "Sep 5", amount: 180 }, + { date: "Sep 10", amount: 240 }, + { date: "Sep 15", amount: 210 }, + { date: "Sep 20", amount: 290 }, + { date: "Sep 25", amount: 350 }, + { date: "Sep 30", amount: 450 }, + ]; + + const transactionData = [ + { + type: "Commission", + amount: "$120", + date: "Sep 28, 2025", + status: "Completed", + ref: "REF-4521", + }, + { + type: "Bonus", + amount: "$50", + date: "Sep 25, 2025", + status: "Completed", + ref: "BONUS-892", + }, + { + type: "Commission", + amount: "$85", + date: "Sep 22, 2025", + status: "Completed", + ref: "REF-4489", + }, + { + type: "Commission", + amount: "$95", + date: "Sep 18, 2025", + status: "Pending", + ref: "REF-4455", + }, + { + type: "Commission", + amount: "$100", + date: "Sep 15, 2025", + status: "Completed", + ref: "REF-4421", + }, + ]; + + const stats = [ + { + label: "Total Earnings", + value: "$12,450", + change: "+12.5%", + trend: "up", + icon: DollarSign, + color: "from-green-500 to-emerald-600", + bgColor: "bg-green-50", + textColor: "text-green-600", + }, + { + label: "This Month", + value: "$2,340", + change: "+8.2%", + trend: "up", + icon: TrendingUp, + color: "from-blue-500 to-indigo-600", + bgColor: "bg-blue-50", + textColor: "text-blue-600", + }, + { + label: "Pending Payout", + value: "$450", + change: "Oct 15", + trend: "neutral", + icon: Clock, + color: "from-orange-500 to-amber-600", + bgColor: "bg-orange-50", + textColor: "text-orange-600", + }, + { + label: "Available Balance", + value: "$890", + change: "Ready now", + trend: "neutral", + icon: Wallet, + color: "from-purple-500 to-pink-600", + bgColor: "bg-purple-50", + textColor: "text-purple-600", + }, + ]; + + const handlePayoutRequest = () => { + setIsProcessing(true); + setTimeout(() => { + setIsProcessing(false); + setShowPayoutModal(false); + alert( + "Payout request submitted successfully! You'll receive confirmation via email." + ); + }, 2000); + }; + return ( -
-

Earnings

-
- -
-

- Next Payout: Oct 15, 2025 -

-

- Estimated Amount: $450 -

+
+
+ {/* Header */} +
+
+

Earnings

+

+ Track your affiliate performance and payouts +

+
+
+ + +
+
+ + {/* Stats Grid */} +
+ {stats.map((stat, idx) => ( +
+
+
+ +
+ {stat.trend !== "neutral" && ( +
+ {stat.trend === "up" ? ( + + ) : ( + + )} + {stat.change} +
+ )} +
+
+ {stat.value} +
+
{stat.label}
+ {stat.trend === "neutral" && ( +
{stat.change}
+ )} +
+ ))} +
+ + {/* Next Payout Card */} +
+
+
+
+ +
+
+
+ Next Scheduled Payout +
+
+ October 15, 2025 +
+
+ Your earnings will be processed automatically +
+
+
+
+
+ Estimated Amount +
+
$450
+
+ + pending approvals +
+
+
+
+ +
+ {/* Chart Section */} +
+
+
+

+ Earnings Overview +

+

+ Your performance over time +

+
+
+ {(["7d", "30d", "90d", "1y"] as const).map((period) => ( + + ))} +
+
+ + + + + + + + + + + + + + + +
+ + {/* Payment Methods */} +
+

+ Payment Method +

+
+
+
+
+ +
+
+
PayPal
+
+ john@example.com +
+
+ +
+
+ +
+ +
+

Quick Stats

+
+
+ + Total Transactions + + 142 +
+
+ Avg. Commission + $87.68 +
+
+ Success Rate + 98.2% +
+
+
+
+
+ + {/* Transaction History */} +
+
+

+ Recent Transactions +

+

+ Your latest earnings and payouts +

+
+
+ {transactionData.map((transaction, idx) => ( +
+
+
+
+ +
+
+
+ {transaction.type} +
+
+ {transaction.date} +
+
+ {transaction.ref} +
+
+
+
+
+ {transaction.amount} +
+ + {transaction.status === "Completed" ? ( + + ) : ( + + )} + {transaction.status} + +
+
+
+ ))} +
+
+ +
+ + {/* Payout Request Modal */} + {showPayoutModal && ( +
+
+ {/* Modal Header */} +
+
+
+ +
+
+

+ Request Payout +

+

+ Withdraw your earnings +

+
+
+ +
+ + {/* Modal Body */} +
+ {/* Available Balance */} +
+
+ Available Balance +
+
$890.00
+
+ Ready for withdrawal +
+
+ + {/* Amount Input */} +
+ +
+ + setPayoutAmount(e.target.value)} + placeholder="0.00" + max="890" + className="w-full pl-10 pr-20 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-lg font-semibold" + /> + +
+

+ Minimum withdrawal: $50.00 +

+
+ + {/* Payment Method */} +
+ +
+
+
+ +
+
+
PayPal
+
+ john@example.com +
+
+ +
+
+
+ + {/* Processing Info */} +
+ +
+

Processing Time

+

+ Payouts are typically processed within 24-48 hours on + business days. +

+
+
+ + {/* Summary */} +
+
+ Withdrawal Amount + + ${payoutAmount} + +
+
+ Processing Fee + $0.00 +
+
+ + You'll Receive + + + ${payoutAmount} + +
+
+
+ + {/* Modal Footer */} +
+ + +
+
+
+ )}
); }; diff --git a/src/pages/Referrals.tsx b/src/pages/Referrals.tsx index 597c9d6..e4b3ba2 100644 --- a/src/pages/Referrals.tsx +++ b/src/pages/Referrals.tsx @@ -1,57 +1,347 @@ -import React from "react"; +import React, { useState } from "react"; +import { + Users, + DollarSign, + TrendingUp, + Link2, + Copy, + Search, + Filter, + Download, + Calendar, + CheckCircle, + Clock, + MoreVertical, +} from "lucide-react"; interface Referral { name: string; + email: string; date: string; earnings: string; status: "Active" | "Pending"; + signupDate: string; + totalCommission: string; + country: string; } const referrals: Referral[] = [ - { name: "John Doe", date: "2025-09-20", earnings: "$50", status: "Active" }, + { + name: "John Doe", + email: "john@example.com", + date: "2025-09-20", + earnings: "$50", + status: "Active", + signupDate: "2025-08-15", + totalCommission: "$450", + country: "United States", + }, { name: "Jane Smith", + email: "jane@example.com", date: "2025-09-18", earnings: "$20", status: "Pending", + signupDate: "2025-09-10", + totalCommission: "$20", + country: "Canada", + }, + { + name: "Michael Chen", + email: "michael@example.com", + date: "2025-09-15", + earnings: "$120", + status: "Active", + signupDate: "2025-07-22", + totalCommission: "$890", + country: "Singapore", + }, + { + name: "Sarah Johnson", + email: "sarah@example.com", + date: "2025-09-12", + earnings: "$85", + status: "Active", + signupDate: "2025-06-30", + totalCommission: "$1,240", + country: "United Kingdom", + }, + { + name: "David Williams", + email: "david@example.com", + date: "2025-09-25", + earnings: "$15", + status: "Pending", + signupDate: "2025-09-20", + totalCommission: "$15", + country: "Australia", }, ]; const Referrals: React.FC = () => { + const [searchTerm, setSearchTerm] = useState(""); + const [copied, setCopied] = useState(false); + const referralLink = "https://affiliatepro.com/ref/ABC123"; + + const handleCopy = () => { + navigator.clipboard.writeText(referralLink); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + const stats = [ + { + label: "Total Referrals", + value: "5", + icon: Users, + color: "bg-blue-500", + change: "+12% from last month", + }, + { + label: "Active Referrals", + value: "3", + icon: CheckCircle, + color: "bg-green-500", + change: "60% conversion rate", + }, + { + label: "Total Earnings", + value: "$2,615", + icon: DollarSign, + color: "bg-purple-500", + change: "+$450 this month", + }, + { + label: "Avg. Per Referral", + value: "$523", + icon: TrendingUp, + color: "bg-orange-500", + change: "+18% growth", + }, + ]; + + const filteredReferrals = referrals.filter( + (r) => + r.name.toLowerCase().includes(searchTerm.toLowerCase()) || + r.email.toLowerCase().includes(searchTerm.toLowerCase()) + ); + return ( -
-

Referrals

-
- - - - - - - - - - - {referrals.map((r, idx) => ( - - - - - + + + + + + + + ))} + +
NameDateEarningsStatus
{r.name}{r.date}{r.earnings} - +
+ {/* Header */} +
+

Referrals

+

+ Track and manage your affiliate referrals +

+
+ + {/* Stats Grid */} +
+ {stats.map((stat, idx) => ( +
+
+
+ +
+
+
+ {stat.value} +
+
{stat.label}
+
{stat.change}
+
+ ))} +
+ + {/* Referral Link Section */} +
+
+
+
+ +

+ Your Referral Link +

+
+

+ Share this link to earn commissions +

+
+
+ {referralLink} +
+ +
+
+
+
+ + {/* Table Section */} +
+ {/* Table Header */} +
+
+

+ Referral List +

+
+
+ + setSearchTerm(e.target.value)} + className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none w-full sm:w-64" + /> +
+ + +
+
+
+ + {/* Table */} +
+ + + + + + + + + + + + + + {filteredReferrals.map((r, idx) => ( + - {r.status} - - - - ))} - -
+ Referral + + Signup Date + + Country + + Last Earnings + + Total Commission + + Status +
+
+
+
+ {r.name.charAt(0)} +
+
+
+ {r.name} +
+
{r.email}
+
+
+ 		+
+ + {r.signupDate} +
+ 		+ {r.country} + +
+ + + {r.earnings} + +
+
{r.date}
+ 		+ + {r.totalCommission} + + + + {r.status === "Active" ? ( + + ) : ( + + )} + {r.status} + + + +
+
+ + {/* Table Footer */} +
+
+ Showing{" "} + {filteredReferrals.length}{" "} + of {referrals.length}{" "} + referrals +
+
+ + +
+
+
); diff --git a/src/pages/Signup.tsx b/src/pages/Signup.tsx index cbdcb1b..e5c9cf2 100644 --- a/src/pages/Signup.tsx +++ b/src/pages/Signup.tsx @@ -302,7 +302,7 @@ const Signup: React.FC = () => {

Already have an account?{" "} Sign in