sidebar/drawer dropdown fix (still has issue)

app/Livewire/Branch.php

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

app/Livewire/CardMember.php

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

app/Livewire/CardType.php

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

app/Livewire/Drawer.php

@@ -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);
     }
 

app/Livewire/Fuel.php

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

app/Livewire/LockedAccount.php

@@ -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');
     }
 }

app/Livewire/MainContentManager.php

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

app/Livewire/MobileUsageReport.php

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

app/Livewire/Notification.php

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

app/Livewire/PhotoSlider.php

@@ -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');
     }
 }

app/Livewire/Promotion.php

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

app/Livewire/RegistrationReport.php

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

app/Livewire/Station.php

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

app/Livewire/StationRatingReport.php

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

app/Livewire/SystemParameter.php

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

app/Livewire/TermsAndPrivacy.php

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

app/Livewire/TopUp.php

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

app/Livewire/TopUpUsageReport.php

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

app/Livewire/UserManagement.php

@@ -1,15 +1,13 @@
 <?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()
     {
         return view('livewire.user-management.user-management');
     }
-}
+}

config/livewire.php

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

package-lock.json

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

package.json

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

resources/js/app.js

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

resources/views/layouts/dashboard.blade.php

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

resources/views/livewire/auth/login-form.blade.php

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

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

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

resources/views/livewire/navigation/drawer.blade.php

@@ -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-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <div x-show="open" 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>
-                <button wire:click="selectPage('card-member')" class="text-left hover:bg-gray-700 p-2 rounded">Card Member</button>
+                <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-gray-700 p-2 rounded">Locked Accounts</a>
-                <button wire:click="selectPage('locked-account')" class="text-left hover:bg-gray-700 p-2 rounded">Locked Accounts</button>
             </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-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <div x-show="open" 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>
-                <button wire:click="selectPage('photo-slider')" class="text-left hover:bg-gray-700 p-2 rounded">Photo Sliders</button>
             </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">
+            <div x-show="open" x-transition 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>
+                <a wire:navigate href="/main/about-us/card-type" class="text-left hover:bg-gray-700 p-2 rounded">Card Type</a>
-                <button wire:click="selectPage('terms-and-privacy')" class="text-left hover:bg-gray-700 p-2 rounded">Terms & Privacy</button>
+                <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">
+            <div x-show="open" x-transition 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>
+                <a wire:navigate href="/main/report/registration-report" class="text-left hover:bg-gray-700 p-2 rounded">Registration Report</a>
-                <button wire:click="selectPage('top-up-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Top Up Usage Report</button>
+                <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>
-                <button wire:click="selectPage('mobile-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Mobile Usage Report</button>
+                <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-gray-700 p-2 rounded">Mobile Usage Report</a>
-                <button wire:click="selectPage('station-rating-report')" class="text-left hover:bg-gray-700 p-2 rounded">Station Rating Report</button>
+                <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>
 
-
+        <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
-        <button wire:click="selectPage('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">
+        <!-- Dropdown: Station Locator -->
-            <button @click.stop="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
+        <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">
+            <div x-show="open" x-transition 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>
+                <a wire:navigate href="/main/station-locator/branch" class="text-left hover:bg-gray-700 p-2 rounded">Branches</a>
-                <button wire:click="selectPage('station')" class="text-left hover:bg-gray-700 p-2 rounded">Stations</button>
+                <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-gray-700 p-2 rounded">Stations</a>
-                <button wire:click="selectPage('fuel')" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</button>
+                <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>
-

resources/views/livewire/user-management/user-management.blade.php

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

resources/views/main/dashboard.blade.php

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

routes/web.php

@@ -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;
 
@@ -11,4 +28,27 @@ 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', '.*');