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

helper added in drawer

This commit is contained in:
erishBRBS 2025-04-15 16:58:01 +08:00
parent 00552747c9
commit 9f93546d23
3 changed files with 126 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/Livewire/MainContentManager.php
View File

@ -8,12 +8,12 @@ class MainContentManager extends Component
{ {
public $activePage; public $activePage;
// public function mount() public function mount()
// { {
// $segments = request()->segments(); $segments = request()->segments();
// // Get the last part of the URL path // Get the last part of the URL path
// $this->activePage = end($segments) ?? 'user-management'; $this->activePage = end($segments) ?? 'user-management';
// } }
protected $listeners = ['navigate-to-page' => 'setPage']; protected $listeners = ['navigate-to-page' => 'setPage'];

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

@ -3,31 +3,36 @@
<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 max-w-md mt-5">
</div> </div>
<nav class="flex flex-col space-y-2 p-4"> <nav class="flex flex-col space-y-2 p-4">
@php
function activeClass($path) {
return request()->is($path) ? 'text-orange-500' : '';
}
@endphp
<a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded"> <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/user-management') }}">
<x-heroicon-o-user class="w-5 h-5" /> <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
<span>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-gray-700 p-2 rounded"> <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/notification') }}">
<x-heroicon-o-bell class="w-5 h-5" /> <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
<span>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-gray-700 p-2 rounded"> <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 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" /> <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
<span>Member Management</span> <span class="{{ activeClass('main/member-management*') }}">Member Management</span>
</div> </div>
<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>
</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-gray-700 p-2 rounded">Card Member</a> <a wire:navigate href="/main/member-management/card-member" class="text-left hover:bg-gray-700 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-gray-700 p-2 rounded">Locked Accounts</a> <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
</div> </div>
</div> </div>
@ -35,42 +40,42 @@
<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-gray-700 p-2 rounded"> <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 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" /> <x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" />
<span>Home Page (Mobile)</span> <span class="{{ activeClass('main/home-page-mobile*') }}">Home Page (Mobile)</span>
</div> </div>
<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>
</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-gray-700 p-2 rounded">Photo Sliders</a> <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left hover:bg-gray-700 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-gray-700 p-2 rounded"> <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/promotion') }}">
<x-heroicon-o-tag class="w-5 h-5" /> <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
<span>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-gray-700 p-2 rounded"> <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/top-up') }}">
<x-heroicon-o-plus-circle class="w-5 h-5" /> <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
<span>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-gray-700 p-2 rounded"> <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 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" /> <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
<span>About Us</span> <span class="{{ activeClass('main/about-us*') }}">About Us</span>
</div> </div>
<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>
</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-gray-700 p-2 rounded">Card Type</a> <a wire:navigate href="/main/about-us/card-type" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Type</a>
<a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-gray-700 p-2 rounded">Terms & Privacy</a> <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
</div> </div>
</div> </div>
@ -78,41 +83,41 @@
<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-gray-700 p-2 rounded"> <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 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" /> <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
<span>Reports</span> <span class="{{ activeClass('main/report*') }}">Reports</span>
</div> </div>
<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>
</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-gray-700 p-2 rounded">Registration Report</a> <a wire:navigate href="/main/report/registration-report" class="text-left hover:bg-gray-700 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-gray-700 p-2 rounded">Top Up Usage Report</a> <a wire:navigate href="/main/report/top-up-usage-report" class="text-left hover:bg-gray-700 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-gray-700 p-2 rounded">Mobile Usage Report</a> <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-gray-700 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-gray-700 p-2 rounded">Station Rating Report</a> <a wire:navigate href="/main/report/station-rating-report" class="text-left hover:bg-gray-700 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-gray-700 p-2 rounded"> <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/system-parameter') }}">
<x-heroicon-o-cog-6-tooth class="w-5 h-5" /> <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
<span>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-gray-700 p-2 rounded"> <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 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" /> <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
<span>Station Locator</span> <span class="{{ activeClass('main/station-locator*') }}">Station Locator</span>
</div> </div>
<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>
</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-gray-700 p-2 rounded">Branches</a> <a wire:navigate href="/main/station-locator/branch" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
<a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-gray-700 p-2 rounded">Stations</a> <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
<a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</a> <a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
</div> </div>
</div> </div>
</nav> </nav>

44
routes/web.php
View File

@ -33,27 +33,27 @@ Route::get('/login', function () {
// return view('main.dashboard'); // This view extends layouts.dashboard // return view('main.dashboard'); // This view extends layouts.dashboard
// }); // });
Route::get('/main', MainContentManager::class)->name('main.dashboard'); // Route::get('/main', MainContentManager::class)->name('main.dashboard');
Route::get('/main/profile', Profile::class)->name('profile.profile'); // Route::get('/main/profile', Profile::class)->name('profile.profile');
Route::get('/main/user-management', UserManagement::class)->name('user-management.user-management'); // Route::get('/main/user-management', UserManagement::class)->name('user-management.user-management');
Route::get('/main/notification', Notification::class)->name('notification.notification'); // Route::get('/main/notification', Notification::class)->name('notification.notification');
Route::get('/main/member-management/card-member', CardMember::class)->name('member-management.card-member'); // Route::get('/main/member-management/card-member', CardMember::class)->name('member-management.card-member');
Route::get('/main/member-management/locked-account', LockedAccount::class)->name('member-management.locked-account'); // Route::get('/main/member-management/locked-account', LockedAccount::class)->name('member-management.locked-account');
Route::get('/main/home-page-mobile/photo-slider', PhotoSlider::class)->name('home-page-mobile.photo-slider'); // Route::get('/main/home-page-mobile/photo-slider', PhotoSlider::class)->name('home-page-mobile.photo-slider');
Route::get('/main/promotion', Promotion::class)->name('promotion.promotion'); // Route::get('/main/promotion', Promotion::class)->name('promotion.promotion');
Route::get('/main/top-up', TopUp::class)->name('top-up.top-up'); // Route::get('/main/top-up', TopUp::class)->name('top-up.top-up');
Route::get('/main/about-us/card-type', CardType::class)->name('about-us.card-type'); // Route::get('/main/about-us/card-type', CardType::class)->name('about-us.card-type');
Route::get('/main/about-us/terms-and-privacy', TermsAndPrivacy::class)->name('about-us.terms-and-privacy'); // Route::get('/main/about-us/terms-and-privacy', TermsAndPrivacy::class)->name('about-us.terms-and-privacy');
Route::get('/main/report/registration-report', RegistrationReport::class)->name('report.registration-report'); // Route::get('/main/report/registration-report', RegistrationReport::class)->name('report.registration-report');
Route::get('/main/report/top-up-usage-report', TopUpUsageReport::class)->name('report.top-up-usage-report'); // Route::get('/main/report/top-up-usage-report', TopUpUsageReport::class)->name('report.top-up-usage-report');
Route::get('/main/report/mobile-usage-report', MobileUsageReport::class)->name('report.mobile-usage-report'); // Route::get('/main/report/mobile-usage-report', MobileUsageReport::class)->name('report.mobile-usage-report');
Route::get('/main/report/station-rating-report', StationRatingReport::class)->name('report.station-rating-report'); // Route::get('/main/report/station-rating-report', StationRatingReport::class)->name('report.station-rating-report');
Route::get('/main/system-parameter', SystemParameter::class)->name('system-parameter.system-parameter'); // Route::get('/main/system-parameter', SystemParameter::class)->name('system-parameter.system-parameter');
Route::get('/main/station-locator/branch', Branch::class)->name('station-locator.branch'); // Route::get('/main/station-locator/branch', Branch::class)->name('station-locator.branch');
Route::get('/main/station-locator/station', Station::class)->name('station-locator.station'); // Route::get('/main/station-locator/station', Station::class)->name('station-locator.station');
Route::get('/main/station-locator/fuel', Fuel::class)->name('station-locator.fuel'); // Route::get('/main/station-locator/fuel', Fuel::class)->name('station-locator.fuel');
// Route::get('/main/{page?}', function () { Route::get('/main/{page?}', function () {
// return view('main.dashboard'); return view('main.dashboard');
// })->where('page', '.*'); })->where('page', '.*');