Fix Bootstrap light/dark theming across all layouts

- Make dark mode toggle reactive using Alpine x-data theme property
- Apply saved theme on page load via data-bs-theme attribute binding
- Remove hardcoded bg-light classes that broke dark mode styling
- Fix duplicate/broken Bootstrap bundle import in app.js

compose.yaml

@@ -26,6 +26,7 @@ services:
             - redis
             - selenium
             - mailpit
+            - openldap
     mysql:
         image: 'mysql:8.4'
         ports:
@@ -81,6 +82,50 @@ services:
             - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
         networks:
             - sail
+    openldap:
+        image: 'osixia/openldap:1.5.0'
+        ports:
+            - '${FORWARD_LDAP_PORT:-389}:389'
+            - '${FORWARD_LDAPS_PORT:-636}:636'
+        environment:
+            LDAP_ORGANISATION: '${LDAP_ORGANISATION:-Travel App}'
+            LDAP_DOMAIN: '${LDAP_DOMAIN:-travel.local}'
+            LDAP_ADMIN_PASSWORD: '${LDAP_ADMIN_PASSWORD:-adminpassword}'
+            LDAP_CONFIG_PASSWORD: '${LDAP_CONFIG_PASSWORD:-configpassword}'
+            LDAP_READONLY_USER: 'true'
+            LDAP_READONLY_USER_USERNAME: '${LDAP_READONLY_USERNAME:-readonly}'
+            LDAP_READONLY_USER_PASSWORD: '${LDAP_READONLY_PASSWORD:-readonly}'
+        volumes:
+            - 'sail-ldap-data:/var/lib/ldap'
+            - 'sail-ldap-config:/etc/ldap/slapd.d'
+        networks:
+            - sail
+        healthcheck:
+            test:
+                - CMD
+                - ldapsearch
+                - '-x'
+                - '-H'
+                - 'ldap://localhost'
+                - '-b'
+                - 'dc=travel,dc=local'
+                - '-D'
+                - 'cn=admin,dc=travel,dc=local'
+                - '-w'
+                - '${LDAP_ADMIN_PASSWORD:-adminpassword}'
+            retries: 3
+            timeout: 5s
+    phpldapadmin:
+        image: 'osixia/phpldapadmin:latest'
+        ports:
+            - '${FORWARD_PHPLDAPADMIN_PORT:-8085}:80'
+        environment:
+            PHPLDAPADMIN_LDAP_HOSTS: openldap
+            PHPLDAPADMIN_HTTPS: 'false'
+        networks:
+            - sail
+        depends_on:
+            - openldap
 networks:
     sail:
         driver: bridge
@@ -89,3 +134,7 @@ volumes:
         driver: local
     sail-redis:
         driver: local
+    sail-ldap-data:
+        driver: local
+    sail-ldap-config:
+        driver: local

docker-compose.yml

@@ -1,125 +0,0 @@
-services:
-    laravel.test:
-        build:
-            context: ./vendor/laravel/sail/runtimes/8.4
-            dockerfile: Dockerfile
-            args:
-                WWWGROUP: '${WWWGROUP}'
-        image: sail-8.4/app
-        extra_hosts:
-            - 'host.docker.internal:host-gateway'
-        ports:
-            - '${APP_PORT:-80}:80'
-            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
-        environment:
-            WWWUSER: '${WWWUSER}'
-            LARAVEL_SAIL: 1
-            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
-            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
-            IGNITION_LOCAL_SITES_PATH: '${PWD}'
-        volumes:
-            - '.:/var/www/html'
-        networks:
-            - sail
-        depends_on:
-            - mysql
-            - redis
-            - mailpit
-            - openldap
-
-    mysql:
-        image: 'mysql/mysql-server:8.0'
-        ports:
-            - '${FORWARD_DB_PORT:-3306}:3306'
-        environment:
-            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
-            MYSQL_ROOT_HOST: '%'
-            MYSQL_DATABASE: '${DB_DATABASE}'
-            MYSQL_USER: '${DB_USERNAME}'
-            MYSQL_PASSWORD: '${DB_PASSWORD}'
-            MYSQL_ALLOW_EMPTY_PASSWORD: 1
-        volumes:
-            - 'sail-mysql:/var/lib/mysql'
-            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
-        networks:
-            - sail
-        healthcheck:
-            test:
-                - CMD
-                - mysqladmin
-                - ping
-                - '-p${DB_PASSWORD}'
-            retries: 3
-            timeout: 5s
-
-    redis:
-        image: 'redis:alpine'
-        ports:
-            - '${FORWARD_REDIS_PORT:-6379}:6379'
-        volumes:
-            - 'sail-redis:/data'
-        networks:
-            - sail
-        healthcheck:
-            test:
-                - CMD
-                - redis-cli
-                - ping
-            retries: 3
-            timeout: 5s
-
-    mailpit:
-        image: 'axllent/mailpit:latest'
-        ports:
-            - '${FORWARD_MAILPIT_PORT:-1025}:1025'
-            - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
-        networks:
-            - sail
-
-    openldap:
-        image: 'osixia/openldap:1.5.0'
-        ports:
-            - '${FORWARD_LDAP_PORT:-389}:389'
-            - '${FORWARD_LDAPS_PORT:-636}:636'
-        environment:
-            LDAP_ORGANISATION: '${LDAP_ORGANISATION:-Travel App}'
-            LDAP_DOMAIN: '${LDAP_DOMAIN:-travel.local}'
-            LDAP_ADMIN_PASSWORD: '${LDAP_ADMIN_PASSWORD:-adminpassword}'
-            LDAP_CONFIG_PASSWORD: '${LDAP_CONFIG_PASSWORD:-configpassword}'
-            LDAP_READONLY_USER: 'true'
-            LDAP_READONLY_USER_USERNAME: '${LDAP_READONLY_USERNAME:-readonly}'
-            LDAP_READONLY_USER_PASSWORD: '${LDAP_READONLY_PASSWORD:-readonly}'
-        volumes:
-            - 'sail-ldap-data:/var/lib/ldap'
-            - 'sail-ldap-config:/etc/ldap/slapd.d'
-        networks:
-            - sail
-        healthcheck:
-            test:
-                - CMD
-                - ldapsearch
-                - '-x'
-                - '-H'
-                - 'ldap://localhost'
-                - '-b'
-                - 'dc=travel,dc=local'
-                - '-D'
-                - 'cn=admin,dc=travel,dc=local'
-                - '-w'
-                - '${LDAP_ADMIN_PASSWORD:-adminpassword}'
-            retries: 3
-            timeout: 5s
-
-networks:
-    sail:
-        driver: bridge
-
-volumes:
-    sail-mysql:
-        driver: local
-    sail-redis:
-        driver: local
-    sail-ldap-data:
-        driver: local
-    sail-ldap-config:
-        driver: local

resources/js/app.js

@@ -1,4 +1,3 @@
 import * as bootstrap from 'bootstrap';
-import './../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
 
 window.bootstrap = bootstrap;

resources/views/components/layouts/app.blade.php

@@ -1,8 +1,9 @@
 <!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data x-init="
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
-    const saved = localStorage.getItem('theme');
+    x-data="{ theme: localStorage.getItem('theme') || 'light' }"
-    if (saved) { document.documentElement.setAttribute('data-bs-theme', saved); }
+    x-init="$watch('theme', val => { document.documentElement.setAttribute('data-bs-theme', val); localStorage.setItem('theme', val); }); document.documentElement.setAttribute('data-bs-theme', theme);"
-">
+    :data-bs-theme="theme"
+>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -43,16 +44,11 @@
                     <li class="nav-item me-2">
                         <button
                             class="btn btn-sm btn-outline-light"
-                            x-on:click="
+                            x-on:click="theme = theme === 'dark' ? 'light' : 'dark'"
-                                const current = document.documentElement.getAttribute('data-bs-theme');
-                                const next = current === 'dark' ? 'light' : 'dark';
-                                document.documentElement.setAttribute('data-bs-theme', next);
-                                localStorage.setItem('theme', next);
-                            "
                             title="Toggle dark/light mode"
                         >
-                            <span x-show="document.documentElement.getAttribute('data-bs-theme') !== 'dark'">🌙</span>
+                            <span x-show="theme !== 'dark'">🌙</span>
-                            <span x-show="document.documentElement.getAttribute('data-bs-theme') === 'dark'">☀️</span>
+                            <span x-show="theme === 'dark'">☀️</span>
                         </button>
                     </li>
                     @auth

resources/views/components/layouts/guest.blade.php

@@ -1,5 +1,9 @@
 <!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    x-data="{ theme: localStorage.getItem('theme') || 'light' }"
+    x-init="document.documentElement.setAttribute('data-bs-theme', theme);"
+    :data-bs-theme="theme"
+>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,7 +12,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
-<body class="bg-light">
+<body>
     {{ $slot }}
     @livewireScripts
 </body>

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

@@ -29,7 +29,7 @@ new #[Layout('components.layouts.guest')] class extends Component {
 }
 ?>
 
-<div class="min-vh-100 d-flex align-items-center justify-content-center bg-light">
+<div class="min-vh-100 d-flex align-items-center justify-content-center">
     <div class="card shadow-sm" style="width: 100%; max-width: 420px;">
         <div class="card-body p-4">
             <div class="text-center mb-4">

resources/views/livewire/travel-request/create.blade.php

@@ -318,7 +318,7 @@ new #[Layout('components.layouts.app')] class extends Component {
                 @error('journeys') <div class="alert alert-danger">{{ $message }}</div> @enderror
 
                 @foreach ($journeys as $i => $journey)
-                    <div class="border rounded p-3 mb-3 bg-light" wire:key="journey-{{ $i }}">
+                    <div class="border rounded p-3 mb-3" wire:key="journey-{{ $i }}">
                         <div class="d-flex justify-content-between align-items-center mb-2">
                             <strong class="small">Journey {{ $i + 1 }}</strong>
                             @if (count($journeys) > 1)
@@ -413,7 +413,7 @@ new #[Layout('components.layouts.app')] class extends Component {
             </div>
             <div class="card-body">
                 @foreach ($costCodes as $i => $code)
-                    <div class="border rounded p-3 mb-3 bg-light" wire:key="code-{{ $i }}">
+                    <div class="border rounded p-3 mb-3" wire:key="code-{{ $i }}">
                         <div class="d-flex justify-content-between align-items-center mb-2">
                             <strong class="small">Cost Code {{ $i + 1 }}</strong>
                             @if (count($costCodes) > 1)