From 5b0120f7a0c347c982b1b304ff2c60ce9e8d384c Mon Sep 17 00:00:00 2001
From: erishBRBS <erishberboso10@gmail.com>
Date: Fri, 18 Apr 2025 14:35:32 +0800
Subject: [PATCH] table added

---
 app/Livewire/UserManagement.php               | 77 ++++++++++++++++++-
 .../views/components/pagination.blade.php     | 77 +++++++++++++++++++
 resources/views/layouts/dashboard.blade.php   |  6 +-
 .../about-us/top-nav/card-type.blade.php      |  6 +-
 .../top-nav/terms-and-privacy.blade.php       |  6 +-
 .../views/livewire/auth/login-form.blade.php  |  4 +-
 .../views/livewire/header/header.blade.php    | 18 ++---
 .../top-nav/photo-slider.blade.php            |  6 +-
 .../livewire/main-content-manager.blade.php   |  2 +-
 .../top-nav/card-member.blade.php             |  6 +-
 .../top-nav/locked-account.blade.php          |  6 +-
 .../livewire/navigation/drawer.blade.php      | 47 +++++------
 .../top-nav/notification.blade.php            |  8 +-
 .../views/livewire/profile/profile.blade.php  | 10 +--
 .../profile/top-nav/profile.blade.php         | 22 +++---
 .../promotion/top-nav/promotion.blade.php     |  6 +-
 .../top-nav/mobile-usage-report.blade.php     |  6 +-
 .../top-nav/registration-report.blade.php     |  6 +-
 .../top-nav/station-rating-report.blade.php   |  6 +-
 .../top-nav/top-up-usage-report.blade.php     |  6 +-
 .../station-locator/top-nav/branch.blade.php  |  6 +-
 .../station-locator/top-nav/fuel.blade.php    |  6 +-
 .../station-locator/top-nav/station.blade.php |  6 +-
 .../top-nav/system-parameter.blade.php        |  6 +-
 .../livewire/top-up/top-nav/top-up.blade.php  |  4 +-
 .../top-nav/user-management.blade.php         |  6 +-
 .../user-management/user-management.blade.php | 63 ++++++++++++++-
 routes/web.php                                |  9 ++-
 28 files changed, 329 insertions(+), 108 deletions(-)
 create mode 100644 resources/views/components/pagination.blade.php

diff --git a/app/Livewire/UserManagement.php b/app/Livewire/UserManagement.php
index a06b058..0aaae0b 100644
--- a/app/Livewire/UserManagement.php
+++ b/app/Livewire/UserManagement.php
@@ -6,8 +6,83 @@ use Livewire\Component;
 
 class UserManagement extends Component
 {
+    public $search = '';
+    public $sortField = 'username';
+    public $sortDirection = 'asc';
+    public $currentPage = 1;
+    public $perPage = 10;
+    public $expandEllipsis = false;
+
+    protected $queryString = ['search'];
+
+    protected $listeners = ['paginate-to' => 'setPage'];
+
+    public function updatingSearch()
+    {
+        $this->currentPage = 1;
+    }
+
+    public function sortBy($field)
+    {
+        if ($this->sortField === $field) {
+            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            $this->sortField = $field;
+            $this->sortDirection = 'asc';
+        }
+    }
+
+    public function searchEnter()
+    {
+        $this->currentPage = 1;
+    }
+
+    public function getFilteredUsersProperty()
+    {
+        $users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
+
+        if ($this->search) {
+            $users = $users->filter(function ($user) {
+                return str_contains(strtolower($user['username']), strtolower($this->search)) ||
+                       str_contains(strtolower($user['first_name']), strtolower($this->search)) ||
+                       str_contains(strtolower($user['last_name']), strtolower($this->search)) ||
+                       str_contains(strtolower($user['email']), strtolower($this->search));
+            });
+        }
+
+        return $users->sortBy([[$this->sortField, $this->sortDirection]])->values();
+    }
+
+    // Change this to a method instead of a property
+    public function calculateTotalPages()
+    {
+        return ceil($this->filteredUsers->count() / $this->perPage);
+    }
+
+    public function getPaginatedUsersProperty()
+    {
+        return $this->filteredUsers
+            ->slice(($this->currentPage - 1) * $this->perPage, $this->perPage)
+            ->values();
+    }
+
+    public function setPage($page)
+    {
+        $this->currentPage = max(1, min($this->calculateTotalPages(), $page));
+        $this->expandEllipsis = false;
+    }
+    public function toggleEllipsis()
+    {
+        $this->expandEllipsis = !$this->expandEllipsis;
+    }
+
     public function render()
     {
-        return view('livewire.user-management.user-management');
+        return view('livewire.user-management.user-management', [
+            'users' => $this->paginatedUsers,
+            'totalPages' => $this->calculateTotalPages(), // Now using the method
+            'currentPage' => $this->currentPage,
+            'expandEllipsis' => $this->expandEllipsis,
+        ]);
     }
 }
diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php
new file mode 100644
index 0000000..9daa243
--- /dev/null
+++ b/resources/views/components/pagination.blade.php
@@ -0,0 +1,77 @@
+@props(['currentPage', 'totalPages'])
+
+@if ($totalPages > 1)
+    <nav class="flex justify-center mt-4">
+        <ul class="inline-flex space-x-1 items-center">
+
+            {{-- Previous --}}
+            <li>
+                <button
+                    wire:click="setPage({{ max(1, $currentPage - 1) }})"
+                    class="px-3 py-1 border rounded {{ $currentPage === 1 ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
+                    {{ $currentPage === 1 ? 'disabled' : '' }}
+                >
+                    Prev
+                </button>
+            </li>
+
+            @php
+                $start = max(1, min($currentPage - 2, $totalPages - 4));
+                $end = min($totalPages, $start + 4);
+            @endphp
+
+            {{-- Leading Pages --}}
+            @if ($start > 1)
+                <li>
+                    <button 
+                        wire:click="setPage(1)" 
+                        class="px-3 py-1 border rounded {{ $currentPage === 1 ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
+                    >
+                        1
+                    </button>
+                </li>
+                @if ($start > 2)
+                    <li><span class="px-2">...</span></li>
+                @endif
+            @endif
+
+            {{-- Main Range --}}
+            @for ($i = $start; $i <= $end; $i++)
+                <li>
+                    <button 
+                        wire:click="setPage({{ $i }})" 
+                        class="px-3 py-1 border rounded {{ $currentPage === $i ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
+                    >
+                        {{ $i }}
+                    </button>
+                </li>
+            @endfor
+
+            {{-- Trailing Pages --}}
+            @if ($end < $totalPages)
+                @if ($end < $totalPages - 1)
+                    <li><span class="px-2">...</span></li>
+                @endif
+                <li>
+                    <button 
+                        wire:click="setPage({{ $totalPages }})" 
+                        class="px-3 py-1 border rounded {{ $currentPage === $totalPages ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
+                    >
+                        {{ $totalPages }}
+                    </button>
+                </li>
+            @endif
+
+            {{-- Next --}}
+            <li>
+                <button
+                    wire:click="setPage({{ min($totalPages, $currentPage + 1) }})"
+                    class="px-3 py-1 border rounded {{ $currentPage === $totalPages ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
+                    {{ $currentPage === $totalPages ? 'disabled' : '' }}
+                >
+                    Next
+                </button>
+            </li>
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/layouts/dashboard.blade.php b/resources/views/layouts/dashboard.blade.php
index b67ed5f..fba2f71 100644
--- a/resources/views/layouts/dashboard.blade.php
+++ b/resources/views/layouts/dashboard.blade.php
@@ -2,9 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Dashboard</title>
+    <link rel="icon" href="{{ asset('assets/favicon_unioil.ico') }}" type="image/x-icon">
+
+    <title>Unioil</title>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
-    @livewireStyles
+    @livewireStyles <!-- Add Livewire Styles -->
 </head>
 <body class="flex h-screen">
 
diff --git a/resources/views/livewire/about-us/top-nav/card-type.blade.php b/resources/views/livewire/about-us/top-nav/card-type.blade.php
index 319f978..0c2c94b 100644
--- a/resources/views/livewire/about-us/top-nav/card-type.blade.php
+++ b/resources/views/livewire/about-us/top-nav/card-type.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/about-us/card-type" class="hover:text-orange-600">
             Card Types
         </a>
diff --git a/resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php b/resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php
index 40668c8..1197ed4 100644
--- a/resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php
+++ b/resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/about-us/terms-and-privacy" class="hover:text-orange-600">Terms & Privacy</a>
     </div>
 
diff --git a/resources/views/livewire/auth/login-form.blade.php b/resources/views/livewire/auth/login-form.blade.php
index a2eea2a..1a51f97 100644
--- a/resources/views/livewire/auth/login-form.blade.php
+++ b/resources/views/livewire/auth/login-form.blade.php
@@ -25,7 +25,9 @@
                     <a href="#" class="text-blue-600 hover:underline" wire:click.prevent="forgotUsername">Forgot Username</a>
                 </div>
 
-                <button type="submit" class="w-full bg-orange-600 font-bold hover:bg-orange-400 text-white py-2 rounded-md">Log in</button>
+                <!-- <button type="submit" class="w-full bg-orange-600 font-bold hover:bg-orange-400 text-white py-2 rounded-md">Log in</button>   commented as of now for fast navigation--> 
+                <a href="/main/profile" class="block text-center w-full bg-orange-600 font-bold hover:bg-orange-400 text-white py-2 rounded-md">Log in</a>
+
             </form>
         </div>
     </div>
diff --git a/resources/views/livewire/header/header.blade.php b/resources/views/livewire/header/header.blade.php
index 1ae3ba5..92a45d1 100644
--- a/resources/views/livewire/header/header.blade.php
+++ b/resources/views/livewire/header/header.blade.php
@@ -1,11 +1,11 @@
-<div class="bg-orange-600 text-white p-5">
-<div class="flex items-center justify-end text-white text-xl px-4 py-3 relative">
+<div class="bg-orange-600 text-white ">
+<div class="flex items-center justify-end text-white text-xl px-4 py-3 relative ">
 
     <!-- Right section: User dropdown -->
     <div class="relative" x-data="{ open: false }">
         <button @click="open = !open" class="flex items-center space-x-2 focus:outline-none">
-            <x-heroicon-s-user-circle class="w-10 h-10" />
-            <span class="text-white">LBTek Systems</span>
+            <x-heroicon-s-user-circle class="w-7 h-7" />
+            <span class="text-white text-sm">LBTek Systems</span>
             <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
             </svg>
@@ -13,14 +13,14 @@
 
         <!-- Dropdown Menu -->
         <div x-show="open" @click.away="open = false"
-             class="absolute right-0 mt-2 w-48 bg-white text-gray-800 rounded-md shadow-lg z-50 py-2">
+             class="absolute mt-2 w-40 bg-white text-gray-800 rounded-md shadow-lg z-50 py-2">
             <a href="/main/profile" class="flex items-center px-4 py-2 hover:bg-gray-100">
-                <x-heroicon-o-user-circle class="w-8 h-8 mr-5"/>
-                <span> My Profile</span>
+                <x-heroicon-o-user-circle class="w-5 h-5 mr-5"/>
+                <span class="text-sm"> My Profile</span>
             </a>
             <a href="/login" class="flex items-center px-4 py-2 hover:bg-gray-100">
-                <x-heroicon-o-arrow-left-start-on-rectangle class="w-8 h-8 mr-5" />
-                <span>Logout</span>
+                <x-heroicon-o-arrow-left-start-on-rectangle class="w-5 h-5 mr-5" />
+                <span class="text-sm"> Log out</span>
             </a>
         </div>
     </div>
diff --git a/resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php b/resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php
index 47565a1..7c561d9 100644
--- a/resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php
+++ b/resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/home-page/photo-slider" class="hover:text-orange-600">
             Photo Sliders
         </a>
diff --git a/resources/views/livewire/main-content-manager.blade.php b/resources/views/livewire/main-content-manager.blade.php
index 5a32877..fb1021f 100644
--- a/resources/views/livewire/main-content-manager.blade.php
+++ b/resources/views/livewire/main-content-manager.blade.php
@@ -82,7 +82,7 @@
             <livewire:fuel />
             @break
         <!-- end -->
-
+         
         @default
             <livewire: profile />
     @endswitch
diff --git a/resources/views/livewire/member-management/top-nav/card-member.blade.php b/resources/views/livewire/member-management/top-nav/card-member.blade.php
index 17c0896..601278b 100644
--- a/resources/views/livewire/member-management/top-nav/card-member.blade.php
+++ b/resources/views/livewire/member-management/top-nav/card-member.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/member-management/card-member" class="hover:text-orange-600">
             Card Members
         </a>
diff --git a/resources/views/livewire/member-management/top-nav/locked-account.blade.php b/resources/views/livewire/member-management/top-nav/locked-account.blade.php
index cf24dd7..8111f83 100644
--- a/resources/views/livewire/member-management/top-nav/locked-account.blade.php
+++ b/resources/views/livewire/member-management/top-nav/locked-account.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/member-management/locked-account" class="hover:text-orange-600">
             Locked Accounts
         </a>
diff --git a/resources/views/livewire/navigation/drawer.blade.php b/resources/views/livewire/navigation/drawer.blade.php
index 697e710..5ceed88 100644
--- a/resources/views/livewire/navigation/drawer.blade.php
+++ b/resources/views/livewire/navigation/drawer.blade.php
@@ -1,6 +1,6 @@
 <div class="w-80 bg-slate-50 text-black flex-shrink-0">
     <div class="text-center mb-5">
-        <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto max-w-md mt-5">
+        <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto w-20 mt-5">
     </div>
     
     <nav class="flex flex-col space-y-2 p-4">
@@ -10,19 +10,19 @@
             }
         @endphp
 
-    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
+    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
         <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
         <span class="{{ activeClass('main/user-management') }}">User Management</span>
     </a>
 
-    <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/notification') }}">
+    <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/notification') }}">
         <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
         <span class="{{ activeClass('main/notification') }}">Notifications</span>
     </a>
 
     <!-- Dropdown: Member Management -->
     <div x-data="{ open: $persist(false).as('dropdown-member-management') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
                 <span class="{{ activeClass('main/member-management*') }}">Member Management</span>
@@ -32,14 +32,14 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/member-management/card-member" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
-            <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
+            <a wire:navigate href="/main/member-management/card-member" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
+            <a wire:navigate href="/main/member-management/locked-account" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
         </div>
     </div>
 
     <!-- Dropdown: Home Page (Mobile) -->
     <div x-data="{ open: $persist(false).as('dropdown-home-page') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" />
                 <span class="{{ activeClass('main/home-page-mobile*') }}">Home Page (Mobile)</span>
@@ -49,23 +49,23 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
+            <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
         </div>
     </div>
 
-    <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/promotion') }}">
+    <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/promotion') }}">
         <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
         <span class="{{ activeClass('main/promotion') }}">Promotions</span>
     </a>
 
-    <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up') }}">
+    <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up') }}">
         <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
         <span class="{{ activeClass('main/top-up') }}">Top Up</span>
     </a>
 
     <!-- Dropdown: About Us -->
     <div x-data="{ open: $persist(false).as('dropdown-about-us') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
                 <span class="{{ activeClass('main/about-us*') }}">About Us</span>
@@ -75,14 +75,14 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/about-us/card-type" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Types</a>
-            <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
+            <a wire:navigate href="/main/about-us/card-type" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Types</a>
+            <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
         </div>
     </div>
 
     <!-- Dropdown: Reports -->
     <div x-data="{ open: $persist(false).as('dropdown-report') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
                 <span class="{{ activeClass('main/report*') }}">Reports</span>
@@ -92,21 +92,21 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/report/registration-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
-            <a wire:navigate href="/main/report/top-up-usage-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
-            <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
-            <a wire:navigate href="/main/report/station-rating-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
+            <a wire:navigate href="/main/report/registration-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
+            <a wire:navigate href="/main/report/top-up-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
+            <a wire:navigate href="/main/report/mobile-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
+            <a wire:navigate href="/main/report/station-rating-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
         </div>
     </div>
 
-    <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/system-parameter') }}">
+    <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/system-parameter') }}">
         <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
         <span class="{{ activeClass('main/system-parameter') }}">System Parameters</span>
     </a>
 
     <!-- Dropdown: Station Locator -->
     <div x-data="{ open: $persist(false).as('dropdown-station-locator') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
                 <span class="{{ activeClass('main/station-locator*') }}">Station Locator</span>
@@ -116,10 +116,11 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/station-locator/branch" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
-            <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
-            <a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
+            <a wire:navigate href="/main/station-locator/branch" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
+            <a wire:navigate href="/main/station-locator/station" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
+            <a wire:navigate href="/main/station-locator/fuel" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
         </div>
     </div>
+
 </nav>
 </div>
diff --git a/resources/views/livewire/notification/top-nav/notification.blade.php b/resources/views/livewire/notification/top-nav/notification.blade.php
index adf60b5..ae64a5a 100644
--- a/resources/views/livewire/notification/top-nav/notification.blade.php
+++ b/resources/views/livewire/notification/top-nav/notification.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
-        <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+        <a href="/main/profile" class="flex items-center w-fit text-xs hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/notification" class="hover:text-orange-600">
             Notifications
         </a>
diff --git a/resources/views/livewire/profile/profile.blade.php b/resources/views/livewire/profile/profile.blade.php
index 49fdc78..8d879df 100644
--- a/resources/views/livewire/profile/profile.blade.php
+++ b/resources/views/livewire/profile/profile.blade.php
@@ -4,12 +4,12 @@
     @include('livewire.profile.top-nav.profile')
 
     <div class="mt-10">
-            <div class="flex items-center space-x-4 px-5 py-10 bg-gray-300">
-                <x-heroicon-s-user-circle class="w-[120px] h-[120px] mr-5 text-gray-500"/>
-                <h3 class="text-5xl font-semibold text-gray-800">LBTek Systems</h3>
+            <div class="flex items-center space-x-4 px-5 py-4 bg-gray-300">
+                <x-heroicon-s-user-circle class="w-20 h-20 mr-2 text-gray-500"/>
+                <h3 class="text-2xl font-semibold text-gray-800">LBTek Systems</h3>
             </div>
 
-            <div class="text-xl px-5 bg-white">
+            <div class="text-md px-10 p-10 bg-white">
                 <div>
                     <h4 class="font-bold mb-5">My Information</h4>
                     <p><span class="font-semibold">Username:</span> lbteksupport</p>
@@ -17,7 +17,7 @@
                             class="text-blue-600 hover:underline">support@lbteksystems.com</a></p>
                 </div>
                 <div>
-                    <h4 class="font-bold mt-10">Access Role</h4>
+                    <h4 class="font-bold mt-10 mb-5">Access Role</h4>
                     <p><span class="font-semibold">Role:</span> System Admin</p>
                 </div>
             </div>
diff --git a/resources/views/livewire/profile/top-nav/profile.blade.php b/resources/views/livewire/profile/top-nav/profile.blade.php
index 06de3e0..c3507f7 100644
--- a/resources/views/livewire/profile/top-nav/profile.blade.php
+++ b/resources/views/livewire/profile/top-nav/profile.blade.php
@@ -1,16 +1,18 @@
-<!-- top-nav/profile.blade.php -->
 <div>
-    <!-- Home breadcrumb and page title stacked vertically -->
-    <div class="flex flex-col gap-6">
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
-        <a href="/main/profile"
-           class="flex items-center w-fit text-sm text-gray-600 hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+        <a href="/main/profile" class="flex items-center w-fit text-xs hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-
-        <!-- Page Title -->
-        <h3 class="text-5xl font-semibold text-gray-800">My Profile</h3>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+            Profile
     </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">My Profile</h3>
+
+    <!-- Bottom border -->
     <div class="border-b border-gray-300 mt-5"></div>
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/promotion/top-nav/promotion.blade.php b/resources/views/livewire/promotion/top-nav/promotion.blade.php
index 076654b..89645da 100644
--- a/resources/views/livewire/promotion/top-nav/promotion.blade.php
+++ b/resources/views/livewire/promotion/top-nav/promotion.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/promotion" class="hover:text-orange-600">
             Promotions
         </a>
diff --git a/resources/views/livewire/report/top-nav/mobile-usage-report.blade.php b/resources/views/livewire/report/top-nav/mobile-usage-report.blade.php
index 9082667..3a58714 100644
--- a/resources/views/livewire/report/top-nav/mobile-usage-report.blade.php
+++ b/resources/views/livewire/report/top-nav/mobile-usage-report.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/report/mobile-usage-report" class="hover:text-orange-600">
             Mobile Usage Report
         </a>
diff --git a/resources/views/livewire/report/top-nav/registration-report.blade.php b/resources/views/livewire/report/top-nav/registration-report.blade.php
index 548985b..68580fb 100644
--- a/resources/views/livewire/report/top-nav/registration-report.blade.php
+++ b/resources/views/livewire/report/top-nav/registration-report.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/report/registration-report" class="hover:text-orange-600">
             Registration Report
         </a>
diff --git a/resources/views/livewire/report/top-nav/station-rating-report.blade.php b/resources/views/livewire/report/top-nav/station-rating-report.blade.php
index d0bbb3b..4386f21 100644
--- a/resources/views/livewire/report/top-nav/station-rating-report.blade.php
+++ b/resources/views/livewire/report/top-nav/station-rating-report.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/report/station-rating-report" class="hover:text-orange-600">
             Station Rating Report
         </a>
diff --git a/resources/views/livewire/report/top-nav/top-up-usage-report.blade.php b/resources/views/livewire/report/top-nav/top-up-usage-report.blade.php
index caa027e..c6f68c0 100644
--- a/resources/views/livewire/report/top-nav/top-up-usage-report.blade.php
+++ b/resources/views/livewire/report/top-nav/top-up-usage-report.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/report/top-up-usage-report" class="hover:text-orange-600">
             Top-Up Usage Report
         </a>
diff --git a/resources/views/livewire/station-locator/top-nav/branch.blade.php b/resources/views/livewire/station-locator/top-nav/branch.blade.php
index b34269d..54a4179 100644
--- a/resources/views/livewire/station-locator/top-nav/branch.blade.php
+++ b/resources/views/livewire/station-locator/top-nav/branch.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/station-locator/branch" class="hover:text-orange-600">
             Branch
         </a>
diff --git a/resources/views/livewire/station-locator/top-nav/fuel.blade.php b/resources/views/livewire/station-locator/top-nav/fuel.blade.php
index f1dc45c..2650b98 100644
--- a/resources/views/livewire/station-locator/top-nav/fuel.blade.php
+++ b/resources/views/livewire/station-locator/top-nav/fuel.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/station-locator/fuel" class="hover:text-orange-600">
             Fuel
         </a>
diff --git a/resources/views/livewire/station-locator/top-nav/station.blade.php b/resources/views/livewire/station-locator/top-nav/station.blade.php
index 0b891f7..d19bffd 100644
--- a/resources/views/livewire/station-locator/top-nav/station.blade.php
+++ b/resources/views/livewire/station-locator/top-nav/station.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/station-locator/station" class="hover:text-orange-600">
             Station
         </a>
diff --git a/resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php b/resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php
index a84b0f8..3818c06 100644
--- a/resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php
+++ b/resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/system-parameter" class="hover:text-orange-600">
             System Parameters
         </a>
diff --git a/resources/views/livewire/top-up/top-nav/top-up.blade.php b/resources/views/livewire/top-up/top-nav/top-up.blade.php
index 64cb292..5d0e754 100644
--- a/resources/views/livewire/top-up/top-nav/top-up.blade.php
+++ b/resources/views/livewire/top-up/top-nav/top-up.blade.php
@@ -1,9 +1,9 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
         <x-heroicon-o-chevron-right class="w-4 h-4" />
diff --git a/resources/views/livewire/user-management/top-nav/user-management.blade.php b/resources/views/livewire/user-management/top-nav/user-management.blade.php
index dd073ef..8a957d7 100644
--- a/resources/views/livewire/user-management/top-nav/user-management.blade.php
+++ b/resources/views/livewire/user-management/top-nav/user-management.blade.php
@@ -1,12 +1,12 @@
 <div>
     <!-- anchor tag horizontally -->
-    <div class="flex items-center gap-2 text-sm text-gray-600">
+    <div class="flex items-center gap-2 text-xs text-gray-600">
         <!-- Home link -->
         <a href="/main/profile" class="flex items-center hover:text-orange-600">
-            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
             <span class="leading-none">Home</span>
         </a>
-        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
         <a href="/main/user-management" class="hover:text-orange-600">
             User Management
         </a>
diff --git a/resources/views/livewire/user-management/user-management.blade.php b/resources/views/livewire/user-management/user-management.blade.php
index 4048318..ec60e56 100644
--- a/resources/views/livewire/user-management/user-management.blade.php
+++ b/resources/views/livewire/user-management/user-management.blade.php
@@ -1,5 +1,62 @@
 <div>
-{{-- Top Nav --}}
-@include('livewire.user-management.top-nav.user-management')
-    This is the user management page.
+    {{-- Top Nav --}}
+    @include('livewire.user-management.top-nav.user-management')
+
+    <div class="p-4 bg-white rounded shadow">
+        <div class="flex justify-between items-center mb-4">
+            <input
+                type="text"
+                placeholder="Search"
+                class="border p-2 rounded w-1/3"
+                wire:model.debounce.300ms="search"
+                wire:keydown.enter="searchEnter"
+            >
+            <button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">Add User</button>
+        </div>
+
+        <table class="min-w-full text-sm text-left border border-gray-200">
+            <thead class="bg-gray-100">
+                <tr>
+                    <th class="p-2"><input type="checkbox" /></th>
+                    @foreach(['username', 'first_name', 'last_name', 'role', 'email', 'status'] as $field)
+                        <th class="p-2 cursor-pointer select-none" wire:click="sortBy('{{ $field }}')">
+                            <div class="flex items-center space-x-1">
+                                <span>{{ ucfirst(str_replace('_', ' ', $field)) }}</span>
+                                {{-- Use one consistent icon for all headers --}}
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+                                    <path d="M10 3l3 4H7l3-4zm0 14l-3-4h6l-3 4z" />
+                                </svg>
+                            </div>
+                        </th>
+                    @endforeach
+                    <th class="p-2">Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                @forelse($users as $user)
+                    <tr class="hover:bg-gray-50">
+                        <td class="p-2"><input type="checkbox" /></td>
+                        <td class="p-2">{{ $user['username'] }}</td>
+                        <td class="p-2">{{ $user['first_name'] }}</td>
+                        <td class="p-2">{{ $user['last_name'] }}</td>
+                        <td class="p-2">{{ $user['role'] }}</td>
+                        <td class="p-2">{{ $user['email'] }}</td>
+                        <td class="p-2 text-blue-500">{{ $user['status'] }}</td>
+                        <td class="p-2 flex space-x-2 text-orange-500">
+                            <button>✏️</button>
+                            <button>🗑️</button>
+                            <button>⏱️</button>
+                        </td>
+                    </tr>
+                @empty
+                    <tr>
+                        <td class="p-2 text-center" colspan="8">No users found.</td>
+                    </tr>
+                @endforelse
+            </tbody>
+        </table>
+
+        {{-- Pagination using component --}}
+        <x-pagination :currentPage="$currentPage" :totalPages="$totalPages" />
+    </div>
 </div>
diff --git a/routes/web.php b/routes/web.php
index bb7a7f0..aed0ba3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -24,9 +24,14 @@ use Illuminate\Support\Facades\Route;
 
 
 //laravel page
-Route::get('/login', function () {
-    return view('auth.log-in'); // This will point to the resource/views/auth/log-in.blade.php
+Route::get('/', function () {
+    return redirect()->route('login'); 
 });
+Route::get('/login', function () {
+    return view('auth.log-in');
+})->name('login');
+
+
 // Route::get('/login', LoginForm::class)->name('layouts.app');
 
 // Route::get('/dashboard', function () {