diff --git a/app/Http/Livewire/ShowUtilidades.php b/app/Http/Livewire/ShowUtilidades.php
index d0fbd48..b0759bc 100644
--- a/app/Http/Livewire/ShowUtilidades.php
+++ b/app/Http/Livewire/ShowUtilidades.php
@@ -2,12 +2,62 @@
 
 namespace App\Http\Livewire;
 
+use App\Models\Historiale;
+use App\Models\Servicio;
+use Carbon\Carbon;
 use Livewire\Component;
 
 class ShowUtilidades extends Component
 {
+    public $promocion;
+
+    public $servicio_id;
+
+    public $selectedYear = null;
+    public $selectedMonth = null;
+    public $selectedDay = null;
+
+    public function mount()
+    {
+        $today = Carbon::now();
+        $this->selectedYear = $today->format('Y');
+        $this->selectedMonth = $today->format('m');
+        $this->selectedDay = $today->format('d');
+    }
+
     public function render()
     {
-        return view('livewire.show-utilidades');
+        $query = Historiale::with('vendedor', 'tarifa', 'promocion');
+
+        if (!empty($this->servicio_id)) {
+            $query = $query->whereHas('tarifa', function ($q) {
+                $q->where('servicio_id', $this->servicio_id);
+            });
+        }
+
+        if ($this->selectedYear) {
+            $query = $query->whereYear('fecha_inicio', $this->selectedYear);
+        }
+
+        if ($this->selectedMonth) {
+            $query = $query->whereMonth('fecha_inicio', $this->selectedMonth);
+        }
+
+        if ($this->selectedDay) {
+            $query = $query->whereDay('fecha_inicio', $this->selectedDay);
+        }
+
+        if ($this->promocion) {
+            $query = $query->whereNotNull('promocion_id');
+        } else {
+            $query = $query->whereNotNull('tarifa_id');
+        }
+
+        $query = $query->where('estado', 'activo')->orderByDesc('created_at')->get();
+
+        return view('livewire.show-utilidades', [
+            'historiales' => $query,
+            'servicios' => Servicio::where('estado', 'activo')->get(),
+        ]);
     }
 }
diff --git a/app/Models/Historiale.php b/app/Models/Historiale.php
index 3a7a581..49aae21 100644
--- a/app/Models/Historiale.php
+++ b/app/Models/Historiale.php
@@ -44,7 +44,4 @@ class Historiale extends Model
     public function cuentas_obsoletas(){
         return $this ->belongsToMany(Cuentas::class,'logs','historial_id','cuenta_id');
     }
-
-
-
 }
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index b00aad2..5d25419 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -109,6 +109,7 @@ x-data="{ menuG:false}"
                         <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('categoria') }}">Gestión Categorias</a>
                         <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('logs') }}">Logs cuentas</a>
                         <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('logsRecargas') }}">Logs recargas</a>
+                        <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('utilidades') }}">Utilidades</a>
                         <a class="block cursor-pointer hover:rounded-b-md rounded-b-md text-center hover:bg-[#d1d3e1] w-full px-3 py-1" href="{{ route('configuracion') }}">Configuración</a>
                         @endif
                     </p>
diff --git a/resources/views/livewire/show-utilidades.blade.php b/resources/views/livewire/show-utilidades.blade.php
index 0bf1ae7..e968548 100644
--- a/resources/views/livewire/show-utilidades.blade.php
+++ b/resources/views/livewire/show-utilidades.blade.php
@@ -1,3 +1,148 @@
-<div>
-    {{-- Care about people's approval and you will be their prisoner. --}}
-</div>
+    <div class="h-full w-full md:my-2">
+        <div class="bg-[#f5f5f5]   md:w-[100%] m-auto p-2 md:p-5 rounded-[1.2rem]   relative  mb-2">
+            <div class="flex justify-start my-2 items-center mb-4 gap-8">
+                <div class="flex text-sm">
+                    <svg class="w-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0"
+                        viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
+                        <path
+                            d="M15.4,9.88,10.81,5.29a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L14,11.29a1,1,0,0,1,0,1.42L9.4,17.29a1,1,0,0,0,1.41,1.42l4.59-4.59A3,3,0,0,0,15.4,9.88Z"
+                            fill="#b221fd" data-original="#000000" />
+                    </svg>
+                    Utilidades
+                </div>
+
+                <div class="my-1 md:my-0">
+                    <label for="promocion">Promociones</label>
+                    <input type="checkbox" name="promocion" id="promocion" wire:model="promocion">
+                </div>
+            </div>
+
+            <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 my-6 mx-6">
+                <div>
+                    <label for="servicios" class="text-gray-600 text-sm font-semibold block">Filtrar por
+                        servicio:</label>
+                    <select name="servicios" id="servicios" wire:model.debounce.500ms="servicio_id"
+                        class="select-css px-3 py-2 border border-gray-200 rounded-lg shadow focus:border-gray-400 focus:shadow-md focus:ring-0 w-full">
+                        <option value="" selected>Servicios</option>
+                        @foreach ($servicios as $servicio)
+                            <option value="{{ $servicio->id }}">{{ $servicio->nombre ?? '' }}</option>
+                        @endforeach
+                    </select>
+                </div>
+                <div>
+                    <label for="filter-year" class="text-gray-600 text-sm font-semibold block">Filtrar por año:</label>
+                    <select wire:model="selectedYear" id="filter-year"
+                        class="select-css px-3 py-2 border border-gray-200 rounded-lg shadow focus:border-gray-400 focus:shadow-md focus:ring-0 w-full">
+                        <option value="">Todos</option>
+                        @php
+                            $currentYear = date('Y');
+                            $startYear = $currentYear - 10;
+                            $endYear = $currentYear + 10;
+                        @endphp
+                        @for ($year = $startYear; $year <= $endYear; $year++)
+                            <option value="{{ $year }}" @if ($selectedYear == $year) selected @endif>
+                                {{ $year }}</option>
+                        @endfor
+                    </select>
+                </div>
+
+                <div>
+                    <label for="filter-month" class="text-gray-600 text-sm font-semibold block">Filtrar por mes:</label>
+                    <select wire:model="selectedMonth" id="filter-month"
+                        class="select-css px-3 py-2 border border-gray-200 rounded-lg shadow focus:border-gray-400 focus:shadow-md focus:ring-0 w-full">
+                        <option value="">Todos</option>
+                        <option value="01">ENERO</option>
+                        <option value="02">FEBRERO</option>
+                        <option value="03">MARZO</option>
+                        <option value="04">ABRIL</option>
+                        <option value="05">MAYO</option>
+                        <option value="06">JUNIO</option>
+                        <option value="07">JULIO</option>
+                        <option value="08">AGOSTO</option>
+                        <option value="09">SEPTIEMBRE</option>
+                        <option value="10">OCTUBRE</option>
+                        <option value="11">NOVIEMBRE</option>
+                        <option value="12">DICIEMBRE</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label for="filter-day" class="text-gray-600 text-sm font-semibold block">Filtrar por día:</label>
+                    <select wire:model="selectedDay" id="filter-day"
+                        class="select-css px-3 py-2 border border-gray-200 rounded-lg shadow focus:border-gray-400 focus:shadow-md focus:ring-0 w-full">
+                        <option value="">Todos</option>
+                        @for ($day = 1; $day <= 31; $day++)
+                            <option value="{{ str_pad($day, 2, '0', STR_PAD_LEFT) }}">{{ $day }}</option>
+                        @endfor
+                    </select>
+                </div>
+            </div>
+
+            <div class="mt-2">
+                <h1 class="text-center text-lg sm:mb-4">Utilidades</h1>
+                <div class="py-2">
+                    <table wire:loading.class="opacity-50 cursor-wait" class="text-center rounded-lg shadow-lg m-auto mt-4 mb-4  bg-white md:w-10/12">
+                        <thead class="font-normal bg-[#000029] text-white h-9 pr-4 sm:pr-2">
+                            <tr class="text-left">
+                                <th class="rounded-l-lg font-normal w-1/12 pr-[1rem] md:pl-[2rem]">Fecha inicio</th>
+                                <th class="font-normal  w-1/12 pl-[1rem] sm:pr-[2rem]">Servicio</th>
+                                <th class="font-normal  w-1/12 pl-[1rem] sm:pr-[2rem]">Pantallas</th>
+                                <th class="font-normal  w-1/12 pl-[1rem] sm:pr-[2rem]">valor</th>
+                                <th class="rounded-r-lg font-normal w-1/12 pr-[1rem] md:pl-[2rem]">Utilidad</th>
+                            </tr>
+                        </thead>
+                        @php
+                            $totalUtilidades = 0;
+                        @endphp
+                        <tbody class="text-gray-500 select-none pr-4 sm:pr-2">
+                            @foreach ($historiales as $historial)
+                                <tr
+                                    class="border-gray-200 text-left w-full sm:pl-4 hover:bg-gray-200 hover:ring-gray-500">
+                                    <td class="md:pl-[2rem] md:pr-[2rem]">
+                                        {{ $historial->fecha_inicio }}
+                                    </td>
+                                    <td class="md:pl-[2rem] md:pr-[2rem]">
+                                        {{ $historial->tarifa->servicio->nombre }}
+                                    </td>
+                                    <td class="md:pl-[2rem] md:pr-[2rem]">
+                                        {{ $historial->tarifa->pantallas }}
+                                    </td>
+                                    <td class="md:pl-[2rem] md:pr-[2rem]">
+                                        ${{ $historial->tarifa->servicio->precio }}
+                                    </td>
+                                    <td class="md:pl-[2rem] md:pr-[2rem] text-right">
+                                        ${{ number_format($historial->tarifa->servicio->precio / $historial->tarifa->pantallas ?? 0, 2, ',', '.') }}
+                                    </td>
+                                </tr>
+                                @php
+                                    $totalUtilidades += $historial->tarifa->servicio->precio / $historial->tarifa->pantallas;
+                                @endphp
+                            @endforeach
+                            <tr>
+                                <td class="border-t border-b">
+
+                                </td>
+                                <td class="border-t border-b">
+
+                                </td>
+                                <td class="border-t border-b">
+
+                                </td>
+                                <th class="border-t border-l border-b">
+                                    <p class="flex items-center px-6 py-4 cursor-pointer">
+                                        Utilidad Total
+                                    </p>
+                                </th>
+                                <td class="border-t border-b">
+                                    <p class="flex items-center px-6 py-4 cursor-pointer">
+                                        $ {{ number_format($totalUtilidades ?? 0, 2, ',', '.') }}
+                                    </p>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>