Enhance layout and components with improved accessibility and performance

- Refactor JavaScript functions to prevent duplicate initializations on navigation
- Add skeleton loaders for invoices and services during loading states
- Introduce a new progress bar component with customizable properties
- Update dropdown and checkbox components for better styling and accessibility
- Improve modal and navigation components with enhanced animations and structure

themes/lucentui/views/components/form/checkbox.blade.php

@@ -5,11 +5,19 @@
     'divClass' => '',
 ])
 <div class="flex items-center {{ $divClass ?? '' }}">
-    {{-- <input type="hidden" name="{{ $name }}" value="0" /> --}}
-    <input type="checkbox" name="{{ $name }}" id="{{ $id ?? $name }}"
-        {{ $attributes->except(['label', 'name', 'id', 'class', 'divClass', 'required']) }}
-        class="form-checkbox size-4 text-primary rounded focus:ring-secondary hover:bg-secondary ring-offset-primary-800 focus:ring-2 bg-background-secondary border-neutral" />
-    <label class="ml-2 text-sm text-primary-100" for="{{ $id ?? $name }}">
+    <div class="relative">
+        <input type="checkbox" name="{{ $name }}" id="{{ $id ?? $name }}"
+            {{ $attributes->except(['label', 'name', 'id', 'class', 'divClass', 'required']) }}
+            class="peer form-checkbox size-5 text-primary rounded border-2 border-neutral bg-background-secondary/50 
+                   focus:ring-2 focus:ring-primary/30 focus:ring-offset-0 focus:outline-none
+                   checked:bg-primary checked:border-primary
+                   hover:border-primary/50 transition-all duration-200 cursor-pointer
+                   appearance-none" />
+        <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-3 text-white pointer-events-none opacity-0 scale-50 peer-checked:opacity-100 peer-checked:scale-100 transition-all duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+    </div>
+    <label class="ml-2 text-sm text-color-base cursor-pointer select-none" for="{{ $id ?? $name }}">
         @if(isset($label))
             {{ $label }}
         @else
@@ -18,6 +26,6 @@
     </label>
 
     @error($name)
-        <p class="text-red-500 text-xs">{{ $message }}</p>
+        <p class="text-red-500 text-xs ml-2">{{ $message }}</p>
     @enderror
 </div>