Add rank management feature with CRUD and UI

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.
2025-10-23 20:28:47 -05:00
parent aa67099449
commit a558e393f2
17 changed files with 522 additions and 6 deletions
@@ -1,3 +1,88 @@
+<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">