Skip to main content

mlm

import React, { useState, useEffect } from 'react';

import { Users, TrendingUp, DollarSign, Award, ArrowUpRight, ArrowDownRight, UserPlus, Gift } from 'lucide-react';


const BinaryMLMSystem = () => {

  const [activeTab, setActiveTab] = useState('dashboard');

  const [user, setUser] = useState({

    name: 'John Doe',

    level: 5,

    totalEarnings: 12450.50,

    leftLeg: 23,

    rightLeg: 19,

    directReferrals: 8,

    weeklyEarnings: 850.25

  });


  const [networkStats, setNetworkStats] = useState({

    totalMembers: 156,

    activeMembers: 142,

    weeklyGrowth: 12,

    monthlyVolume: 45678.90

  });


  const [recentActivity, setRecentActivity] = useState([

    { id: 1, type: 'referral', user: 'Alice Smith', amount: 150, time: '2 hours ago' },

    { id: 2, type: 'commission', user: 'Bob Johnson', amount: 75, time: '5 hours ago' },

    { id: 3, type: 'bonus', user: 'Carol White', amount: 200, time: '1 day ago' },

    { id: 4, type: 'referral', user: 'David Brown', amount: 150, time: '2 days ago' }

  ]);


  const renderDashboard = () => (

    <div className="space-y-6">

      {/* Stats Grid */}

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

        <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white shadow-lg">

          <div className="flex items-center justify-between">

            <div>

              <p className="text-blue-100 text-sm">Total Earnings</p>

              <h3 className="text-3xl font-bold mt-1">${user.totalEarnings.toLocaleString()}</h3>

            </div>

            <DollarSign className="w-12 h-12 text-blue-200" />

          </div>

          <div className="flex items-center mt-4 text-sm">

            <ArrowUpRight className="w-4 h-4 mr-1" />

            <span>+12.5% from last month</span>

          </div>

        </div>


        <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white shadow-lg">

          <div className="flex items-center justify-between">

            <div>

              <p className="text-green-100 text-sm">Network Size</p>

              <h3 className="text-3xl font-bold mt-1">{networkStats.totalMembers}</h3>

            </div>

            <Users className="w-12 h-12 text-green-200" />

          </div>

          <div className="flex items-center mt-4 text-sm">

            <UserPlus className="w-4 h-4 mr-1" />

            <span>+{networkStats.weeklyGrowth} this week</span>

          </div>

        </div>


        <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white shadow-lg">

          <div className="flex items-center justify-between">

            <div>

              <p className="text-purple-100 text-sm">Current Level</p>

              <h3 className="text-3xl font-bold mt-1">Level {user.level}</h3>

            </div>

            <Award className="w-12 h-12 text-purple-200" />

          </div>

          <div className="flex items-center mt-4 text-sm">

            <TrendingUp className="w-4 h-4 mr-1" />

            <span>Elite Member</span>

          </div>

        </div>


        <div className="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white shadow-lg">

          <div className="flex items-center justify-between">

            <div>

              <p className="text-orange-100 text-sm">Weekly Earnings</p>

              <h3 className="text-3xl font-bold mt-1">${user.weeklyEarnings.toLocaleString()}</h3>

            </div>

            <Gift className="w-12 h-12 text-orange-200" />

          </div>

          <div className="flex items-center mt-4 text-sm">

            <ArrowUpRight className="w-4 h-4 mr-1" />

            <span>+8.3% from last week</span>

          </div>

        </div>

      </div>


      {/* Binary Tree Visualization */}

      <div className="bg-white rounded-xl shadow-lg p-6">

        <h2 className="text-2xl font-bold mb-6 text-gray-800">Binary Network Overview</h2>

        <div className="flex justify-center items-start space-x-8">

          {/* Left Leg */}

          <div className="text-center">

            <div className="bg-gradient-to-br from-blue-400 to-blue-500 rounded-full w-24 h-24 flex items-center justify-center text-white shadow-lg mb-3">

              <div>

                <p className="text-xs">Left Leg</p>

                <p className="text-2xl font-bold">{user.leftLeg}</p>

              </div>

            </div>

            <p className="text-gray-600 font-medium">Members</p>

          </div>


          {/* Center (You) */}

          <div className="text-center">

            <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-full w-32 h-32 flex items-center justify-center text-white shadow-xl mb-3 border-4 border-purple-300">

              <div>

                <p className="text-sm font-bold">{user.name}</p>

                <p className="text-xs">Level {user.level}</p>

              </div>

            </div>

            <p className="text-gray-800 font-bold">You</p>

          </div>


          {/* Right Leg */}

          <div className="text-center">

            <div className="bg-gradient-to-br from-green-400 to-green-500 rounded-full w-24 h-24 flex items-center justify-center text-white shadow-lg mb-3">

              <div>

                <p className="text-xs">Right Leg</p>

                <p className="text-2xl font-bold">{user.rightLeg}</p>

              </div>

            </div>

            <p className="text-gray-600 font-medium">Members</p>

          </div>

        </div>


        {/* Balance Indicator */}

        <div className="mt-8 bg-gray-50 rounded-lg p-4">

          <div className="flex items-center justify-between mb-2">

            <span className="text-sm font-medium text-gray-700">Network Balance</span>

            <span className="text-sm font-bold text-gray-900">

              {Math.abs(user.leftLeg - user.rightLeg)} difference

            </span>

          </div>

          <div className="w-full bg-gray-200 rounded-full h-3">

            <div 

              className="bg-gradient-to-r from-blue-500 to-green-500 h-3 rounded-full transition-all duration-500"

              style={{ width: `${Math.min((user.leftLeg / (user.leftLeg + user.rightLeg)) * 100, 100)}%` }}

            ></div>

          </div>

          <div className="flex justify-between mt-1">

            <span className="text-xs text-gray-500">Left: {user.leftLeg}</span>

            <span className="text-xs text-gray-500">Right: {user.rightLeg}</span>

          </div>

        </div>

      </div>


      {/* Recent Activity */}

      <div className="bg-white rounded-xl shadow-lg p-6">

        <h2 className="text-2xl font-bold mb-4 text-gray-800">Recent Activity</h2>

        <div className="space-y-3">

          {recentActivity.map(activity => (

            <div key={activity.id} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">

              <div className="flex items-center space-x-4">

                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${

                  activity.type === 'referral' ? 'bg-blue-100 text-blue-600' :

                  activity.type === 'commission' ? 'bg-green-100 text-green-600' :

                  'bg-orange-100 text-orange-600'

                }`}>

                  {activity.type === 'referral' ? <UserPlus className="w-5 h-5" /> :

                   activity.type === 'commission' ? <DollarSign className="w-5 h-5" /> :

                   <Gift className="w-5 h-5" />}

                </div>

                <div>

                  <p className="font-medium text-gray-800">{activity.user}</p>

                  <p className="text-sm text-gray-500 capitalize">{activity.type}</p>

                </div>

              </div>

              <div className="text-right">

                <p className="font-bold text-green-600">+${activity.amount}</p>

                <p className="text-xs text-gray-500">{activity.time}</p>

              </div>

            </div>

          ))}

        </div>

      </div>

    </div>

  );


  const renderNetwork = () => (

    <div className="bg-white rounded-xl shadow-lg p-6">

      <h2 className="text-2xl font-bold mb-6 text-gray-800">Network Structure</h2>

      <div className="text-center text-gray-500 py-12">

        <Users className="w-16 h-16 mx-auto mb-4 text-gray-300" />

        <p className="text-lg">Detailed network tree view coming soon...</p>

      </div>

    </div>

  );


  const renderEarnings = () => (

    <div className="space-y-6">

      <div className="bg-white rounded-xl shadow-lg p-6">

        <h2 className="text-2xl font-bold mb-6 text-gray-800">Earnings Breakdown</h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">

          <div className="bg-blue-50 rounded-lg p-4 border-l-4 border-blue-500">

            <p className="text-sm text-gray-600 mb-1">Direct Referral Bonus</p>

            <p className="text-2xl font-bold text-blue-600">$4,250</p>

          </div>

          <div className="bg-green-50 rounded-lg p-4 border-l-4 border-green-500">

            <p className="text-sm text-gray-600 mb-1">Binary Commission</p>

            <p className="text-2xl font-bold text-green-600">$6,800</p>

          </div>

          <div className="bg-purple-50 rounded-lg p-4 border-l-4 border-purple-500">

            <p className="text-sm text-gray-600 mb-1">Matching Bonus</p>

            <p className="text-2xl font-bold text-purple-600">$1,400</p>

          </div>

        </div>

      </div>

    </div>

  );


  return (

    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">

      {/* Header */}

      <div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-xl">

        <div className="max-w-7xl mx-auto px-4 py-6">

          <div className="flex items-center justify-between">

            <div>

              <h1 className="text-3xl font-bold">Binary MLM Dashboard</h1>

              <p className="text-purple-100 mt-1">Welcome back, {user.name}!</p>

            </div>

            <div className="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">

              <p className="text-sm text-purple-100">Member Since</p>

              <p className="text-lg font-bold">Jan 2024</p>

            </div>

          </div>

        </div>

      </div>


      {/* Navigation */}

      <div className="bg-white shadow-md sticky top-0 z-10">

        <div className="max-w-7xl mx-auto px-4">

          <div className="flex space-x-8">

            {['dashboard', 'network', 'earnings', 'referrals'].map(tab => (

              <button

                key={tab}

                onClick={() => setActiveTab(tab)}

                className={`py-4 px-2 font-medium capitalize transition-colors relative ${

                  activeTab === tab 

                    ? 'text-purple-600' 

                    : 'text-gray-600 hover:text-gray-900'

                }`}

              >

                {tab}

                {activeTab === tab && (

                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-purple-600 rounded-t"></div>

                )}

              </button>

            ))}

          </div>

        </div>

      </div>


      {/* Main Content */}

      <div className="max-w-7xl mx-auto px-4 py-8">

        {activeTab === 'dashboard' && renderDashboard()}

        {activeTab === 'network' && renderNetwork()}

        {activeTab === 'earnings' && renderEarnings()}

        {activeTab === 'referrals' && (

          <div className="bg-white rounded-xl shadow-lg p-6">

            <h2 className="text-2xl font-bold mb-6 text-gray-800">Referral Program</h2>

            <div className="bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg p-6 text-white mb-6">

              <h3 className="text-xl font-bold mb-2">Your Referral Link</h3>

              <div className="bg-white/20 backdrop-blur-sm rounded px-4 py-3 flex items-center justify-between">

                <code className="text-sm">https://mlm.com/ref/JOHNDOE123</code>

                <button className="bg-white text-purple-600 px-4 py-2 rounded font-medium hover:bg-purple-50 transition-colors">

                  Copy

                </button>

              </div>

            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

              <div className="bg-blue-50 rounded-lg p-4">

                <p className="text-sm text-gray-600 mb-1">Direct Referrals</p>

                <p className="text-3xl font-bold text-blue-600">{user.directReferrals}</p>

              </div>

              <div className="bg-green-50 rounded-lg p-4">

                <p className="text-sm text-gray-600 mb-1">Referral Earnings</p>

                <p className="text-3xl font-bold text-green-600">$1,200</p>

              </div>

            </div>

          </div>

        )}

      </div>

    </div>

  );

};


export default BinaryMLMSystem; 

Comments

Post a Comment

Popular posts from this blog

Rappel/AbseilingAbseiling: Exploring the Thrill and Safety Precautions of Controlled Descents

 Abseiling: Exploring the Thrill and Safety Precautions of Controlled Descents Introduction: Abseiling, also known as rappelling, is a technique that allows climbers, rope access technicians, and rescue teams to descend vertical drops safely using ropes. This controlled descent method has its origins in the 19th century and has evolved to become an essential skill in various outdoor and industrial applications. In this article, we'll delve into the history of abseiling, the equipment used, and the precautions climbers need to take to ensure a safe and enjoyable experience. History of Abseiling: The history of abseiling dates back to the late 19th century, attributed to Jean Charlet-Straton, a Chamonix guide. In 1876, Charlet developed the abseil technique during an unsuccessful solo attempt on the Petit Dru. Eventually, with the help of other guides, he perfected the technique and successfully reached the summit of the Petit Dru in 1879. This marked a significant milestone in the d...
2 comments
Read more

10 Essential Climbing Tips for Beginners

10 Essential Climbing Tips for Beginners 1. Utilize Your Toes for Improved Grip One of the most common mistakes beginners make is not using their toes effectively while climbing. Using the midsole of your climbing shoes can restrict movement and reduce traction. Proper toe placement allows for better pivoting and reaching, making it easier to stand on small holds. 2. Harness the Power of Your Legs Remember that climbing isn't all about pulling yourself up; it's also about pushing. Your legs house some of the largest muscles in your body, making them valuable assets in climbing. Efficient use of your legs can help you ascend with less effort and greater stability. 3. Keep Your Arms Straight Climbing with bent arms can lead to early fatigue. Maintaining straight arms allows you to relax and distribute your weight more effectively. Think of carrying groceries with straight arms versus bent arms – the same principle applies to climbing. 4. Plan Your Route Before You Climb Take a mo...
Post a Comment
Read more

10 Essential Climbing Tips for Beginners

Post a Comment
Read more