erishberboso
/
unioil-cms-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

table added

This commit is contained in:
erishBRBS 2025-04-18 14:35:32 +08:00
parent a513e31209
commit 5b0120f7a0
28 changed files with 329 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app/Livewire/UserManagement.php
View File

@ -6,8 +6,83 @@ use Livewire\Component;
class UserManagement extends 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() 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,
]);
} }
} }

77
resources/views/components/pagination.blade.php Normal file
View File

@ -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

6
resources/views/layouts/dashboard.blade.php
View File

@ -2,9 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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']) @vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles @livewireStyles <!-- Add Livewire Styles -->
</head> </head>
<body class="flex h-screen"> <body class="flex h-screen">

6
resources/views/livewire/about-us/top-nav/card-type.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/about-us/card-type" class="hover:text-orange-600">
Card Types Card Types
</a> </a>

6
resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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> <a href="/main/about-us/terms-and-privacy" class="hover:text-orange-600">Terms & Privacy</a>
</div> </div>

4
resources/views/livewire/auth/login-form.blade.php
View File

@ -25,7 +25,9 @@
<a href="#" class="text-blue-600 hover:underline" wire:click.prevent="forgotUsername">Forgot Username</a> <a href="#" class="text-blue-600 hover:underline" wire:click.prevent="forgotUsername">Forgot Username</a>
</div> </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> </form>
</div> </div>
</div> </div>

18
resources/views/livewire/header/header.blade.php
View File

@ -1,11 +1,11 @@
<div class="bg-orange-600 text-white p-5"> <div class="bg-orange-600 text-white ">
<div class="flex items-center justify-end text-white text-xl px-4 py-3 relative"> <div class="flex items-center justify-end text-white text-xl px-4 py-3 relative ">
<!-- Right section: User dropdown --> <!-- Right section: User dropdown -->
<div class="relative" x-data="{ open: false }"> <div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="flex items-center space-x-2 focus:outline-none"> <button @click="open = !open" class="flex items-center space-x-2 focus:outline-none">
<x-heroicon-s-user-circle class="w-10 h-10" /> <x-heroicon-s-user-circle class="w-7 h-7" />
<span class="text-white">LBTek Systems</span> <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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg> </svg>
@ -13,14 +13,14 @@
<!-- Dropdown Menu --> <!-- Dropdown Menu -->
<div x-show="open" @click.away="open = false" <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"> <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"/> <x-heroicon-o-user-circle class="w-5 h-5 mr-5"/>
<span> My Profile</span> <span class="text-sm"> My Profile</span>
</a> </a>
<a href="/login" class="flex items-center px-4 py-2 hover:bg-gray-100"> <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" /> <x-heroicon-o-arrow-left-start-on-rectangle class="w-5 h-5 mr-5" />
<span>Logout</span> <span class="text-sm"> Log out</span>
</a> </a>
</div> </div>
</div> </div>

6
resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/home-page/photo-slider" class="hover:text-orange-600">
Photo Sliders Photo Sliders
</a> </a>

2
resources/views/livewire/main-content-manager.blade.php
View File

@ -82,7 +82,7 @@
<livewire:fuel /> <livewire:fuel />
@break @break
<!-- end --> <!-- end -->
@default @default
<livewire: profile /> <livewire: profile />
@endswitch @endswitch

6
resources/views/livewire/member-management/top-nav/card-member.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/member-management/card-member" class="hover:text-orange-600">
Card Members Card Members
</a> </a>

6
resources/views/livewire/member-management/top-nav/locked-account.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/member-management/locked-account" class="hover:text-orange-600">
Locked Accounts Locked Accounts
</a> </a>

47
resources/views/livewire/navigation/drawer.blade.php
View File

@ -1,6 +1,6 @@
<div class="w-80 bg-slate-50 text-black flex-shrink-0"> <div class="w-80 bg-slate-50 text-black flex-shrink-0">
<div class="text-center mb-5"> <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> </div>
<nav class="flex flex-col space-y-2 p-4"> <nav class="flex flex-col space-y-2 p-4">
@ -10,19 +10,19 @@
} }
@endphp @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') }}" /> <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
<span class="{{ activeClass('main/user-management') }}">User Management</span> <span class="{{ activeClass('main/user-management') }}">User Management</span>
</a> </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') }}" /> <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
<span class="{{ activeClass('main/notification') }}">Notifications</span> <span class="{{ activeClass('main/notification') }}">Notifications</span>
</a> </a>
<!-- Dropdown: Member Management --> <!-- Dropdown: Member Management -->
<div x-data="{ open: $persist(false).as('dropdown-member-management') }" class="relative"> <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"> <div class="flex items-center gap-2">
<x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" /> <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
<span class="{{ activeClass('main/member-management*') }}">Member Management</span> <span class="{{ activeClass('main/member-management*') }}">Member Management</span>
@ -32,14 +32,14 @@
</svg> </svg>
</button> </button>
<div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1"> <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/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 hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</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>
</div> </div>
<!-- Dropdown: Home Page (Mobile) --> <!-- Dropdown: Home Page (Mobile) -->
<div x-data="{ open: $persist(false).as('dropdown-home-page') }" class="relative"> <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"> <div class="flex items-center gap-2">
<x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" /> <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> <span class="{{ activeClass('main/home-page-mobile*') }}">Home Page (Mobile)</span>
@ -49,23 +49,23 @@
</svg> </svg>
</button> </button>
<div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1"> <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>
</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') }}" /> <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
<span class="{{ activeClass('main/promotion') }}">Promotions</span> <span class="{{ activeClass('main/promotion') }}">Promotions</span>
</a> </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') }}" /> <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
<span class="{{ activeClass('main/top-up') }}">Top Up</span> <span class="{{ activeClass('main/top-up') }}">Top Up</span>
</a> </a>
<!-- Dropdown: About Us --> <!-- Dropdown: About Us -->
<div x-data="{ open: $persist(false).as('dropdown-about-us') }" class="relative"> <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"> <div class="flex items-center gap-2">
<x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" /> <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
<span class="{{ activeClass('main/about-us*') }}">About Us</span> <span class="{{ activeClass('main/about-us*') }}">About Us</span>
@ -75,14 +75,14 @@
</svg> </svg>
</button> </button>
<div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1"> <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/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 hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</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>
</div> </div>
<!-- Dropdown: Reports --> <!-- Dropdown: Reports -->
<div x-data="{ open: $persist(false).as('dropdown-report') }" class="relative"> <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"> <div class="flex items-center gap-2">
<x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" /> <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
<span class="{{ activeClass('main/report*') }}">Reports</span> <span class="{{ activeClass('main/report*') }}">Reports</span>
@ -92,21 +92,21 @@
</svg> </svg>
</button> </button>
<div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1"> <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/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 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/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 hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile 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 hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating 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>
</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') }}" /> <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
<span class="{{ activeClass('main/system-parameter') }}">System Parameters</span> <span class="{{ activeClass('main/system-parameter') }}">System Parameters</span>
</a> </a>
<!-- Dropdown: Station Locator --> <!-- Dropdown: Station Locator -->
<div x-data="{ open: $persist(false).as('dropdown-station-locator') }" class="relative"> <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"> <div class="flex items-center gap-2">
<x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" /> <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
<span class="{{ activeClass('main/station-locator*') }}">Station Locator</span> <span class="{{ activeClass('main/station-locator*') }}">Station Locator</span>
@ -116,10 +116,11 @@
</svg> </svg>
</button> </button>
<div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1"> <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/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 hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</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 hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</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>
</div> </div>
</nav> </nav>
</div> </div>

8
resources/views/livewire/notification/top-nav/notification.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <a href="/main/profile" class="flex items-center w-fit text-xs 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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/notification" class="hover:text-orange-600">
Notifications Notifications
</a> </a>

10
resources/views/livewire/profile/profile.blade.php
View File

@ -4,12 +4,12 @@
@include('livewire.profile.top-nav.profile') @include('livewire.profile.top-nav.profile')
<div class="mt-10"> <div class="mt-10">
<div class="flex items-center space-x-4 px-5 py-10 bg-gray-300"> <div class="flex items-center space-x-4 px-5 py-4 bg-gray-300">
<x-heroicon-s-user-circle class="w-[120px] h-[120px] mr-5 text-gray-500"/> <x-heroicon-s-user-circle class="w-20 h-20 mr-2 text-gray-500"/>
<h3 class="text-5xl font-semibold text-gray-800">LBTek Systems</h3> <h3 class="text-2xl font-semibold text-gray-800">LBTek Systems</h3>
</div> </div>
<div class="text-xl px-5 bg-white"> <div class="text-md px-10 p-10 bg-white">
<div> <div>
<h4 class="font-bold mb-5">My Information</h4> <h4 class="font-bold mb-5">My Information</h4>
<p><span class="font-semibold">Username:</span> lbteksupport</p> <p><span class="font-semibold">Username:</span> lbteksupport</p>
@ -17,7 +17,7 @@
class="text-blue-600 hover:underline">support@lbteksystems.com</a></p> class="text-blue-600 hover:underline">support@lbteksystems.com</a></p>
</div> </div>
<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> <p><span class="font-semibold">Role:</span> System Admin</p>
</div> </div>
</div> </div>

22
resources/views/livewire/profile/top-nav/profile.blade.php
View File

@ -1,16 +1,18 @@
<!-- top-nav/profile.blade.php -->
<div> <div>
<!-- Home breadcrumb and page title stacked vertically --> <!-- anchor tag horizontally -->
<div class="flex flex-col gap-6"> <div class="flex items-center gap-2 text-xs text-gray-600">
<!-- Home link --> <!-- Home link -->
<a href="/main/profile" <a href="/main/profile" class="flex items-center w-fit text-xs hover:text-orange-600">
class="flex items-center w-fit text-sm text-gray-600 hover:text-orange-600"> <x-heroicon-o-home class="w-3 h-3 mr-1" />
<x-heroicon-o-home class="w-4 h-4 mr-1" />
<span class="leading-none">Home</span> <span class="leading-none">Home</span>
</a> </a>
<x-heroicon-o-chevron-right class="w-3 h-3" />
<!-- Page Title --> Profile
<h3 class="text-5xl font-semibold text-gray-800">My Profile</h3>
</div> </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 class="border-b border-gray-300 mt-5"></div>
</div> </div>

6
resources/views/livewire/promotion/top-nav/promotion.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/promotion" class="hover:text-orange-600">
Promotions Promotions
</a> </a>

6
resources/views/livewire/report/top-nav/mobile-usage-report.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/report/mobile-usage-report" class="hover:text-orange-600">
Mobile Usage Report Mobile Usage Report
</a> </a>

6
resources/views/livewire/report/top-nav/registration-report.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/report/registration-report" class="hover:text-orange-600">
Registration Report Registration Report
</a> </a>

6
resources/views/livewire/report/top-nav/station-rating-report.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/report/station-rating-report" class="hover:text-orange-600">
Station Rating Report Station Rating Report
</a> </a>

6
resources/views/livewire/report/top-nav/top-up-usage-report.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/report/top-up-usage-report" class="hover:text-orange-600">
Top-Up Usage Report Top-Up Usage Report
</a> </a>

6
resources/views/livewire/station-locator/top-nav/branch.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/station-locator/branch" class="hover:text-orange-600">
Branch Branch
</a> </a>

6
resources/views/livewire/station-locator/top-nav/fuel.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/station-locator/fuel" class="hover:text-orange-600">
Fuel Fuel
</a> </a>

6
resources/views/livewire/station-locator/top-nav/station.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/station-locator/station" class="hover:text-orange-600">
Station Station
</a> </a>

6
resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/system-parameter" class="hover:text-orange-600">
System Parameters System Parameters
</a> </a>

4
resources/views/livewire/top-up/top-nav/top-up.blade.php
View File

@ -1,9 +1,9 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </a>
<x-heroicon-o-chevron-right class="w-4 h-4" /> <x-heroicon-o-chevron-right class="w-4 h-4" />

6
resources/views/livewire/user-management/top-nav/user-management.blade.php
View File

@ -1,12 +1,12 @@
<div> <div>
<!-- anchor tag horizontally --> <!-- 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 --> <!-- Home link -->
<a href="/main/profile" class="flex items-center hover:text-orange-600"> <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> <span class="leading-none">Home</span>
</a> </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"> <a href="/main/user-management" class="hover:text-orange-600">
User Management User Management
</a> </a>

63
resources/views/livewire/user-management/user-management.blade.php
View File

@ -1,5 +1,62 @@
<div> <div>
{{-- Top Nav --}} {{-- Top Nav --}}
@include('livewire.user-management.top-nav.user-management') @include('livewire.user-management.top-nav.user-management')
This is the user management page.
<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> </div>

9
routes/web.php
View File

@ -24,9 +24,14 @@ use Illuminate\Support\Facades\Route;
//laravel page //laravel page
Route::get('/login', function () { Route::get('/', function () {
return view('auth.log-in'); // This will point to the resource/views/auth/log-in.blade.php 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('/login', LoginForm::class)->name('layouts.app');
// Route::get('/dashboard', function () { // Route::get('/dashboard', function () {