Juan Felipe Duarte
a558e393f2
Introduces a new rank management system including the Rank model, migrations for the ranks table and user IP address, Livewire components for managing and displaying ranks, and related Blade views. Updates navigation and routes to include the new 'Gestión Rangos' section, and enhances the ShareCodeComponent with user data. Also adds a reusable input field component for forms.
195 lines
10 KiB
PHP
195 lines
10 KiB
PHP
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-12">
|
|
<div class="flex items-center justify-center gap-4">
|
|
<div>
|
|
<img src="https://cdn.imgbin.com/11/2/10/imgbin-metal-bronze-copper-platinum-bronzing-wRAqc4xeeYJw5RmknN6xuYZND.jpg"
|
|
alt="Rango Diamante" class="w-24 h-24 rounded-full object-cover">
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center justify-center gap-1 text-center">
|
|
<p class="text-lg">Rango actual</p>
|
|
<p class="text-3xl font-semibold">Bronce</p>
|
|
<div class="w-48 bg-gray-700 rounded-full h-2 mt-1">
|
|
<div class="bg-blue-500 h-2 rounded-full transition-all duration-1000 ease-linear"
|
|
style="width: {{ (4 / 5) * 100 }}%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="py-4 text-center px-4 text-sm">Te faltan $120,000 para llegar a Plata</p>
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- Tarjeta 1 -->
|
|
<div class="flex flex-col items-center justify-center p-6 rounded-xl shadow-md transition-transform duration-300">
|
|
<div class="flex gap-2 items-start">
|
|
<svg class="w-10 pt-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
|
</svg>
|
|
<p class="text-sm">Compra personal</p>
|
|
</div>
|
|
<p class="text-lg font-semibold mt-2">$70,000</p>
|
|
</div>
|
|
|
|
<!-- Tarjeta 2 -->
|
|
<div class="flex flex-col items-center justify-center p-6 rounded-xl shadow-md transition-transform duration-300">
|
|
<div class="flex gap-2 items-start">
|
|
<svg class="w-10 pt-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
|
|
</svg>
|
|
|
|
<p class="text-sm">Cashback actual</p>
|
|
</div>
|
|
<p class="text-lg font-semibold mt-2">$25,000</p>
|
|
</div>
|
|
|
|
<!-- Tarjeta 3 -->
|
|
<div class="flex flex-col items-center justify-center p-6 rounded-xl shadow-md transition-transform duration-300">
|
|
<div class="flex gap-2 items-start">
|
|
<svg class="w-10 pt-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
|
|
</svg>
|
|
|
|
<p class="text-sm">Volumen de equipo</p>
|
|
</div>
|
|
<p class="text-lg font-semibold mt-2">$1,250,000</p>
|
|
</div>
|
|
|
|
<!-- Tarjeta 4 -->
|
|
<div class="flex flex-col items-center justify-center p-6 rounded-xl shadow-md transition-transform duration-300">
|
|
<div class="flex gap-2 items-start">
|
|
<svg class="w-10 pt-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
<p class="text-sm">Directos activos</p>
|
|
</div>
|
|
<p class="text-lg font-semibold mt-2">4</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-12">
|
|
<div>
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Compartir Código</h3>
|
|
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
|
Comparte tu código de referido.
|
|
</p>
|
|
<div class="mt-4 p-4 bg-gray-100 rounded">
|
|
<span class="text-sm text-gray-700">Tu código:</span>
|
|
<div class="flex items-center mt-2">
|
|
<input type="text" id="referralLink" value="{{ route('register', ['ref' => Auth::user()->referral_code]) }}" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" readonly >
|
|
<button onclick="copyToClipboard()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" >
|
|
Copiar
|
|
</button>
|
|
</div>
|
|
<p id="copyFeedback" class="hidden text-green-600 text-xs mt-1"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
|
|
<div class="bg-white">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Mis Referidos</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Aquí puedes ver la lista de tus referidos.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col items-center space-x-2 bg-purple-50 px-4 py-2 rounded-l-lg shadow-sm">
|
|
<span class="text-gray-600 text-sm">Total de referidos</span>
|
|
<div class="flex items-center space-x-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-purple-600" >
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
|
</svg>
|
|
|
|
<span class="text-purple-700 font-semibold text-lg">
|
|
{{ $referrals->count() }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shadow overflow-hidden sm:rounded-lg">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Fecha
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Usuario
|
|
</th>
|
|
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Referidos del usuario
|
|
</th>
|
|
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Estado
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-100">
|
|
@forelse ($referrals as $item)
|
|
<tr class="hover:bg-gray-50 transition duration-150">
|
|
<td class="px-6 py-4 text-sm text-gray-700">{{ $item->created_at->format('Y-m-d') }}</td>
|
|
<td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $item->email }}</td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-700">{{ $item->children_count }}</td>
|
|
<td class="px-6 py-4 text-center select-none">
|
|
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-700">
|
|
Inactivo
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
|
|
No tienes referidos aún.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function copyToClipboard() {
|
|
const copyText = document.getElementById("referralLink");
|
|
|
|
copyText.select();
|
|
copyText.setSelectionRange(0, 99999);
|
|
|
|
document.execCommand("copy");
|
|
|
|
const feedback = document.getElementById("copyFeedback");
|
|
feedback.classList.remove("hidden");
|
|
|
|
setTimeout(() => {
|
|
feedback.classList.add("hidden");
|
|
}, 2000);
|
|
}
|
|
</script>
|