From cfb67293491420e7895d0cd4f2a43d31a3d7ed37 Mon Sep 17 00:00:00 2001
From: pbao9 <pbao.business@gmail.com>
Date: Sat, 7 Feb 2026 18:27:18 +0700
Subject: [PATCH] update

---
 .../administrator/layout/master.blade.php     |    1 -
 .../layout/partials/toast.blade.php           |   98 +-
 .../categories/datatable/action.blade.php     |    2 +-
 .../datatable/action_trash.blade.php          |    2 +-
 .../categories/datatable/modal.blade.php      |   51 +-
 .../pages/product/categories/index.blade.php  |   32 +-
 .../pages/product/categories/trash.blade.php  |   75 +-
 .../views/components/data-table.blade.php     | 1008 +++++++++--------
 8 files changed, 618 insertions(+), 651 deletions(-)

diff --git a/resources/views/administrator/layout/master.blade.php b/resources/views/administrator/layout/master.blade.php
index 79038cc..cbe22b3 100644
--- a/resources/views/administrator/layout/master.blade.php
+++ b/resources/views/administrator/layout/master.blade.php
@@ -58,7 +58,6 @@
                     </div>
                 </div>
                 @yield('content')
-                <div id="fui-toast"></div>
             </div>
             @include('administrator.layout.partials.footer')
         </div>
diff --git a/resources/views/administrator/layout/partials/toast.blade.php b/resources/views/administrator/layout/partials/toast.blade.php
index d85f8ae..095e6d2 100644
--- a/resources/views/administrator/layout/partials/toast.blade.php
+++ b/resources/views/administrator/layout/partials/toast.blade.php
@@ -1,60 +1,74 @@
-<!-- Toast Dependencies -->
-<link rel="stylesheet" type="text/css" href="{{ asset('lib/fui-toast/fuiToast.min.css') }}">
-<script type="text/javascript" src="{{ asset('lib/fui-toast/fuiToast.min.js') }}"></script>
+<!-- Notyf Dependencies -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
+<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
 
 <!-- Toast Logic -->
 <script type="text/javascript">
+    var notyf;
+
+    // Initialize Notyf
+    document.addEventListener('DOMContentLoaded', function () {
+        notyf = new Notyf({
+            duration: 5000,
+            position: {
+                x: 'right',
+                y: 'top',
+            },
+            types: [
+                {
+                    type: 'success',
+                    background: '#10b981',
+                    dismissible: true
+                },
+                {
+                    type: 'error',
+                    background: '#ef4444',
+                    dismissible: true
+                }
+            ]
+        });
+
+        // Show alerts from session
+        setTimeout(function () {
+            showAlerts();
+        }, 100);
+    });
+
     // Function to safely show toast notifications
     function showToast(message, type = 'error', title = '') {
-        // Check if FuiToast is available and container exists
-        if (typeof FuiToast !== 'undefined' && document.getElementById('fui-toast')) {
-            try {
-                if (type === 'success') {
-                    FuiToast.success(message, title || 'Success!');
-                } else {
-                    FuiToast.error(message, title || 'Error!');
-                }
-                return true;
-            } catch (e) {
-                console.error('FuiToast failed:', e);
-                return false;
+        if (!notyf) {
+            console.warn('Notyf not initialized yet');
+            return false;
+        }
+
+        try {
+            if (type === 'success') {
+                notyf.success(message);
+            } else {
+                notyf.error(message);
             }
+            return true;
+        } catch (e) {
+            console.error('Notyf failed:', e);
+            return false;
         }
-        return false;
     }
 
-    // Function to show alerts with fallback
+    // Function to show alerts from Laravel session
     function showAlerts() {
         @if ($errors->any() || session()->has('success'))
             @foreach ($errors->all() as $item)
-                if (!showToast('{{ addslashes($item) }}', 'error', 'Opp!')) {
-                    alert('{{ addslashes($item) }}');
-                }
+                showToast('{{ addslashes($item) }}', 'error');
             @endforeach
             @if (session()->has('success'))
-                if (!showToast('{{ addslashes(session()->get('success')) }}', 'success', 'Success!')) {
-                    alert('{{ addslashes(session()->get('success')) }}');
-                }
+                showToast('{{ addslashes(session()->get('success')) }}', 'success');
             @endif
         @endif
     }
 
-    // Wait for all scripts to load and DOM to be ready
-    document.addEventListener('DOMContentLoaded', function() {
-        // Initialize FuiToast configuration
-        if (typeof FuiToast !== 'undefined' && FuiToast.config) {
-            try {
-                FuiToast.config({
-                    position: "top-center",
-                });
-            } catch (e) {
-                console.warn('FuiToast config failed:', e);
-            }
-        }
-
-        // Add a small delay to ensure everything is fully initialized
-        setTimeout(function() {
-            showAlerts();
-        }, 100);
-    });
-</script>
+    // Compatibility layer with old FuiToast calls
+    window.FuiToast = {
+        success: function (message) { return showToast(message, 'success'); },
+        error: function (message) { return showToast(message, 'error'); }
+    };
+</script>
\ No newline at end of file
diff --git a/resources/views/administrator/pages/product/categories/datatable/action.blade.php b/resources/views/administrator/pages/product/categories/datatable/action.blade.php
index 53a1d72..ea67d1e 100644
--- a/resources/views/administrator/pages/product/categories/datatable/action.blade.php
+++ b/resources/views/administrator/pages/product/categories/datatable/action.blade.php
@@ -1,7 +1,7 @@
 <div class="d-flex gap-2">
     <x-button-crm type="button" variant="outline-primary" size="sm" route="products.group.edit" :params="['id' => $row->id]" icon="pencil" />
     <x-button-crm type="button" variant="outline-danger" size="sm" icon="trash"
-        data-micromodal-trigger="deleteModal-{{ $row->id }}" />
+        data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $row->id }}" />
 </div>
 
 @include('administrator.pages.product.categories.datatable.modal', [
diff --git a/resources/views/administrator/pages/product/categories/datatable/action_trash.blade.php b/resources/views/administrator/pages/product/categories/datatable/action_trash.blade.php
index daa1aea..2235cef 100644
--- a/resources/views/administrator/pages/product/categories/datatable/action_trash.blade.php
+++ b/resources/views/administrator/pages/product/categories/datatable/action_trash.blade.php
@@ -1,7 +1,7 @@
 <div class="d-flex gap-2">
     <x-button-crm type="button" variant="outline-success" size="sm" route="products.group.restore" :params="['id' => $row->id]" icon="rotate-ccw" />
     <x-button-crm type="button" variant="outline-danger" size="sm" icon="trash-2"
-        data-micromodal-trigger="forceDeleteModal-{{ $row->id }}" />
+        data-bs-toggle="modal" data-bs-target="#forceDeleteModal-{{ $row->id }}" />
 </div>
 
 @include('administrator.pages.product.categories.datatable.modal', [
diff --git a/resources/views/administrator/pages/product/categories/datatable/modal.blade.php b/resources/views/administrator/pages/product/categories/datatable/modal.blade.php
index e9b75bb..209761c 100644
--- a/resources/views/administrator/pages/product/categories/datatable/modal.blade.php
+++ b/resources/views/administrator/pages/product/categories/datatable/modal.blade.php
@@ -1,33 +1,36 @@
 <!-- Delete Confirmation Modal -->
-<div class="modal micromodal-slide" id="{{ $modalId ?? 'deleteModal' }}" aria-hidden="true">
-    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
-        <div class="modal__container modal--sm" role="dialog" aria-modal="true" aria-labelledby="deleteModalLabel-{{ $modalId ?? 'deleteModal' }}">
-            <header class="modal__header bg-primary text-white">
-                <h6 class="modal__title" id="deleteModalLabel-{{ $modalId ?? 'deleteModal' }}">
-                    <i data-lucide="trash-2" class="w-15px h-15px me-2"></i>
-                    Confirm Delete
+<div class="modal fade" id="{{ $modalId ?? 'deleteModal' }}" tabindex="-1"
+    aria-labelledby="deleteModalLabel-{{ $modalId ?? 'deleteModal' }}" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-sm">
+        <div class="modal-content shadow-lg border-0">
+            <div class="modal-header bg-danger text-white py-2">
+                <h6 class="modal-title d-flex align-items-center" id="deleteModalLabel-{{ $modalId ?? 'deleteModal' }}">
+                    <i data-lucide="trash-2" class="me-2" style="width: 16px; height: 16px;"></i>
+                    Xác nhận xóa
                 </h6>
-                <button class="modal__close" aria-label="Close modal" data-micromodal-close>
-                    <i data-lucide="x"></i>
-                </button>
-            </header>
-            <main class="modal__content">
-                <div class="text-center">
-                    <i data-lucide="alert-triangle" class="text-warning mb-3" style="width: 48px; height: 48px;"></i>
-                    <h6 class="mb-2">Are you sure?</h6>
-                    <p class="text-muted small mb-1">Delete {{ $itemLabel }}:</p>
-                    <p class="fw-bold mb-2">{{ $itemName ?? '' }}</p>
-                    <p class="text-danger small mb-0">This action cannot be undone!</p>
+                <button type="button" class="btn-close btn-close-white shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-            </main>
-            <footer class="modal__footer">
-                <x-button-crm type="button" variant="secondary" size="sm" icon="x" data-micromodal-close>Cancel</x-button-crm>
-                <form action="{{ route($deleteRoute, ['id' => $itemId ?? 0]) }}" method="POST" class="d-inline">
+                <div class="modal-body py-4">
+                <div class="text-center">
+                    <div class="mb-3">
+                        <i data-lucide="alert-triangle" class="text-warning" style="width: 54px; height: 54px;"></i>
+                    </div>
+                    <h6 class="fw-bold mb-2">Bạn có chắc chắn không?</h6>
+                    <p class="text-muted small mb-1">Xóa {{ $itemLabel }}:</p>
+                    <p class="fw-bold mb-3 text-dark">{{ $itemName ?? '' }}</p>
+                    <div class="px-3 py-2 bg-danger-subtle rounded-3">
+                        <p class="text-danger small mb-0 fw-medium">Hành động này không thể hoàn tác!</p>
+                    </div>
+                    </div>
+                    </div>
+                    <div class="modal-footer bg-light border-0 py-2 d-flex justify-content-center gap-2">
+                        <x-button-c-r-m type="button" variant="secondary" size="sm" icon="x" data-bs-dismiss="modal">Hủy bỏ</x-button-c-r-m>
+                        <form action="{{ route($deleteRoute, ['id' => $itemId ?? 0]) }}" method="POST" class="d-inline m-0">
                     @csrf
                     @method('DELETE')
-                    <x-button-crm type="submit" variant="danger" size="sm" icon="trash-2">Confirm Delete</x-button-crm>
+                    <x-button-c-r-m type="submit" variant="danger" size="sm" icon="trash-2">Xác nhận xóa</x-button-c-r-m>
                 </form>
-            </footer>
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/views/administrator/pages/product/categories/index.blade.php b/resources/views/administrator/pages/product/categories/index.blade.php
index 5125747..dd8261b 100644
--- a/resources/views/administrator/pages/product/categories/index.blade.php
+++ b/resources/views/administrator/pages/product/categories/index.blade.php
@@ -64,36 +64,8 @@ $tabs = [
 @push('custom-scripts')
     <script>
         document.addEventListener('DOMContentLoaded', function () {
-            // Function to initialize MicroModal
-            function initMicroModal() {
-                if (typeof MicroModal !== 'undefined') {
-                    MicroModal.init({
-                        onShow: modal => console.info(`${modal.id} is shown`),
-                        onClose: modal => console.info(`${modal.id} is hidden`),
-                        openTrigger: 'data-micromodal-trigger',
-                        closeTrigger: 'data-micromodal-close',
-                        disableScroll: true,
-                        disableFocus: false,
-                        awaitOpenAnimation: false,
-                        awaitCloseAnimation: false,
-                        debugMode: true
-                    });
-                }
-            }
-
-            // Initialize on page load
-            initMicroModal();
-
-            // Re-initialize after DataTable draws (when action column renders)
-            $('#productTable').on('draw.dt', function() {
-                setTimeout(function() {
-                    initMicroModal();
-                    // Re-initialize Lucide icons for modal content
-                    if (typeof lucide !== 'undefined') {
-                        lucide.createIcons();
-                    }
-                }, 100);
-            });
+            // DataTable is already initialized in components/datatable
+            // If we need custom behavior here, we can add it.
         });
     </script>
 @endpush
diff --git a/resources/views/administrator/pages/product/categories/trash.blade.php b/resources/views/administrator/pages/product/categories/trash.blade.php
index ee6dcf3..dea6fd7 100644
--- a/resources/views/administrator/pages/product/categories/trash.blade.php
+++ b/resources/views/administrator/pages/product/categories/trash.blade.php
@@ -7,28 +7,28 @@
 
 @section('breadcrumb')
     @php
-        $breadcrumbItems = [
-            ['label' => 'Product'],
-            ['label' => 'Product Group', 'route' => route('products.group.index')],
-            ['label' => 'Trash List', 'active' => true]
-        ];
+$breadcrumbItems = [
+    ['label' => 'Product'],
+    ['label' => 'Product Group', 'route' => route('products.group.index')],
+    ['label' => 'Trash List', 'active' => true]
+];
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('tab')
     @php
-        $tabs = [
-            [
-                'label' => 'Product',
-                'route' => 'products.index',
-                'icon' => 'server',
-            ],
-            [
-                'label' => 'Product Group',
-                'route' => 'products.group.index',
-                'icon' => 'server',
-            ],
-        ];
+$tabs = [
+    [
+        'label' => 'Product',
+        'route' => 'products.index',
+        'icon' => 'server',
+    ],
+    [
+        'label' => 'Product Group',
+        'route' => 'products.group.index',
+        'icon' => 'server',
+    ],
+];
     @endphp
     <x-admin-tab :items="$tabs" />
 @endsection
@@ -40,11 +40,11 @@
             </div>
             <div class="card-body">
                 <x-datatable id="productTable" ajax="{{ route('products.group.datatable', ['trashed' => 1]) }}" :columns="[
-                    ['key' => 'name', 'label' => 'Group'],
-                    ['key' => 'slug', 'label' => 'Slug'],
-                    ['key' => 'deleted_at', 'label' => 'Deleted At'],
-                    ['key' => 'action', 'label' => 'Action', 'searchable' => false],
-                ]" />
+            ['key' => 'name', 'label' => 'Group'],
+            ['key' => 'slug', 'label' => 'Slug'],
+            ['key' => 'deleted_at', 'label' => 'Deleted At'],
+            ['key' => 'action', 'label' => 'Action', 'searchable' => false],
+        ]" />
             </div>
 
         </div>
@@ -63,36 +63,7 @@
 @push('custom-scripts')
     <script>
         document.addEventListener('DOMContentLoaded', function () {
-            // Function to initialize MicroModal
-            function initMicroModal() {
-                if (typeof MicroModal !== 'undefined') {
-                    MicroModal.init({
-                        onShow: modal => console.info(`${modal.id} is shown`),
-                        onClose: modal => console.info(`${modal.id} is hidden`),
-                        openTrigger: 'data-micromodal-trigger',
-                        closeTrigger: 'data-micromodal-close',
-                        disableScroll: true,
-                        disableFocus: false,
-                        awaitOpenAnimation: false,
-                        awaitCloseAnimation: false,
-                        debugMode: true
-                    });
-                }
-            }
-
-            // Initialize on page load
-            initMicroModal();
-
-            // Re-initialize after DataTable draws (when action column renders)
-            $('#productTable').on('draw.dt', function() {
-                setTimeout(function() {
-                    initMicroModal();
-                    // Re-initialize Lucide icons for modal content
-                    if (typeof lucide !== 'undefined') {
-                        lucide.createIcons();
-                    }
-                }, 100);
-            });
+            // DataTable is already initialized in components/datatable
         });
     </script>
 @endpush
diff --git a/resources/views/components/data-table.blade.php b/resources/views/components/data-table.blade.php
index 33d4989..880205c 100644
--- a/resources/views/components/data-table.blade.php
+++ b/resources/views/components/data-table.blade.php
@@ -1,580 +1,588 @@
 @props(['id', 'columns', 'ajax', 'bulkDeleteUrl' => null])
 
 @php
-$dtColumns = collect($columns)->map(function ($c) {
-  return [
-    'data' => $c['key'],
-    'name' => $c['key'],
-    'orderable' => $c['orderable'] ?? true,
-    'searchable' => $c['searchable'] ?? true,
-    'className' => $c['className'] ?? '',
-  ];
-})->values();
+    $dtColumns = collect($columns)
+        ->map(function ($c) {
+            return [
+                'data' => $c['key'],
+                'name' => $c['key'],
+                'orderable' => $c['orderable'] ?? true,
+                'searchable' => $c['searchable'] ?? true,
+                'className' => $c['className'] ?? '',
+            ];
+        })
+        ->values();
 @endphp
-@if($bulkDeleteUrl)
-  <div class="d-flex justify-content-start mb-3 align-items-center" id="{{ $id }}-bulk-actions"
-    style="display: none !important;">
-    <div class="bg-danger-subtle text-danger px-4 py-2 rounded-3 d-flex align-items-center gap-3">
-      <div class="d-flex align-items-center gap-2">
-        <i data-lucide="alert-circle" width="16" height="16"></i>
-        <span class="fw-medium"><span id="{{ $id }}-selected-count">0</span> items selected</span>
-      </div>
-      <div class="vr bg-danger opacity-25"></div>
-      <x-button-c-r-m type="button" variant="danger" size="sm" icon="trash-2" id="{{ $id }}-bulk-delete-opener-btn"
-        class="shadow-sm">
-        Delete Selected
-      </x-button-c-r-m>
-    </div>
-  </div>
-
-  {{-- Bulk Delete Confirmation Modal (Bootstrap 5) --}}
-  <div class="modal fade" id="{{ $id }}-bulk-delete-modal" tabindex="-1" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title h5" id="{{ $id }}-bulk-delete-modal-title">
-            Confirm Bulk Delete
-          </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <p>Are you sure you want to delete <span id="{{ $id }}-bulk-delete-count-display" class="fw-bold"></span>
-            selected items?</p>
-          <p class="text-danger mt-2 mb-0">This action cannot be undone.</p>
-        </div>
-        <div class="modal-footer">
-          <x-button-c-r-m type="button" variant="danger" id="{{ $id }}-confirm-bulk-delete-btn">
-            Delete
-          </x-button-c-r-m>
-
-          <x-button-c-r-m type="button" variant="secondary" data-bs-dismiss="modal">
-            Cancel
-          </x-button-c-r-m>
-        </div>
-      </div>
-    </div>
-  </div>
-@endif
-<div class="data-table-wrapper rounded-3 overflow-hidden border border-light position-relative">
-  {{-- Loading Process Indicator --}}
-  <div class="loading-process" id="{{ $id }}-loading" style="display: none;">
-    <div class="loading-bar"></div>
-    <div class="loading-overlay"></div>
-  </div>
-
-  <table id="{{ $id }}" class="table table-hover align-middle mb-0 bg-white"
-    style="width:100%; border-collapse: separate; border-spacing: 0;">
-    <thead class="bg-light">
-      <tr>
-        @foreach($columns as $col)
-          <th
-            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3 py-3 border-bottom position-relative"
-            style="font-size: 0.75rem; letter-spacing: 0.5px;">
-            <div
-              class="d-flex align-items-center {{ $col['key'] === 'checkbox' ? 'justify-content-center' : 'justify-content-between' }}">
-              <span>
-                @if($col['key'] === 'checkbox')
-                  {!! $col['label'] !!}
-                @else
-                  {{ $col['label'] }}
-                @endif
-                </span>
-                @if($col['key'] !== 'checkbox' && ($col['orderable'] ?? true))
-                  <div class="sort-icons d-flex flex-column ms-2">
-                    <i data-lucide="arrow-up" class="sort-icon-asc" width="10" height="10"></i>
-                    <i data-lucide="arrow-down" class="sort-icon-desc" width="10" height="10" style="margin-top: -2px;"></i>
-                  </div>
-                @endif
-                </div>
-          </th>
-        @endforeach
-          </tr>
-            <tr class="filter-row bg-light">
-              @foreach($columns as $col)
-                <th class="p-2 border-bottom">
-                  @if(($col['searchable'] ?? true))
-                    <div class="input-group input-group-sm">
-                      <span class="input-group-text bg-white border-end-0 ps-2 pe-2 text-muted border-light">
-                        <i data-lucide="search" style="font-size: 0.75rem;"></i>
-                      </span>
-                      <input type="text"
-                        class="form-control form-control-sm border-start-0 ps-0 column-search shadow-none border-light bg-white"
-                        placeholder="Filter..." data-column="{{ $loop->index }}" style="font-size: 0.8125rem;">
-                    </div>
-                  @endif
-                </th>
-              @endforeach
-            </tr>
-            </thead>
-            <tbody>
-              {{-- DataTables will populate this --}}
-            </tbody>
-            </table>
+@if ($bulkDeleteUrl)
+    <div class="d-flex justify-content-start align-items-center mb-3" id="{{ $id }}-bulk-actions"
+        style="display: none !important;">
+        <div class="bg-danger-subtle text-danger rounded-3 d-flex align-items-center gap-3 px-4 py-2">
+            <div class="d-flex align-items-center gap-2">
+                <i data-lucide="alert-circle" width="16" height="16"></i>
+                <span class="fw-medium"><span id="{{ $id }}-selected-count">0</span> items selected</span>
             </div>
-            @push('custom-scripts')
-              <script>
-                document.addEventListener('DOMContentLoaded', function () {
-                  $.fn.DataTable.ext.pager.numbers_length = 7;
+            <div class="vr bg-danger opacity-25"></div>
+            <x-button-c-r-m type="button" variant="danger" size="sm" icon="trash-2"
+                id="{{ $id }}-bulk-delete-opener-btn" class="shadow-sm">
+                Delete Selected
+            </x-button-c-r-m>
+        </div>
+    </div>
 
-                  var table = $('#{{ $id }}').DataTable({
-                    processing: true,
-                    serverSide: true,
-                    ajax: '{{ $ajax }}',
-                    columns: @json($dtColumns),
-                    orderCellsTop: true,
-                    fixedHeader: false,
-                    stateSave: true,
-                    pagingType: 'full_numbers',
-                    language: {
-                      loadingRecords: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="spinner-border text-primary mb-3" role="status"></div><h6 class="text-secondary fw-medium">Đang tải dữ liệu...</h6></div>',
-                      searchPlaceholder: "Tìm kiếm...",
-                      search: "",
-                      lengthMenu: "_MENU_",
-                      info: "Showing <span class='fw-bold'>_START_</span> to <span class='fw-bold'>_END_</span> of <span class='fw-bold'>_TOTAL_</span> entries",
-                      paginate: {
+    {{-- Bulk Delete Confirmation Modal (Bootstrap 5) --}}
+    <div class="modal fade" id="{{ $id }}-bulk-delete-modal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title h5" id="{{ $id }}-bulk-delete-modal-title">
+                        Confirm Bulk Delete
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p>Are you sure you want to delete <span id="{{ $id }}-bulk-delete-count-display"
+                            class="fw-bold"></span>
+                        selected items?</p>
+                    <p class="text-danger mb-0 mt-2">This action cannot be undone.</p>
+                </div>
+                <div class="modal-footer">
+                    <x-button-c-r-m type="button" variant="danger" id="{{ $id }}-confirm-bulk-delete-btn">
+                        Delete
+                    </x-button-c-r-m>
+
+                    <x-button-c-r-m type="button" variant="secondary" data-bs-dismiss="modal">
+                        Cancel
+                    </x-button-c-r-m>
+                </div>
+            </div>
+        </div>
+    </div>
+@endif
+<div class="data-table-wrapper rounded-3 border-light position-relative overflow-hidden border">
+    {{-- Loading Process Indicator --}}
+    <div class="loading-process" id="{{ $id }}-loading" style="display: none;">
+        <div class="loading-bar"></div>
+        <div class="loading-overlay"></div>
+    </div>
+
+    <table id="{{ $id }}" class="table-hover mb-0 table bg-white align-middle"
+        style="width:100%; border-collapse: separate; border-spacing: 0;">
+        <thead class="bg-light">
+            <tr>
+                @foreach ($columns as $col)
+                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 border-bottom position-relative py-3 ps-3"
+                        style="font-size: 0.75rem; letter-spacing: 0.5px;">
+                        <div
+                            class="d-flex align-items-center {{ $col['key'] === 'checkbox' ? 'justify-content-center' : 'justify-content-between' }}">
+                            <span>
+                                @if ($col['key'] === 'checkbox')
+                                    {!! $col['label'] !!}
+                                @else
+                                    {{ $col['label'] }}
+                                @endif
+                            </span>
+                            @if ($col['key'] !== 'checkbox' && ($col['orderable'] ?? true))
+                                <div class="sort-icons d-flex flex-column ms-2">
+                                    <i data-lucide="arrow-up" class="sort-icon-asc" width="10" height="10"></i>
+                                    <i data-lucide="arrow-down" class="sort-icon-desc" width="10" height="10"
+                                        style="margin-top: -2px;"></i>
+                                </div>
+                            @endif
+                        </div>
+                    </th>
+                @endforeach
+            </tr>
+            <tr class="filter-row bg-light">
+                @foreach ($columns as $col)
+                    <th class="border-bottom p-2">
+                        @if ($col['searchable'] ?? true)
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-text border-end-0 text-muted border-light bg-white pe-2 ps-2">
+                                    <i data-lucide="search" style="font-size: 0.75rem;"></i>
+                                </span>
+                                <input type="text"
+                                    class="form-control form-control-sm border-start-0 column-search border-light bg-white ps-0 shadow-none"
+                                    placeholder="Filter..." data-column="{{ $loop->index }}"
+                                    style="font-size: 0.8125rem;">
+                            </div>
+                        @endif
+                    </th>
+                @endforeach
+            </tr>
+        </thead>
+        <tbody>
+            {{-- DataTables will populate this --}}
+        </tbody>
+    </table>
+</div>
+@push('custom-scripts')
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            $.fn.DataTable.ext.pager.numbers_length = 7;
+
+            var table = $('#{{ $id }}').DataTable({
+                processing: true,
+                serverSide: true,
+                ajax: '{{ $ajax }}',
+                columns: @json($dtColumns),
+                orderCellsTop: true,
+                fixedHeader: false,
+                stateSave: true,
+                pagingType: 'full_numbers',
+                language: {
+                    loadingRecords: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="spinner-border text-primary mb-3" role="status"></div><h6 class="text-secondary fw-medium">Đang tải dữ liệu...</h6></div>',
+                    searchPlaceholder: "Tìm kiếm...",
+                    search: "",
+                    lengthMenu: "_MENU_",
+                    info: "Showing <span class='fw-bold'>_START_</span> to <span class='fw-bold'>_END_</span> of <span class='fw-bold'>_TOTAL_</span> entries",
+                    paginate: {
                         first: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-left" width="16" height="16"></i></span>',
                         last: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-right" width="16" height="16"></i></span>',
                         next: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-right" width="16" height="16"></i></span>',
                         previous: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-left" width="16" height="16"></i></span>'
-                      },
-                      zeroRecords: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No matching records found</h6></div>',
-                      emptyTable: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No data available</h6></div>'
                     },
-                    dom: "<'row p-3'<'col-sm-12'tr>>" +
-                      "<'row px-3 pb-3 pt-1 align-items-center'<'col-sm-12 col-md-5 text-muted small'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
-                    initComplete: function () {
-                      // Initialize select2 with custom styling
-                      $('.dataTables_length select').select2({
+                    zeroRecords: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No matching records found</h6></div>',
+                    emptyTable: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No data available</h6></div>'
+                },
+                dom: "<'row p-3'<'col-sm-12'tr>>" +
+                    "<'row px-3 pb-3 pt-1 align-items-center'<'col-sm-12 col-md-5 text-muted small'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
+                initComplete: function() {
+                    // Initialize select2 with custom styling
+                    $('.dataTables_length select').select2({
                         minimumResultsForSearch: Infinity,
                         width: '80px',
                         dropdownCssClass: 'small-select-dropdown',
                         selectionCssClass: 'small-select-selection'
-                      });
-
-                      // Debounced search for column inputs (ERP Standard: Reduce server load)
-                      let searchTimeouts = {};
-                      this.api().columns().every(function () {
-                        var that = this;
-                        $('input', this.header()).on('keyup change clear', function () {
-                          const colIdx = that.index();
-                          const value = this.value;
-
-                          clearTimeout(searchTimeouts[colIdx]);
-                          searchTimeouts[colIdx] = setTimeout(function () {
-                            if (that.search() !== value) {
-                              that.search(value).draw();
-                            }
-                          }, 400); // 400ms delay
-                        });
-                      });
-                    },
-                    drawCallback: function () {
-                      // Re-initialize Select2 on draw (if lost)
-                      if ($('.dataTables_length select').data('select2')) {
-                        $('.dataTables_length select').select2('destroy');
-                      }
-                      $('.dataTables_length select').select2({
-                        minimumResultsForSearch: Infinity,
-                        width: '80px'
-                      });
-
-                      // Re-initialize icons with slight delay to ensuring DOM is ready
-                      setTimeout(function () {
-                        if (window.lucide) {
-                          lucide.createIcons();
-                        }
-                      }, 50);
-                    }
-                  });
-
-                  // ERP Standard: Double click row to edit
-                  $('#{{ $id }} tbody').on('dblclick', 'tr', function () {
-                    // Try to find an edit link in the row
-                    const editLink = $(this).find('a.btn-outline-primary, a[href*="edit"]').first();
-                    if (editLink.length && editLink.attr('href')) {
-                      window.location.href = editLink.attr('href');
-                    }
-                  });
-
-                  // Custom Loading Process Logic
-                  table.on('processing.dt', function (e, settings, processing) {
-                    const loadingEl = $('#{{ $id }}-loading');
-                    if (processing) {
-                      loadingEl.fadeIn(100);
-                    } else {
-                      loadingEl.fadeOut(200);
-                    }
-                  });
-
-                  // Prevent sorting when clicking on the input
-                  $('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
-                    e.stopPropagation();
-                  });
-
-                  // External trigger for column search (redundant but kept for manual binding if needed)
-                  $('#{{ $id }} .column-search').on('keyup change', function () {
-                    var columnIndex = $(this).data('column');
-                    table.column(columnIndex).search(this.value).draw();
-                  });
-                });
-
-                @if($bulkDeleteUrl)
-                  document.addEventListener('DOMContentLoaded', function () {
-                    const tableId = '#{{ $id }}';
-                    const bulkActions = $('#{{ $id }}-bulk-actions');
-                    const deleteBtn = $('#{{ $id }}-bulk-delete-btn');
-                    const selectedCount = $('#{{ $id }}-selected-count');
-                    const masterCheckbox = $('#dt-master-checkbox');
-                    let selectedIds = [];
-
-                    // Handle Master Checkbox
-                    $(document).on('change', '#dt-master-checkbox', function () {
-                      const isChecked = $(this).is(':checked');
-                      $('.dt-checkbox').prop('checked', isChecked).trigger('change');
                     });
 
-                    // Handle Individual Checkbox
-                    $(document).on('change', '.dt-checkbox', function () {
-                      const id = $(this).val();
-                      if ($(this).is(':checked')) {
-                        if (!selectedIds.includes(id)) selectedIds.push(id);
-                      } else {
-                        selectedIds = selectedIds.filter(item => item !== id);
-                      }
+                    // Debounced search for column inputs (ERP Standard: Reduce server load)
+                    let searchTimeouts = {};
+                    this.api().columns().every(function() {
+                        var that = this;
+                        $('input', this.header()).on('keyup change clear', function() {
+                            const colIdx = that.index();
+                            const value = this.value;
 
-                      // Update UI
-                      selectedCount.text(selectedIds.length);
-                      if (selectedIds.length > 0) {
+                            clearTimeout(searchTimeouts[colIdx]);
+                            searchTimeouts[colIdx] = setTimeout(function() {
+                                if (that.search() !== value) {
+                                    that.search(value).draw();
+                                }
+                            }, 400); // 400ms delay
+                        });
+                    });
+                },
+                drawCallback: function() {
+                    // Re-initialize Select2 on draw (if lost)
+                    if ($('.dataTables_length select').data('select2')) {
+                        $('.dataTables_length select').select2('destroy');
+                    }
+                    $('.dataTables_length select').select2({
+                        minimumResultsForSearch: Infinity,
+                        width: '80px'
+                    });
+
+                    // Re-initialize icons with slight delay to ensuring DOM is ready
+                    setTimeout(function() {
+                        if (window.lucide) {
+                            lucide.createIcons();
+                        }
+                    }, 50);
+                }
+            });
+
+            // ERP Standard: Double click row to edit
+            $('#{{ $id }} tbody').on('dblclick', 'tr', function() {
+                // Try to find an edit link in the row
+                const editLink = $(this).find('a.btn-outline-primary, a[href*="edit"]').first();
+                if (editLink.length && editLink.attr('href')) {
+                    window.location.href = editLink.attr('href');
+                }
+            });
+
+            // Custom Loading Process Logic
+            table.on('processing.dt', function(e, settings, processing) {
+                const loadingEl = $('#{{ $id }}-loading');
+                if (processing) {
+                    loadingEl.fadeIn(100);
+                } else {
+                    loadingEl.fadeOut(200);
+                }
+            });
+
+            // Prevent sorting when clicking on the input
+            $('#{{ $id }} thead tr:eq(1) th').on('click', function(e) {
+                e.stopPropagation();
+            });
+
+            // External trigger for column search (redundant but kept for manual binding if needed)
+            $('#{{ $id }} .column-search').on('keyup change', function() {
+                var columnIndex = $(this).data('column');
+                table.column(columnIndex).search(this.value).draw();
+            });
+        });
+
+        @if ($bulkDeleteUrl)
+            document.addEventListener('DOMContentLoaded', function() {
+                const tableId = '#{{ $id }}';
+                const bulkActions = $('#{{ $id }}-bulk-actions');
+                const deleteBtn = $('#{{ $id }}-bulk-delete-btn');
+                const selectedCount = $('#{{ $id }}-selected-count');
+                const masterCheckbox = $('#dt-master-checkbox');
+                let selectedIds = [];
+
+                // Handle Master Checkbox
+                $(document).on('change', '#dt-master-checkbox', function() {
+                    const isChecked = $(this).is(':checked');
+                    $('.dt-checkbox').prop('checked', isChecked).trigger('change');
+                });
+
+                // Handle Individual Checkbox
+                $(document).on('change', '.dt-checkbox', function() {
+                    const id = $(this).val();
+                    if ($(this).is(':checked')) {
+                        if (!selectedIds.includes(id)) selectedIds.push(id);
+                    } else {
+                        selectedIds = selectedIds.filter(item => item !== id);
+                    }
+
+                    // Update UI
+                    selectedCount.text(selectedIds.length);
+                    if (selectedIds.length > 0) {
                         bulkActions.show();
                         bulkActions.removeClass('d-none').addClass('d-flex');
                         bulkActions.attr('style', ''); // Clear inline style
-                      } else {
+                    } else {
                         bulkActions.hide();
-                      }
+                    }
 
-                      // Update Master Checkbox state
-                      const allCheckboxes = $('.dt-checkbox').length;
-                      const checkedCheckboxes = $('.dt-checkbox:checked').length;
+                    // Update Master Checkbox state
+                    const allCheckboxes = $('.dt-checkbox').length;
+                    const checkedCheckboxes = $('.dt-checkbox:checked').length;
 
-                      if (allCheckboxes > 0 && allCheckboxes === checkedCheckboxes) {
+                    if (allCheckboxes > 0 && allCheckboxes === checkedCheckboxes) {
                         masterCheckbox.prop('checked', true);
                         masterCheckbox.prop('indeterminate', false);
-                      } else if (checkedCheckboxes > 0) {
+                    } else if (checkedCheckboxes > 0) {
                         masterCheckbox.prop('checked', false);
                         masterCheckbox.prop('indeterminate', true);
-                      } else {
+                    } else {
                         masterCheckbox.prop('checked', false);
                         masterCheckbox.prop('indeterminate', false);
-                      }
-                    });
+                    }
+                });
 
-                    // Reset selection on table draw
-                    $('#{{ $id }}').on('draw.dt', function () {
-                      selectedIds = [];
-                      bulkActions.hide();
-                      masterCheckbox.prop('checked', false);
-                      masterCheckbox.prop('indeterminate', false);
-                    });
+                // Reset selection on table draw
+                $('#{{ $id }}').on('draw.dt', function() {
+                    selectedIds = [];
+                    bulkActions.hide();
+                    masterCheckbox.prop('checked', false);
+                    masterCheckbox.prop('indeterminate', false);
+                });
 
-                    // Handle Bulk Delete Opener
-                    const modalId = '{{ $id }}-bulk-delete-modal';
-                    const modalEl = document.getElementById(modalId);
-                    const openerBtn = $('#{{ $id }}-bulk-delete-opener-btn');
-                    const confirmBtn = $('#{{ $id }}-confirm-bulk-delete-btn');
-                    const countDisplay = $('#{{ $id }}-bulk-delete-count-display');
-                    let bsModal = null;
+                // Handle Bulk Delete Opener
+                const modalId = '{{ $id }}-bulk-delete-modal';
+                const modalEl = document.getElementById(modalId);
+                const openerBtn = $('#{{ $id }}-bulk-delete-opener-btn');
+                const confirmBtn = $('#{{ $id }}-confirm-bulk-delete-btn');
+                const countDisplay = $('#{{ $id }}-bulk-delete-count-display');
+                let bsModal = null;
 
-                    openerBtn.on('click', function () {
-                      if (selectedIds.length === 0) return;
-                      countDisplay.text(selectedIds.length);
+                openerBtn.on('click', function() {
+                    if (selectedIds.length === 0) return;
+                    countDisplay.text(selectedIds.length);
 
-                      if (!bsModal) {
+                    if (!bsModal) {
                         bsModal = new bootstrap.Modal(modalEl);
-                      }
-                      bsModal.show();
-                    });
+                    }
+                    bsModal.show();
+                });
 
-                    // Handle Confirm Delete
-                    confirmBtn.on('click', function () {
-                      $.ajax({
+                // Handle Confirm Delete
+                confirmBtn.on('click', function() {
+                    $.ajax({
                         url: '{{ $bulkDeleteUrl }}',
                         type: 'DELETE',
                         data: {
-                          ids: selectedIds,
-                          _token: '{{ csrf_token() }}'
+                            ids: selectedIds,
+                            _token: '{{ csrf_token() }}'
                         },
-                        beforeSend: function () {
-                          confirmBtn.prop('disabled', true).text('Deleting...');
+                        beforeSend: function() {
+                            confirmBtn.prop('disabled', true).text('Deleting...');
                         },
-                        success: function (response) {
-                          if (bsModal) bsModal.hide();
-                          $('#{{ $id }}').DataTable().ajax.reload();
-                          selectedIds = [];
-                          bulkActions.hide();
+                        success: function(response) {
+                            if (bsModal) bsModal.hide();
+                            $('#{{ $id }}').DataTable().ajax.reload();
+                            selectedIds = [];
+                            bulkActions.hide();
 
-                          // Show success toast
-                          if (typeof FuiToast !== 'undefined') {
-                            FuiToast.success(response.message || 'Selected items have been deleted successfully.');
-                          }
+                            // Show success toast
+                            if (typeof FuiToast !== 'undefined') {
+                                FuiToast.success(response.message ||
+                                    'Selected items have been deleted successfully.');
+                            }
 
-                          // Re-render icons after reload
-                          if (window.lucide) lucide.createIcons();
+                            // Re-render icons after reload
+                            if (window.lucide) lucide.createIcons();
                         },
-                        error: function (xhr) {
-                          const message = xhr.responseJSON?.message || 'Something went wrong.';
-                          if (typeof FuiToast !== 'undefined') {
-                            FuiToast.error(message);
-                          } else {
-                            alert(message);
-                          }
-                          if (bsModal) bsModal.hide();
+                        error: function(xhr) {
+                            const message = xhr.responseJSON?.message ||
+                            'Something went wrong.';
+                            if (typeof FuiToast !== 'undefined') {
+                                FuiToast.error(message);
+                            } else {
+                                alert(message);
+                            }
+                            if (bsModal) bsModal.hide();
                         },
-                        complete: function () {
-                          confirmBtn.prop('disabled', false).text('Delete');
+                        complete: function() {
+                            confirmBtn.prop('disabled', false).text('Delete');
                         }
-                      });
                     });
-                  });
-                @endif
-              </script>
+                });
+            });
+        @endif
+    </script>
 
-                  <style>
-                    /* Custom SAAS DataTable Styles */
-                    .data-table-wrapper {
-                      background: #fff;
-                      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-                      overflow-y: auto;
-                      position: relative;
-                    }
+    <style>
+        /* Custom SAAS DataTable Styles */
+        .data-table-wrapper {
+            background: #fff;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+            overflow-y: auto;
+            position: relative;
+        }
 
-                    .pagination button.page-link {
-                      height: 100%;
-                    }
+        .pagination button.page-link {
+            height: 100%;
+        }
 
-                    .data-table-wrapper .table thead th {
-                      border-color: #f1f5f9 !important;
-                      font-family: 'Inter', sans-serif;
-                      vertical-align: middle;
-                      position: sticky;
-                      top: 0;
-                      z-index: 10;
-                      background-color: #f8f9fa;
-                      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-                    }
+        .data-table-wrapper .table thead th {
+            border-color: #f1f5f9 !important;
+            font-family: 'Inter', sans-serif;
+            vertical-align: middle;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            background-color: #f8f9fa;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
 
-                    /* Sticky Action Column (ERP Standard for wide tables) */
-                    .table thead th:last-child,
-                    .table tbody td:last-child {
-                      position: sticky;
-                      right: 0;
-                      background: #fff;
-                      z-index: 5;
-                      border-left: 1px solid #f1f5f9;
-                      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.02);
-                    }
+        /* Sticky Action Column (ERP Standard for wide tables) */
+        .table thead th:last-child,
+        .table tbody td:last-child {
+            position: sticky;
+            right: 0;
+            background: #fff;
+            z-index: 5;
+            border-left: 1px solid #f1f5f9;
+            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.02);
+        }
 
-                    .table thead th:last-child {
-                      background: #f8f9fa;
-                      z-index: 11;
-                    }
+        .table thead th:last-child {
+            background: #f8f9fa;
+            z-index: 11;
+        }
 
-                    /* Sticky Checkbox Column */
-                    .table thead th:first-child,
-                    .table tbody td:first-child {
-                      position: sticky;
-                      left: 0;
-                      background: #fff;
-                      z-index: 5;
-                      border-right: 1px solid #f1f5f9;
-                      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.02);
-                    }
+        /* Sticky Checkbox Column */
+        .table thead th:first-child,
+        .table tbody td:first-child {
+            position: sticky;
+            left: 0;
+            background: #fff;
+            z-index: 5;
+            border-right: 1px solid #f1f5f9;
+            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.02);
+        }
 
-                    .table thead th:first-child {
-                      background: #f8f9fa;
-                      z-index: 11;
-                    }
+        .table thead th:first-child {
+            background: #f8f9fa;
+            z-index: 11;
+        }
 
-                    .table tbody tr:hover td {
-                      background-color: #f8fafc !important;
-                      cursor: pointer;
-                    }
+        .table tbody tr:hover td {
+            background-color: #f8fafc !important;
+            cursor: pointer;
+        }
 
-                    .data-table-wrapper .table td:not(:last-child) {
-                      border-right: 1px solid #f1f5f9;
-                    }
+        .data-table-wrapper .table td:not(:last-child) {
+            border-right: 1px solid #f1f5f9;
+        }
 
-                    /* Sticky for second row (filter inputs) if present */
-                    .data-table-wrapper .table thead tr:nth-child(2) th {
-                      top: 45px;
-                      /* Adjust based on typical header height */
-                      z-index: 4;
-                    }
+        /* Sticky for second row (filter inputs) if present */
+        .data-table-wrapper .table thead tr:nth-child(2) th {
+            top: 45px;
+            /* Adjust based on typical header height */
+            z-index: 4;
+        }
 
-                    .data-table-wrapper .input-group-text {
-                      color: #94a3b8;
-                      /* Slate 400 */
-                    }
+        .data-table-wrapper .input-group-text {
+            color: #94a3b8;
+            /* Slate 400 */
+        }
 
-                    .data-table-wrapper .form-control::placeholder {
-                      color: #cbd5e1;
-                      /* Slate 300 */
-                    }
+        .data-table-wrapper .form-control::placeholder {
+            color: #cbd5e1;
+            /* Slate 300 */
+        }
 
-                    .dataTables_wrapper .pagination .page-item .page-link {
-                      border: 1px solid transparent;
-                      border-radius: 6px;
-                      margin: 0 2px;
-                      color: #64748b;
-                      padding: 0;
-                      font-size: 0.875rem;
-                      transition: all 0.2s ease;
-                      display: flex;
-                      align-items: center;
-                      justify-content: center;
-                      height: 38px;
-                      min-width: 38px;
-                    }
+        .dataTables_wrapper .pagination .page-item .page-link {
+            border: 1px solid transparent;
+            border-radius: 6px;
+            margin: 0 2px;
+            color: #64748b;
+            padding: 0;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 38px;
+            min-width: 38px;
+        }
 
-                    .dataTables_wrapper .pagination .page-item.active .page-link {
-                      background-color: #0f172a;
-                      /* Slate 900 or Primary Color */
-                      color: white;
-                      font-weight: 500;
-                      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                      border-color: #0f172a;
-                    }
+        .dataTables_wrapper .pagination .page-item.active .page-link {
+            background-color: #0f172a;
+            /* Slate 900 or Primary Color */
+            color: white;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            border-color: #0f172a;
+        }
 
-                    .dataTables_wrapper .pagination .page-item.disabled .page-link {
-                      color: #cbd5e1;
-                      background-color: transparent;
-                    }
+        .dataTables_wrapper .pagination .page-item.disabled .page-link {
+            color: #cbd5e1;
+            background-color: transparent;
+        }
 
-                    .dataTables_wrapper .pagination .page-item:not(.active) .page-link:hover {
-                      background-color: #f8fafc;
-                      color: #0f172a;
-                      border-color: #e2e8f0;
-                    }
+        .dataTables_wrapper .pagination .page-item:not(.active) .page-link:hover {
+            background-color: #f8fafc;
+            color: #0f172a;
+            border-color: #e2e8f0;
+        }
 
-                    /* Select2 Customization for Table Length */
-                    .dataTables_length {
-                      margin-right: 1rem;
-                    }
+        /* Select2 Customization for Table Length */
+        .dataTables_length {
+            margin-right: 1rem;
+        }
 
-                    .select2-container--default .select2-selection--single {
-                      border: 1px solid #e2e8f0;
-                      border-radius: 6px;
-                      height: 32px;
-                      display: flex;
-                      align-items: center;
-                      outline: none;
-                    }
+        .select2-container--default .select2-selection--single {
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            outline: none;
+        }
 
-                    .select2-container--default .select2-selection--single:focus {
-                      border-color: #94a3b8;
-                    }
+        .select2-container--default .select2-selection--single:focus {
+            border-color: #94a3b8;
+        }
 
-                    .select2-container--default .select2-selection--single .select2-selection__arrow {
-                      height: 30px;
-                    }
+        .select2-container--default .select2-selection--single .select2-selection__arrow {
+            height: 30px;
+        }
 
-                    .select2-container--default .select2-selection--single .select2-selection__rendered {
-                      color: #475569;
-                      font-size: 0.8125rem;
-                      padding-left: 10px;
-                      line-height: normal;
-                    }
+        .select2-container--default .select2-selection--single .select2-selection__rendered {
+            color: #475569;
+            font-size: 0.8125rem;
+            padding-left: 10px;
+            line-height: normal;
+        }
 
-                    /* Loading Process Styles */
-                    .loading-process {
-                      position: absolute;
-                      top: 0;
-                      left: 0;
-                      right: 0;
-                      bottom: 0;
-                      z-index: 1000;
-                      pointer-events: none;
-                    }
+        /* Loading Process Styles */
+        .loading-process {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1000;
+            pointer-events: none;
+        }
 
-                    .loading-bar {
-                      position: absolute;
-                      top: 0;
-                      left: 0;
-                      height: 3px;
-                      width: 100%;
-                      background: #f1f5f9;
-                      overflow: hidden;
-                      z-index: 1001;
-                    }
+        .loading-bar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 3px;
+            width: 100%;
+            background: #f1f5f9;
+            overflow: hidden;
+            z-index: 1001;
+        }
 
-                    .loading-bar::after {
-                      content: '';
-                      position: absolute;
-                      top: 0;
-                      left: 0;
-                      height: 100%;
-                      width: 50%;
-                      background: linear-gradient(90deg, transparent, #0f172a, transparent);
-                      animation: loading-process-info 1.5s infinite linear;
-                    }
+        .loading-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 50%;
+            background: linear-gradient(90deg, transparent, #0f172a, transparent);
+            animation: loading-process-info 1.5s infinite linear;
+        }
 
-                    .loading-overlay {
-                      position: absolute;
-                      top: 0;
-                      left: 0;
-                      width: 100%;
-                      height: 100%;
-                      background: rgba(255, 255, 255, 0.5);
-                      backdrop-filter: blur(1px);
-                    }
+        .loading-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.5);
+            backdrop-filter: blur(1px);
+        }
 
-                    @keyframes loading-process-info {
-                      0% {
-                        transform: translateX(-100%);
-                      }
+        @keyframes loading-process-info {
+            0% {
+                transform: translateX(-100%);
+            }
 
-                      100% {
-                        transform: translateX(200%);
-                      }
-                    }
+            100% {
+                transform: translateX(200%);
+            }
+        }
 
-                    /* Custom Sort Icons Styles */
-                    .sort-icons {
-                      opacity: 0.15;
-                      transition: opacity 0.2s;
-                    }
+        /* Custom Sort Icons Styles */
+        .sort-icons {
+            opacity: 0.15;
+            transition: opacity 0.2s;
+        }
 
-                    th:hover .sort-icons {
-                      opacity: 0.5;
-                    }
+        th:hover .sort-icons {
+            opacity: 0.5;
+        }
 
-                    th.sorting_asc .sort-icons {
-                      opacity: 1;
-                    }
-                    th.sorting_asc .sort-icon-desc {
-                      display: none !important;
-                    }
+        th.sorting_asc .sort-icons {
+            opacity: 1;
+        }
 
-                    th.sorting_desc .sort-icons {
-                      opacity: 1;
-                    }
-                    th.sorting_desc .sort-icon-asc {
-                      display: none !important;
-                    }
+        th.sorting_asc .sort-icon-desc {
+            display: none !important;
+        }
 
-                    /* Hide default DataTables icons */
-                    table.dataTable thead .sorting:before,
-                    table.dataTable thead .sorting:after,
-                    table.dataTable thead .sorting_asc:before,
-                    table.dataTable thead .sorting_asc:after,
-                    table.dataTable thead .sorting_desc:before,
-                    table.dataTable thead .sorting_desc:after {
-                      display: none !important;
-                    }
+        th.sorting_desc .sort-icons {
+            opacity: 1;
+        }
 
-                    /* Processing Indicator with improved look - Centered */
-                    div.dataTables_processing {
-                      display: none !important;
-                      /* Hide default processing */
-                    }
-                  </style>
-            @endpush
\ No newline at end of file
+        th.sorting_desc .sort-icon-asc {
+            display: none !important;
+        }
+
+        /* Hide default DataTables icons */
+        table.dataTable thead .sorting:before,
+        table.dataTable thead .sorting:after,
+        table.dataTable thead .sorting_asc:before,
+        table.dataTable thead .sorting_asc:after,
+        table.dataTable thead .sorting_desc:before,
+        table.dataTable thead .sorting_desc:after {
+            display: none !important;
+        }
+
+        /* Processing Indicator with improved look - Centered */
+        div.dataTables_processing {
+            display: none !important;
+            /* Hide default processing */
+        }
+    </style>
+@endpush