diff --git a/index.html b/index.html index 48745b7..2df60b9 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - + - affiliate-planpost + Planpost Affiliate
diff --git a/package-lock.json b/package-lock.json index a09c01e..d131e9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,6 +71,7 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -2305,6 +2306,7 @@ "integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.12.0" } @@ -2315,6 +2317,7 @@ "integrity": "sha512-+kLxJpaJzXybyDyFXYADyP1cznTO8HSuBpenGlnKOAkH4hyNINiywvXS/tGJhsrGGP/gM185RA3xpjY0Yg4erA==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -2325,6 +2328,7 @@ "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", "devOptional": true, "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.0.0" } @@ -2381,6 +2385,7 @@ "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.44.1", "@typescript-eslint/types": "8.44.1", @@ -2633,6 +2638,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2763,6 +2769,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001741", @@ -3187,6 +3194,7 @@ "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -4320,6 +4328,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -4329,6 +4338,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -4348,6 +4358,7 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", + "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -4514,7 +4525,8 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -4795,6 +4807,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -4863,6 +4876,7 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -5022,6 +5036,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz", "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -5113,6 +5128,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, diff --git a/public/planpost.png b/public/planpost.png new file mode 100644 index 0000000..8fbba1c Binary files /dev/null and b/public/planpost.png differ diff --git a/public/planpost.svg b/public/planpost.svg new file mode 100644 index 0000000..afefe06 --- /dev/null +++ b/public/planpost.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 9e59ac5..710d570 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Sidebar, SidebarContent, @@ -9,13 +10,7 @@ import { SidebarHeader, SidebarFooter, } from "@/components/ui/sidebar"; -import { - LayoutDashboard, - Users, - DollarSign, - LogOut, - Sparkles, -} from "lucide-react"; +import { LayoutDashboard, Users, DollarSign, LogOut } from "lucide-react"; import { Link, useLocation } from "react-router-dom"; const AppSidebar: React.FC = () => { @@ -31,8 +26,8 @@ const AppSidebar: React.FC = () => {
-
- +
+ Logo

Affiliate Panel

@@ -54,7 +49,7 @@ const AppSidebar: React.FC = () => { transition-all duration-200 ${ pathname === path - ? " text-white shadow-md hover:shadow-lg" + ? "bg-blue-600 text-white shadow-md hover:bg-blue-700" : "hover:bg-gray-100 text-gray-700" } `} @@ -78,7 +73,6 @@ const AppSidebar: React.FC = () => { - {/* Stats Card */}

Total Earnings @@ -103,7 +97,6 @@ const AppSidebar: React.FC = () => { - {/* User Profile */}

JD diff --git a/src/components/layouts/DashboardLayouts.tsx b/src/components/layouts/DashboardLayouts.tsx index 2cf6ec6..b3aadb2 100644 --- a/src/components/layouts/DashboardLayouts.tsx +++ b/src/components/layouts/DashboardLayouts.tsx @@ -1,16 +1,24 @@ import React from "react"; import { Outlet } from "react-router-dom"; import AppSidebar from "../Sidebar"; -import { SidebarProvider, SidebarInset } from "../ui/sidebar"; +import { SidebarProvider, SidebarInset, SidebarTrigger } from "../ui/sidebar"; const DashboardLayout: React.FC = () => { return ( -
- -
+
+ {/* Mobile Header with Sidebar Trigger */} +
+ +
+ + {/* Main Content */} +
+ +
+
); diff --git a/src/pages/Earnings.tsx b/src/pages/Earnings.tsx index 4de022f..ec4491d 100644 --- a/src/pages/Earnings.tsx +++ b/src/pages/Earnings.tsx @@ -134,43 +134,48 @@ const Earnings: React.FC = () => { }; return ( -
+
{/* Header */} -
+
-

Earnings

-

+

+ Earnings +

+

Track your affiliate performance and payouts

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

+

Earnings Overview

-

+

Your performance over time

@@ -246,7 +255,7 @@ const Earnings: React.FC = () => {
- + @@ -269,9 +278,9 @@ const Earnings: React.FC = () => { - + { type="monotone" dataKey="amount" stroke="#6366f1" - strokeWidth={3} + strokeWidth={2} fill="url(#colorAmount)" /> @@ -292,46 +301,60 @@ const Earnings: React.FC = () => {
{/* Payment Methods */} -
-

+
+

Payment Method

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

Quick Stats

+
+

+ Quick Stats +

- + Total Transactions - 142 + + 142 +
- Avg. Commission - $87.68 + + Avg. Commission + + + $87.68 +
- Success Rate - 98.2% + + Success Rate + + + 98.2% +
@@ -340,39 +363,42 @@ const Earnings: React.FC = () => { {/* Transaction History */}
-
-

+
+

Recent Transactions

-

+

Your latest earnings and payouts

{transactionData.map((transaction, idx) => ( -
-
-
+
+
+
-
-
+
+
{transaction.type}
-
+
{transaction.date}
@@ -380,12 +406,12 @@ const Earnings: React.FC = () => {
-
-
+
+
{transaction.amount}
{ ) : ( )} - {transaction.status} + + {transaction.status} +
))}
-
-
@@ -413,19 +441,19 @@ const Earnings: React.FC = () => { {/* Payout Request Modal */} {showPayoutModal && ( -
-
+
+
{/* Modal Header */} -
+
-
- +
+
-

+

Request Payout

-

+

Withdraw your earnings

@@ -439,13 +467,15 @@ const Earnings: React.FC = () => {
{/* Modal Body */} -
+
{/* Available Balance */}
-
+
Available Balance
-
$890.00
+
+ $890.00 +
Ready for withdrawal
@@ -464,11 +494,11 @@ const Earnings: React.FC = () => { onChange={(e) => 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" + className="w-full pl-10 pr-16 sm:pr-20 py-2.5 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base sm:text-lg font-semibold" /> @@ -483,14 +513,16 @@ const Earnings: React.FC = () => { -
+
-
- +
+
-
-
PayPal
-
+
+
+ PayPal +
+
john@example.com
@@ -500,9 +532,9 @@ const Earnings: React.FC = () => {
{/* Processing Info */} -
+
-
+

Processing Time

Payouts are typically processed within 24-48 hours on @@ -512,22 +544,22 @@ const Earnings: React.FC = () => {

{/* Summary */} -
-
+
+
Withdrawal Amount ${payoutAmount}
-
+
Processing Fee $0.00
- + You'll Receive - + ${payoutAmount}
@@ -535,10 +567,10 @@ const Earnings: React.FC = () => {
{/* Modal Footer */} -
+
@@ -549,15 +581,15 @@ const Earnings: React.FC = () => { Number(payoutAmount) < 50 || Number(payoutAmount) > 890 } - className="flex-1 px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-all font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2" + className="flex-1 px-3 sm:px-4 py-2.5 sm:py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-all font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm sm:text-base" > {isProcessing ? ( <> -
- Processing... +
+ Processing... ) : ( - <>Confirm Request + <>Confirm )}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 53b80bb..03c243a 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -33,8 +33,8 @@ const Login: React.FC = () => {
-
- +
+ Logo
Planpost Affiliate diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx index ef85c1c..c69e07f 100644 --- a/src/pages/Overview.tsx +++ b/src/pages/Overview.tsx @@ -25,21 +25,25 @@ const MetricsCard = ({ trend, bgColor, }: MetricsCardProps) => ( -
-
-
- +
+
+
+
{trend && ( - + {trend} )}
-

{title}

-

{value}

- {subtitle &&

{subtitle}

} +

+ {title} +

+

{value}

+ {subtitle && ( +

{subtitle}

+ )}
); @@ -54,19 +58,19 @@ const Overview = () => { }; return ( -
+
{/* Header */} -
-

+
+

Dashboard Overview -

-

+

+

Track your affiliate performance and earnings

{/* Metrics Grid */} -
+
{
{/* Referral Link Section */} -
-
+
+
- +
-

+

Your Referral Link

-

+

Share this link with your network to start earning commissions

@@ -114,12 +118,12 @@ const Overview = () => { type="text" value={referralLink} readOnly - className="w-full border-2 border-gray-200 rounded-lg px-4 py-3 bg-white focus:outline-none focus:border-blue-500 transition-colors font-mono text-sm" + className="w-full border-2 border-gray-200 rounded-lg px-3 sm:px-4 py-2.5 sm:py-3 bg-white focus:outline-none focus:border-blue-500 transition-colors font-mono text-xs sm:text-sm" />
{/* Quick Stats */} -
-
-

+
+
+

Conversion Rate

-

12.5%

+

+ 12.5% +

-
-

+
+

Average Commission

-

$37.65

-

↑ $2.15 from last month

+

$37.65

+

+ ↑ $2.15 from last month +

-
-

+
+

Next Payout

-

$945

-

In 12 days

+

$945

+

In 12 days

diff --git a/src/pages/Referrals.tsx b/src/pages/Referrals.tsx index e4b3ba2..5c54a17 100644 --- a/src/pages/Referrals.tsx +++ b/src/pages/Referrals.tsx @@ -127,68 +127,72 @@ const Referrals: React.FC = () => { ); return ( -
+
{/* Header */} -
-

Referrals

-

+

+

+ Referrals +

+

Track and manage your affiliate referrals

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

+ +

Your Referral Link

-

+

Share this link to earn commissions

-
-
+
+
{referralLink}
-
- {/* Table */} -
+ {/* Mobile Card View */} +
+ {filteredReferrals.map((r, idx) => ( +
+
+
+
+ {r.name.charAt(0)} +
+
+
+ {r.name} +
+
{r.email}
+
+
+ + {r.status === "Active" ? ( + + ) : ( + + )} + {r.status} + +
+
+
+
+ Signup Date +
+
{r.signupDate}
+
+
+
Country
+
{r.country}
+
+
+
+ Last Earning +
+
+ {r.earnings} +
+
+
+
+ Total Commission +
+
+ {r.totalCommission} +
+
+
+
+ ))} +
+ + {/* Desktop Table View */} +
@@ -325,18 +395,18 @@ const Referrals: React.FC = () => { {/* Table Footer */} -
-
+
+
Showing{" "} {filteredReferrals.length}{" "} of {referrals.length}{" "} referrals
- -