import { Head } from '@inertiajs/react'; import { CheckCircle, Clock, Copy, Check, Link2, TrendingUp, Wallet } from 'lucide-react'; import { useState } from 'react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type AffiliateCodeData = { id: number; code: string; status: 'pending' | 'approved' | 'rejected'; commission_rate: number; total_earnings: number; pending_earnings: number; }; type Commission = { id: number; amount: number; status: 'pending' | 'paid'; paid_at: string | null; created_at: string; order: { id: number; total_amount: number; created_at: string }; }; type Paginator = { data: T[]; current_page: number; last_page: number; links: { url: string | null; label: string; active: boolean }[]; }; type Props = { affiliateCode: AffiliateCodeData; commissions: Paginator; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Program Affiliate', href: '/affiliate' }, ]; function formatPrice(price: number) { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price); } export default function AffiliateIndex({ affiliateCode, commissions }: Props) { const [copied, setCopied] = useState(false); const refLink = `${window.location.origin}/ref/${affiliateCode.code}`; function copyLink() { navigator.clipboard.writeText(refLink); setCopied(true); setTimeout(() => setCopied(false), 2000); } const isPending = affiliateCode.status === 'pending'; const isRejected = affiliateCode.status === 'rejected'; const isApproved = affiliateCode.status === 'approved'; return ( <>

Program Affiliate

Bagikan link referral Anda dan dapatkan komisi setiap ada yang membeli melalui link Anda.

{/* Status Banner */} {isPending && (

Pendaftaran sedang direview

Admin sedang memverifikasi pendaftaran affiliate Anda. Link referral akan aktif setelah disetujui.

)} {isRejected && affiliateCode && (

Pendaftaran affiliate ditolak.

)} {/* Stats */}
Kode Referral

{affiliateCode.code}

Komisi {affiliateCode.commission_rate}% per transaksi

Total Komisi Dibayar

{formatPrice(affiliateCode.total_earnings)}

Menunggu Pembayaran

{formatPrice(affiliateCode.pending_earnings)}

{/* Referral Link */} {isApproved && (

Link Referral Anda

{refLink}

Tambahkan ?to=/courses/nama-kelas untuk link ke kelas tertentu.

)} {/* Commission History */}

Riwayat Komisi

{commissions.data.length > 0 ? (
{commissions.data.map((commission) => (

Order #{commission.order.id}

{new Date(commission.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}

{formatPrice(commission.amount)}

{commission.status === 'paid' ? ( Dibayar ) : ( Menunggu )}
))}
) : (

Belum ada komisi. Bagikan link referral Anda!

)}
); } AffiliateIndex.layout = (page: React.ReactNode) => ( {page} );