-
-
+
+
diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx
index c69e07f..51adbfa 100644
--- a/src/pages/Overview.tsx
+++ b/src/pages/Overview.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import {
Copy,
TrendingUp,
@@ -7,6 +7,8 @@ import {
Clock,
CheckCircle2,
} from "lucide-react";
+import { useUserStore } from "@/stores/userStore";
+import { useAffiliateStore } from "@/stores/affiliateStore";
type MetricsCardProps = {
title: string;
@@ -49,7 +51,27 @@ const MetricsCard = ({
const Overview = () => {
const [copied, setCopied] = useState(false);
- const referralLink = "https://yoursite.com/ref/ABC123";
+ const { user, fetchUser, isLoading: userLoading } = useUserStore();
+ const {
+ data: affiliateData,
+ fetchEarnings,
+ isLoading: earningsLoading,
+ } = useAffiliateStore();
+
+ useEffect(() => {
+ // Get user ID from localStorage
+ const userStr = localStorage.getItem("aff-user");
+
+ if (userStr) {
+ const userData = JSON.parse(userStr);
+ if (userData.id) {
+ fetchUser(userData.id);
+ fetchEarnings(userData.id);
+ }
+ }
+ }, [fetchUser, fetchEarnings]);
+
+ const referralLink = `https://dashboard.planpostai.com/sign-up?ref=${user?.referral_code}`;
const handleCopy = () => {
navigator.clipboard.writeText(referralLink);
@@ -57,8 +79,28 @@ const Overview = () => {
setTimeout(() => setCopied(false), 2000);
};
+ // Calculate metrics from affiliate data
+ const totalEarnings = affiliateData?.summary.total_earning || 0;
+ const totalWithdraw = affiliateData?.summary.total_withdraw || 0;
+ const pendingAmount = affiliateData?.summary.pending_amount || 0;
+ const totalReferrals = affiliateData?.total || 0;
+
+ // Calculate average commission
+ const averageCommission =
+ totalReferrals > 0 ? totalEarnings / totalReferrals : 0;
+
+ const isLoading = userLoading || earningsLoading;
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
return (
-
+
{/* Header */}
@@ -73,27 +115,26 @@ const Overview = () => {
@@ -148,35 +189,40 @@ const Overview = () => {
- Conversion Rate
+ Average Commission
-
- 12.5%
+
+ ${averageCommission.toFixed(2)}
-
+
Per referral
- Average Commission
+ Available Balance
-
$37.65
+
+ ${(totalEarnings - totalWithdraw).toFixed(2)}
+
- ↑ $2.15 from last month
+ Ready to withdraw
- Next Payout
+ Latest Transaction
-
$945
-
In 12 days
+
+ ${affiliateData?.history[0]?.amount.toFixed(2) || "0.00"}
+
+
+ {affiliateData?.history[0]
+ ? new Date(
+ affiliateData.history[0].created_at
+ ).toLocaleDateString()
+ : "No transactions yet"}
+
diff --git a/src/stores/affiliateStore.ts b/src/stores/affiliateStore.ts
new file mode 100644
index 0000000..39ad698
--- /dev/null
+++ b/src/stores/affiliateStore.ts
@@ -0,0 +1,116 @@
+// store/affiliateStore.ts
+import { create } from "zustand";
+
+interface ReferredUser {
+ id: string;
+ name: string;
+ email: string;
+}
+
+interface EarningHistory {
+ id: number;
+ usage_type: string;
+ amount: number;
+ created_at: string;
+ referred_user: ReferredUser;
+}
+
+interface AffiliateSummary {
+ total_earning: number;
+ total_withdraw: number;
+ pending_amount: number;
+}
+
+interface Affiliate {
+ id: string;
+ name: string;
+ email: string;
+}
+
+interface AffiliateData {
+ success: boolean;
+ affiliate: Affiliate;
+ summary: AffiliateSummary;
+ history: EarningHistory[];
+ total: number;
+ page: number;
+ limit: number;
+}
+
+interface AffiliateState {
+ data: AffiliateData | null;
+ isLoading: boolean;
+ error: string | null;
+
+ // Actions
+ fetchEarnings: (
+ userId: string,
+ page?: number,
+ limit?: number
+ ) => Promise;
+ clearData: () => void;
+ clearError: () => void;
+}
+
+const API_BASE_URL = import.meta.env.VITE_SERVER_URL;
+
+export const useAffiliateStore = create((set) => ({
+ data: null,
+ isLoading: false,
+ error: null,
+
+ fetchEarnings: async (userId: string, page = 1, limit = 10) => {
+ set({ isLoading: true, error: null });
+
+ try {
+ // Get token from localStorage
+ const token = localStorage.getItem("aff-token");
+
+ if (!token) {
+ throw new Error("No authentication token found");
+ }
+
+ const response = await fetch(
+ `${API_BASE_URL}/affiliate/earning/${userId}?page=${page}&limit=${limit}`,
+ {
+ method: "GET",
+ headers: {
+ accept: "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.message || "Failed to fetch earnings data");
+ }
+
+ const data = await response.json();
+
+ set({
+ data,
+ isLoading: false,
+ error: null,
+ });
+ } catch (error) {
+ console.error("Fetch earnings error:", error);
+ set({
+ isLoading: false,
+ error:
+ error instanceof Error ? error.message : "Failed to fetch earnings",
+ });
+ }
+ },
+
+ clearData: () => {
+ set({
+ data: null,
+ error: null,
+ });
+ },
+
+ clearError: () => {
+ set({ error: null });
+ },
+}));
diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts
index cf78f1c..644de33 100644
--- a/src/stores/authStore.ts
+++ b/src/stores/authStore.ts
@@ -20,12 +20,13 @@ interface AuthState {
login: (
email: string,
password: string
- ) => Promise<{ success: boolean; error?: string }>;
+ ) => Promise<{ success: boolean; error?: string; user: User | null }>;
register: (
data: RegisterData
) => Promise<{ success: boolean; error?: string }>;
logout: () => void;
clearError: () => void;
+ initializeAuth: () => void;
}
interface RegisterData {
@@ -50,6 +51,28 @@ export const useAuthStore = create((set) => ({
isLoading: false,
error: null,
+ // Initialize auth state from localStorage
+ initializeAuth: () => {
+ try {
+ const token = localStorage.getItem("aff-token");
+ const userStr = localStorage.getItem("aff-user");
+
+ if (token && userStr) {
+ const user = JSON.parse(userStr);
+ set({
+ token,
+ user,
+ isAuthenticated: true,
+ });
+ }
+ } catch (error) {
+ console.error("Failed to initialize auth:", error);
+ // Clear invalid data
+ localStorage.removeItem("aff-token");
+ localStorage.removeItem("aff-user");
+ }
+ },
+
login: async (email: string, password: string) => {
set({ isLoading: true, error: null });
@@ -65,6 +88,7 @@ export const useAuthStore = create((set) => ({
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
+ console.log("Login failed:", errorData.message);
throw new Error(errorData.message || "Login failed");
}
@@ -85,7 +109,7 @@ export const useAuthStore = create((set) => ({
error: null,
});
- return { success: true };
+ return { success: true, user };
} catch (error) {
console.error("Login error:", error);
@@ -93,9 +117,16 @@ export const useAuthStore = create((set) => ({
localStorage.removeItem("aff-token");
localStorage.removeItem("aff-user");
- set({ isLoading: false, error: "Login failed" });
+ set({
+ isLoading: false,
+ error: error instanceof Error ? error.message : String(error),
+ });
- return { success: false, error: "Login failed" };
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : String(error),
+ user: null,
+ };
}
},
@@ -103,21 +134,23 @@ export const useAuthStore = create((set) => ({
set({ isLoading: true, error: null });
try {
- const formData = new FormData();
-
- // Required fields
- formData.append("email", userData.email);
- formData.append("first_name", userData.first_name);
- formData.append("password", userData.password);
- formData.append("phone", userData.phone || "");
- formData.append("role", userData.role || "affiliate");
+ // Prepare JSON payload
+ const payload = {
+ email: userData.email,
+ first_name: userData.first_name,
+ last_name: userData.last_name || "",
+ password: userData.password,
+ phone: userData.phone || "",
+ role: userData.role || "affiliate",
+ };
const response = await fetch(`${API_BASE_URL}/auth/register`, {
method: "POST",
headers: {
accept: "application/json",
+ "Content-Type": "application/json",
},
- body: formData,
+ body: JSON.stringify(payload),
});
if (!response.ok) {
@@ -132,17 +165,30 @@ export const useAuthStore = create((set) => ({
return { success: true };
} catch (error) {
console.error("Registration error:", error);
- return { success: false, error: "Registration error" };
+ set({
+ isLoading: false,
+ error: error instanceof Error ? error.message : "Registration error",
+ });
+
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : "Registration error",
+ };
}
},
logout: () => {
+ // Clear localStorage
+ localStorage.removeItem("aff-token");
+ localStorage.removeItem("aff-user");
+
set({
token: null,
user: null,
isAuthenticated: false,
error: null,
});
+ window.location.href = "/login";
},
clearError: () => {
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
new file mode 100644
index 0000000..0a1ff56
--- /dev/null
+++ b/src/stores/userStore.ts
@@ -0,0 +1,90 @@
+import { create } from "zustand";
+
+interface User {
+ id: string;
+ email: string;
+ first_name: string;
+ last_name?: string;
+ role: string;
+ phone?: string;
+ city?: string;
+ country?: string;
+ address?: string;
+ profile_photo?: string;
+ created_at?: string;
+ updated_at?: string;
+ referral_code?: string;
+}
+
+interface UserState {
+ user: User | null;
+ isLoading: boolean;
+ error: string | null;
+
+ // Actions
+ fetchUser: (userId: string) => Promise;
+ clearUser: () => void;
+ clearError: () => void;
+}
+
+const API_BASE_URL = import.meta.env.VITE_SERVER_URL;
+
+export const useUserStore = create((set) => ({
+ user: null,
+ isLoading: false,
+ error: null,
+
+ fetchUser: async (userId: string) => {
+ set({ isLoading: true, error: null });
+
+ try {
+ // Get token from localStorage
+ const token = localStorage.getItem("aff-token");
+
+ if (!token) {
+ throw new Error("No authentication token found");
+ }
+
+ const response = await fetch(`${API_BASE_URL}/users/${userId}`, {
+ method: "GET",
+ headers: {
+ accept: "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ });
+
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.message || "Failed to fetch user data");
+ }
+
+ const data = await response.json();
+
+ // Handle different response structures
+ const userData = data.data || data.user || data;
+
+ set({
+ user: userData,
+ isLoading: false,
+ error: null,
+ });
+ } catch (error) {
+ console.error("Fetch user error:", error);
+ set({
+ isLoading: false,
+ error: error instanceof Error ? error.message : "Failed to fetch user",
+ });
+ }
+ },
+
+ clearUser: () => {
+ set({
+ user: null,
+ error: null,
+ });
+ },
+
+ clearError: () => {
+ set({ error: null });
+ },
+}));