import React,{useMemo,useState} from "react"; import {Card,CardContent,CardHeader,CardTitle} from "@/components/ui/card"; import {Button} from "@/components/ui/button"; import {Input} from "@/components/ui/input"; import {Badge} from "@/components/ui/badge"; import {Tabs,TabsContent,TabsList,TabsTrigger} from "@/components/ui/tabs"; import {Table,TableBody,TableCell,TableHead,TableHeader,TableRow} from "@/components/ui/table"; import {Select,SelectContent,SelectItem,SelectTrigger,SelectValue} from "@/components/ui/select"; import {Dialog,DialogContent,DialogHeader,DialogTitle,DialogTrigger} from "@/components/ui/dialog"; import {Label} from "@/components/ui/label"; import {Users,DollarSign,Network,TrendingUp,PlusCircle} from "lucide-react"; const V=5,R=.2,fmt=v=>new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0}).format(v); const seed=[ {id:1,name:"Rey Zapata",email:"rey@example.com",role:"Leader",sponsorId:null,level:0,personalProduction:125000,revShareEarned:18400,status:"Active",joinDate:"2025-01-05"}, {id:2,name:"Maria Lopez",email:"maria@example.com",role:"Agent",sponsorId:1,level:1,personalProduction:42000,revShareEarned:3200,status:"Active",joinDate:"2025-02-14"}, {id:3,name:"Carlos Rivera",email:"carlos@example.com",role:"Agent",sponsorId:1,level:1,personalProduction:38000,revShareEarned:2800,status:"Active",joinDate:"2025-03-02"}, {id:4,name:"Angela Perez",email:"angela@example.com",role:"Agent",sponsorId:2,level:2,personalProduction:26000,revShareEarned:1400,status:"Active",joinDate:"2025-04-10"}, {id:5,name:"David Mendez",email:"david@example.com",role:"Agent",sponsorId:3,level:2,personalProduction:19000,revShareEarned:850,status:"Pending",joinDate:"2025-05-01"}, {id:6,name:"Sofia Torres",email:"sofia@example.com",role:"Agent",sponsorId:4,level:3,personalProduction:22000,revShareEarned:600,status:"Active",joinDate:"2025-06-08"}, {id:7,name:"Luis Gomez",email:"luis@example.com",role:"Agent",sponsorId:6,level:4,personalProduction:17000,revShareEarned:400,status:"Active",joinDate:"2025-07-15"}, {id:8,name:"Elena Cruz",email:"elena@example.com",role:"Agent",sponsorId:7,level:5,personalProduction:14500,revShareEarned:250,status:"Active",joinDate:"2025-08-03"} ]; const kids=(a,id)=>a.filter(x=>x.sponsorId===id); const Stat=({i,t,v})=>

{i}

{t}

{v}

; const Node=({a,all,d=0})=>

{a.name}

System Level {a.level}{a.status}

{a.role} • {a.email}

Rev Share

{fmt(a.revShareEarned)}

{kids(all,a.id).map(c=>)}

; export default function RevShareTracker(){ const [agents,setAgents]=useState(seed),[q,setQ]=useState(""),[sf,setSf]=useState("all"),[open,setOpen]=useState(false); const [form,setForm]=useState({name:"",email:"",role:"Agent",sponsorId:"1",personalProduction:"",revShareEarned:"",status:"Active",joinDate:""}); const [cf,setCf]=useState({agentId:"2",grossCommission:"",companySharePercent:"10"}); const top=agents.find(a=>a.sponsorId===null); const filtered=useMemo(()=>agents.filter(a=>(a.name+a.email).toLowerCase().includes(q.toLowerCase())&&(sf==="all"||a.status===sf)),[agents,q,sf]); const stats=useMemo(()=>({ta:agents.length,aa:agents.filter(a=>a.status==="Active").length,tp:agents.reduce((s,a)=>s+a.personalProduction,0),tr:agents.reduce((s,a)=>s+a.revShareEarned,0)}),[agents]); const levels=useMemo(()=>Array.from({length:V},(_,i)=>({level:i+1,payoutRate:R,amount:agents.filter(a=>a.level===i+1).reduce((s,a)=>s+a.revShareEarned,0)})),[agents]); const calc=useMemo(()=>{const gross=+cf.grossCommission||0,pct=(+cf.companySharePercent||0)/100,companyShare=gross*pct,payout=companyShare*R;let cur=agents.find(a=>String(a.id)===cf.agentId)?.sponsorId,depth=1,re=[];while(cur&&depth<=V){const s=agents.find(a=>a.id===cur);if(!s)break;re.push({level:depth,name:s.name,payout});cur=s.sponsorId;depth++;}return {gross,companyShare,payout,re,undistributed:Math.max(0,companyShare-re.length*payout)};},[cf,agents]); const add=()=>{if(!form.name||!form.email)return;const s=agents.find(a=>a.id===+form.sponsorId),level=s?s.level+1:1;setAgents([...agents,{id:agents.length+1,name:form.name,email:form.email,role:form.role,sponsorId:+form.sponsorId,level,personalProduction:+form.personalProduction||0,revShareEarned:+form.revShareEarned||0,status:form.status,joinDate:form.joinDate||new Date().toISOString().slice(0,10)}]);setForm({name:"",email:"",role:"Agent",sponsorId:"1",personalProduction:"",revShareEarned:"",status:"Active",joinDate:""});setOpen(false)}; return

Executive Group Revenue Share

Revenue Share Tracker

Track unlimited downline depth while each agent only sees and earns across 5 visible payout levels.

} t="Total Agents" v={stats.ta}/>} t="Active Agents" v={stats.aa}/>} t="Production" v={fmt(stats.tp)}/>} t="Total Rev Share" v={fmt(stats.tr)}/>

AgentsTreeVisible PayoutsCommission Calculator Agent Directory

setQ(e.target.value)}/>

NameLevelProductionRev ShareStatusJoin Date{filtered.map(a=>

{a.name}

{a.email}

Level {a.level}{fmt(a.personalProduction)}{fmt(a.revShareEarned)}{a.status}{a.joinDate})}

Organization Tree{top?:"No leader found."}

Equal Payout Summary

{levels.map(x=>

Visible Level {x.level}

Equal payout rate: {(x.payoutRate*100).toFixed(0)}%

{fmt(x.amount)}

)}

Program Rules{[["Unlimited Depth","The system can store more than 5 levels overall."],["Agent Visibility","Each agent only sees and earns across the first 5 levels above them."],["Equal Distribution","Company share is split equally across up to 5 visible levels."]].map(([t,b])=>

{t}

{b}

)}

Commission Entry Calculator

Closed Agent

Gross CommissionsetCf({...cf,grossCommission:e.target.value})}/>

Company Share %setCf({...cf,companySharePercent:e.target.value})}/>

Equal payout is calculated across up to {V} visible sponsor levels.

Payout Preview

Gross Commission

{fmt(calc.gross)}

Company Share

{fmt(calc.companyShare)}

Payout Per Visible Level

{fmt(calc.payout)}

{calc.re.map(r=>

Visible Level {r.level}

{r.name}

{fmt(r.payout)}

)}{!calc.re.length&&

No eligible upline recipients found yet.

}

Undistributed Amount

{fmt(calc.undistributed)}

; }

top of page

bottom of page