"use client"; import React, { useState, useEffect } from "react"; import DashboardLayout from "@/components/layout/DashboardLayout"; import { useGlobalContext } from "@/context/Provider"; import apis, { referralUserType } from "@/utils/apis"; import { Check, Loader2 } from "lucide-react"; import { useRouter } from "next/navigation"; const MedalBadge = ({ level, locked = false }: { level: number; locked?: boolean }) => { return ( ); }; const GreenCheckIcon = () => ( ); const YellowLockIcon = () => ( ); const NoLevelMedalIcon = () => ( ); const Rewards = () => { const router = useRouter(); const { Toast } = useGlobalContext(); const [referredCustomers, setReferredCustomers] = useState(0); const [referredVendors, setReferredVendors] = useState(0); const [referredDrivers, setReferredDrivers] = useState(0); const [targetCustomers, setTargetCustomers] = useState(4); const [targetVendors, setTargetVendors] = useState(4); const [targetDrivers, setTargetDrivers] = useState(4); const [nextLevelNum, setNextLevelNum] = useState(1); const [rewardAmount, setRewardAmount] = useState(0); const [currentLevel, setCurrentLevel] = useState(0); const [loading, setLoading] = useState(true); useEffect(() => { const fetchReferralStats = async () => { try { setLoading(true); const res = await apis.Sales.getCertificationListing(); const apiData = res?.data || res; if (apiData) { setCurrentLevel(apiData.current_level ?? 0); if (apiData.current_progress) { setReferredCustomers(apiData.current_progress.referred_customers ?? 0); setReferredVendors(apiData.current_progress.referred_vendors ?? 0); setReferredDrivers(apiData.current_progress.referred_drivers ?? 0); setRewardAmount(apiData.current_progress.reward_earned ?? 0); } if (apiData.next_level) { setTargetCustomers(apiData.next_level.customer_required ?? 4); setTargetVendors(apiData.next_level.vendor_required ?? 4); setTargetDrivers(apiData.next_level.driver_required ?? 4); setNextLevelNum(apiData.next_level.level ?? 1); } else { setNextLevelNum(0); } } } catch (err) { console.error("Error fetching referral stats, using screen defaults:", err); } finally { setLoading(false); } }; fetchReferralStats(); }, []); const customerProgress = targetCustomers > 0 ? Math.min((referredCustomers / targetCustomers) * 100, 100) : 0; const vendorProgress = targetVendors > 0 ? Math.min((referredVendors / targetVendors) * 100, 100) : 0; const driverProgress = targetDrivers > 0 ? Math.min((referredDrivers / targetDrivers) * 100, 100) : 0; return (

{/* Main Title & Description */}

Rewards & Levels

Track your current Certificate Level and see what you need to do next.

{loading ? (

Loading your rewards dashboard...

) : (

{/* Current Certificate Level Section */}

Current Certificate Level

{currentLevel === 0 ? ( /* No Certificate Level Yet Card matching screenshot */

No Certificate Level Yet

Start Your Rewards Journey Unlock Your First Level
And Begin Earning Rewards.

) : ( /* Unlocked Certificate Level Card */

{/* Card Left Details */}

Current Level

Level {currentLevel}

{/* Requirements checkmarks list in 2 columns */}

{referredCustomers} {referredCustomers === 1 ? 'Customer' : 'Customers'} Referred.

{referredVendors} {referredVendors === 1 ? 'Vendor' : 'Vendors'} Referred.

{referredDrivers} {referredDrivers === 1 ? 'Driver' : 'Drivers'} Referred.

{/* Card Right Badge Display */}

)}

{/* Reward Earned Card Banner (Only shown if user has unlocked a level) */} {/* {currentLevel > 0 && (

Reward Earned

${rewardAmount}

)} */} {/* Next Certificate Level Section */} {nextLevelNum > 0 && (

{currentLevel === 0 ? "Your First Certificate Level" : "Next Certificate Level"}

{/* White Container Card */}

{/* Next Level progress information */}

Level {nextLevelNum}

Unlock your {currentLevel === 0 ? "first" : "next"} Certificate Level by completing the following tasks.

{/* Progress bars list */}

{/* Customers Referred Task */}

Referred Customers {referredCustomers}/{targetCustomers}

{/* Divider */}

{/* Vendors Referred Task */}

Referred Vendors {referredVendors}/{targetVendors}

{/* Divider */}

{/* Drivers Referred Task */}

Referred Drivers {referredDrivers}/{targetDrivers}

{/* Locked Medal Display */}

)}

)}

); }; export default function RewardsPage() { return ( ); }