import { Head } from '@inertiajs/react'; import { Copy, LinkIcon, UsersRound } from 'lucide-react'; import { useState } from 'react'; import { AppPage, AppPageHeader, AppPageTitleBlock, appCardAccentClass, } from '@/components/app-page'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { dashboard } from '@/routes'; type ReferralSummary = { code: string; link: string; direct_count: number; indirect_count: number; total_earnings_usd: string; direct_earnings_usd: string; indirect_earnings_usd: string; }; type ReferralRow = { id: number; name: string; email: string; via: string | null; created_at: string | null; earnings_usd: string; earnings_count: number; }; type EarningRow = { id: number; level: number; amount_usd: string; base_percent: string | null; source_investor: string; source_investor_email: string | null; source_investment_txid: string; created_at: string | null; }; type PropsDisabled = { referral_program_enabled: false; }; type PropsEnabled = { referral_program_enabled: true; referral: ReferralSummary; direct_referrals: ReferralRow[]; indirect_referrals: ReferralRow[]; earnings: EarningRow[]; }; type Props = PropsDisabled | PropsEnabled; function formatDate(value: string | null): string { if (!value) return '—'; try { return new Intl.DateTimeFormat('es', { dateStyle: 'short' }).format(new Date(value)); } catch { return '—'; } } function ReferralTable({ rows, indirect = false }: { rows: ReferralRow[]; indirect?: boolean }) { if (rows.length === 0) { return (

Aún no hay referidos en esta categoría.

); } return (
{indirect ? : null} {rows.map((row) => ( {indirect ? : null} ))}
UsuarioVía referidoAlta Comisiones Ganancia
{row.name || '—'}
{row.email}
{row.via}{formatDate(row.created_at)} {row.earnings_count} {row.earnings_usd} US$
); } export default function ReferralsIndex(props: Props) { const [copied, setCopied] = useState(false); if (!props.referral_program_enabled) { return ( <>
Acceso restringido Cuando recibas el alta, podrás compartir tu enlace y ver comisiones generadas por la red. ); } const { referral, direct_referrals, indirect_referrals, earnings } = props; function copyLink() { void navigator.clipboard.writeText(referral.link); setCopied(true); window.setTimeout(() => setCopied(false), 1800); } return ( <>
Tu enlace de referido También puedes compartir solo el código: {referral.code}.
{copied ?

Enlace copiado.

: null}

Directos

{referral.direct_count}

Indirectos

{referral.indirect_count}

Ganancia directa

{referral.direct_earnings_usd} US$

Ganancia indirecta

{referral.indirect_earnings_usd} US$
Referidos directos Usuarios registrados con tu código o enlace. Referidos indirectos Usuarios referidos por tus referidos directos. Últimas comisiones acreditadas Se generan cuando la plataforma acredita una ganancia a una inversión activa referida ( día a día o en el cierre mensual, según el modo vigente). {earnings.length === 0 ? (

Todavía no hay comisiones acreditadas.

) : (
{earnings.map((earning) => ( ))}
Nivel Origen Inversión % Monto Fecha
{earning.level === 1 ? 'Directo' : 'Indirecto'}
{earning.source_investor}
{earning.source_investor_email}
{earning.source_investment_txid} {earning.base_percent ?? '—'} {earning.amount_usd} US$ {formatDate(earning.created_at)}
)} ); } ReferralsIndex.layout = { breadcrumbs: [ { title: 'Inicio', href: dashboard() }, { title: 'Referidos', href: '/referidos' }, ], };