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

sidebar/drawer dropdown fix (still has issue)

This commit is contained in:
erishBRBS 2025-04-15 00:51:02 +08:00
parent 813d8bd04b
commit ad877fa6fc
30 changed files with 151 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Livewire/Branch.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class Branch extends Component
{
public function render()

2
app/Livewire/CardMember.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class CardMember extends Component
{
public function render()

2
app/Livewire/CardType.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class CardType extends Component
{
public function render()

4
app/Livewire/Drawer.php
View File

@ -8,10 +8,6 @@ class Drawer extends Component
{
public function selectPage($page)
{
// // Log the selected page to Laravel's log file (you'll find this in storage/logs/laravel.log)
// logger('Page selected:', [$page]);
// Dispatch the navigate-to-page event to update the active page in the MainContentManager component
$this->dispatch('navigate-to-page', page: $page);
}

2
app/Livewire/Fuel.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class Fuel extends Component
{
public function render()

4
app/Livewire/LockedAccount.php
View File

@ -3,11 +3,13 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class LockedAccount extends Component
{
public function render()
{
return view('livewire.member-management.card-member');
return view('livewire.member-management.locked-account');
}
}

12
app/Livewire/MainContentManager.php
View File

@ -1,18 +1,24 @@
<?php
namespace App\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\Request;
class MainContentManager extends Component
{
public $activePage = 'user-management'; // default page
public $activePage;
public function mount()
{
$segments = request()->segments();
// Get the last part of the URL path
$this->activePage = end($segments) ?? 'user-management';
}
protected $listeners = ['navigate-to-page' => 'setPage'];
public function setPage($page)
{
// dd($page); // To check the value of $page
$this->activePage = $page;
}

2
app/Livewire/MobileUsageReport.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class MobileUsageReport extends Component
{
public function render()

1
app/Livewire/Notification.php
View File

@ -3,7 +3,6 @@
namespace App\Livewire;
use Livewire\Component;
class Notification extends Component
{
public function render()

4
app/Livewire/PhotoSlider.php
View File

@ -3,11 +3,13 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class PhotoSlider extends Component
{
public function render()
{
return view('livewire.photo-slider');
return view('livewire.home-page-mobile.photo-slider');
}
}

2
app/Livewire/Promotion.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class Promotion extends Component
{
public function render()

2
app/Livewire/RegistrationReport.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class RegistrationReport extends Component
{
public function render()

2
app/Livewire/Station.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class Station extends Component
{
public function render()

2
app/Livewire/StationRatingReport.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class StationRatingReport extends Component
{
public function render()

2
app/Livewire/SystemParameter.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class SystemParameter extends Component
{
public function render()

2
app/Livewire/TermsAndPrivacy.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class TermsAndPrivacy extends Component
{
public function render()

2
app/Livewire/TopUp.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class TopUp extends Component
{
public function render()

2
app/Livewire/TopUpUsageReport.php
View File

@ -3,7 +3,9 @@
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class TopUpUsageReport extends Component
{
public function render()

4
app/Livewire/UserManagement.php
View File

@ -1,11 +1,9 @@
<?php
namespace App\Livewire; // Laravel 11 uses App\Livewire namespace
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Layout; // Required for layout declaration
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
class UserManagement extends Component
{
public function render()

2
config/livewire.php
View File

@ -38,7 +38,7 @@ return [
|
*/
'layout' => 'components.layouts.app',
'layout' => 'layouts.app',
/*
|---------------------------------------------------------------------------

7
package-lock.json generated
View File

@ -5,6 +5,7 @@
"packages": {
"": {
"dependencies": {
"@alpinejs/persist": "^3.14.9",
"alpinejs": "^3.14.9"
},
"devDependencies": {
@ -30,6 +31,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@alpinejs/persist": {
"version": "3.14.9",
"resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.14.9.tgz",
"integrity": "sha512-Td9hWEUtFFguYCRjXhq06sDultW21wXUnVro7YWJm+vjGu/nV/v3hepOXyYVjkGvH/F+zjx5UkzWXXzr3UiQ/w==",
"license": "MIT"
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.25.2",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.2.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
"vite": "^6.0.11"
},
"dependencies": {
"@alpinejs/persist": "^3.14.9",
"alpinejs": "^3.14.9"
}
}

4
resources/js/app.js
View File

@ -1,4 +1,8 @@
import './bootstrap';
import Alpine from 'alpinejs';
import persist from '@alpinejs/persist';
Alpine.plugin(persist);
window.Alpine = Alpine;
Alpine.start();

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

@ -13,10 +13,11 @@
{{-- Main Content --}}
<div class="flex-1 p-6 bg-gray-100 overflow-auto">
@yield('main-page-content')
@yield('main-content-manager')
</div>
@livewireScripts
</body>
</html>

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

@ -7,17 +7,17 @@
<p class="text-gray-600 text-sm">Sign in to continue</p>
</div>
<form wire:submit.prevent="submit" class="mb-8">
<form wire:submit="submit" class="mb-8">
@csrf
<div class="mb-4">
<label for="username" class="block text-sm font-bold text-gray-700">Username</label>
<input wire:model="username" type="text" id="username" placeholder="Username" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
<input wire:model.live="username" type="text" id="username" placeholder="Username" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
@error('username') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-bold text-gray-700">Password</label>
<input wire:model="password" type="password" id="password" placeholder="Password" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
<input wire:model.live="password" type="password" id="password" placeholder="Password" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
@error('password') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
</div>

7
resources/views/livewire/member-management/locked-account.blade.php
View File

@ -1,4 +1,5 @@
<div>
<div>
<h1>This is locked account page</h1>
</div></div>
<div>
<h1>This is locked account page</h1>
</div>
</div>

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

@ -1,22 +1,21 @@
<div class="w-80 bg-gray-800 text-white flex-shrink-0">
<div class="text-center mb-10"> <!-- logo and title container-->
<div class="text-center mb-10">
<img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto max-w-md mt-5">
</div>
<nav class="flex flex-col space-y-2 p-4">
<button wire:click="selectPage('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">
<x-heroicon-o-user class="w-5 h-5" />
<span>User Management</span>
</button>
</a>
<button wire:click="selectPage('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">
<x-heroicon-o-bell class="w-5 h-5" />
<span>Notifications</span>
</button>
</a>
<div x-data="{ open: false }" class="relative">
<!-- 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-gray-700 p-2 rounded">
<div class="flex items-center gap-2">
<x-heroicon-o-credit-card class="w-5 h-5" />
@ -26,14 +25,14 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
<button wire:click="selectPage('card-member')" class="text-left hover:bg-gray-700 p-2 rounded">Card Member</button>
<button wire:click="selectPage('locked-account')" class="text-left hover:bg-gray-700 p-2 rounded">Locked Accounts</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-gray-700 p-2 rounded">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>
</div>
</div>
<div x-data="{ open: false }" class="relative">
<!-- 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-gray-700 p-2 rounded">
<div class="flex items-center gap-2">
<x-heroicon-o-home class="w-5 h-5" />
@ -43,23 +42,23 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
<button wire:click="selectPage('photo-slider')" class="text-left hover:bg-gray-700 p-2 rounded">Photo Sliders</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-gray-700 p-2 rounded">Photo Sliders</a>
</div>
</div>
<button wire:click="selectPage('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">
<x-heroicon-o-tag class="w-5 h-5" />
<span>Promotions</span>
</button>
</a>
<button wire:click="selectPage('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">
<x-heroicon-o-plus-circle class="w-5 h-5" />
<span>Top Up</span>
</button>
</a>
<div x-data="{ open: false }" class="relative">
<!-- 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-gray-700 p-2 rounded">
<div class="flex items-center gap-2">
<x-heroicon-o-information-circle class="w-5 h-5" />
@ -69,13 +68,14 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
<button wire:click="selectPage('about-card-type')" class="text-left hover:bg-gray-700 p-2 rounded">Card Type</button>
<button wire:click="selectPage('terms-and-privacy')" class="text-left hover:bg-gray-700 p-2 rounded">Terms & Privacy</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-gray-700 p-2 rounded">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>
</div>
</div>
<div x-data="{ open: false }" class="relative">
<!-- 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-gray-700 p-2 rounded">
<div class="flex items-center gap-2">
<x-heroicon-o-document class="w-5 h-5" />
@ -85,22 +85,22 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
<button wire:click="selectPage('registration-report')" class="text-left hover:bg-gray-700 p-2 rounded">Registration Report</button>
<button wire:click="selectPage('top-up-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Top Up Usage Report</button>
<button wire:click="selectPage('mobile-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Mobile Usage Report</button>
<button wire:click="selectPage('station-rating-report')" class="text-left hover:bg-gray-700 p-2 rounded">Station Rating Report</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-gray-700 p-2 rounded">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/mobile-usage-report" class="text-left hover:bg-gray-700 p-2 rounded">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>
</div>
</div>
<button wire:click="selectPage('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">
<x-heroicon-o-cog-6-tooth class="w-5 h-5" />
<span>System Parameters</span>
</button>
</a>
<div x-data="{ open: false }" class="relative">
<button @click.stop="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
<!-- 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-gray-700 p-2 rounded">
<div class="flex items-center gap-2">
<x-heroicon-o-map-pin class="w-5 h-5" />
<span>Station Locator</span>
@ -109,13 +109,11 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
<button wire:click="selectPage('branch')" class="text-left hover:bg-gray-700 p-2 rounded">Branches</button>
<button wire:click="selectPage('station')" class="text-left hover:bg-gray-700 p-2 rounded">Stations</button>
<button wire:click="selectPage('fuel')" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</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-gray-700 p-2 rounded">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/fuel" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</a>git asdasd
</div>
</div>
</nav>
</div>

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

@ -1,3 +1,3 @@
<div>
<h1>This is user management page</h1>
This is the user management page.
</div>

3
resources/views/main/dashboard.blade.php
View File

@ -1,5 +1,6 @@
@extends('layouts.dashboard')
@section('main-page-content')
@section('main-content-manager')
<livewire:main-content-manager />
@endsection

40
routes/web.php
View File

@ -1,5 +1,22 @@
<?php
use App\Livewire\Branch;
use App\Livewire\CardMember;
use App\Livewire\CardType;
use App\Livewire\Fuel;
use App\Livewire\LockedAccount;
use App\Livewire\MobileUsageReport;
use App\Livewire\TopUp;
use App\Livewire\Profile;
use App\Livewire\Promotion;
use App\Livewire\Notification;
use App\Livewire\PhotoSlider;
use App\Livewire\RegistrationReport;
use App\Livewire\Station;
use App\Livewire\StationRatingReport;
use App\Livewire\SystemParameter;
use App\Livewire\TermsAndPrivacy;
use App\Livewire\TopUpUsageReport;
use App\Livewire\UserManagement;
use Illuminate\Support\Facades\Route;
@ -12,3 +29,26 @@ Route::get('/login', function () {
Route::get('/dashboard', function () {
return view('main.dashboard'); // This view extends layouts.dashboard
});
// Route::get('/main/profile', Profile::class);
// Route::get('/main/user-management', UserManagement::class);
// Route::get('/main/notification', Notification::class);
// Route::get('/main/member-management/card-member', CardMember::class);
// Route::get('/main/member-management/locked-account', LockedAccount::class);
// Route::get('/main/home-page-mobile/photo-slider', PhotoSlider::class);
// Route::get('/main/promotion', Promotion::class);
// Route::get('/main/top-up', TopUp::class);
// Route::get('/main/about-us/card-type', CardType::class);
// Route::get('/main/about-us/terms-and-privacy', TermsAndPrivacy::class);
// Route::get('/main/report/registration-report', RegistrationReport::class);
// Route::get('/main/report/top-up-usage-report', TopUpUsageReport::class);
// Route::get('/main/report/mobile-usage-report', MobileUsageReport::class);
// Route::get('/main/report/station-rating-report', StationRatingReport::class);
// Route::get('/main/system-parameter', SystemParameter::class);
// Route::get('/main/station-locator/branch', Branch::class);
// Route::get('/main/station-locator/station', Station::class);
// Route::get('/main/station-locator/fuel', Fuel::class);
Route::get('/main/{page?}', function () {
return view('main.dashboard');
})->where('page', '.*');