update ui

resources/views/components/user-filter-form.blade.php

@@ -57,3 +57,38 @@
         <button type="button" id="btnClearFilters" class="btn-secondary !py-2.5 !px-5 text-sm rounded-xl font-bold border border-[#d9dfe7] hover:bg-gray-100 flex items-center justify-center min-w-[100px] flex-1 md:flex-none">Xóa bộ lọc</button>
     </div>
 </form>
+
+@push('styles')
+<style>
+    #departmentFilter-ts-wrapper {
+        width: 100% !important;
+    }
+    @media (min-width: 768px) {
+        #departmentFilter-ts-wrapper {
+            width: 220px !important;
+        }
+    }
+    .ts-control { border-radius: 0.75rem; border-color: #d9dfe7; padding: 0.45rem 1rem; }
+    .ts-wrapper.form-input { padding: 0; border: none; }
+</style>
+@endpush
+
+@push('scripts')
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        new TomSelect("#departmentFilter", {
+            create: false,
+            sortField: {
+                field: "text",
+                direction: "asc"
+            },
+            placeholder: "🔍 Tìm phòng ban...",
+            render: {
+                no_results: function(data, escape) {
+                    return '<div class="no-results p-3 text-gray-500">Không tìm thấy phòng ban nào</div>';
+                }
+            }
+        });
+    });
+</script>
+@endpush

resources/views/components/user-form.blade.php

@@ -226,3 +226,32 @@
         </form>
     @endif
 </div>
+
+@if($isCreate)
+    @push('styles')
+    <style>
+        .ts-control { border-radius: 0.75rem; border-color: #d9dfe7; padding: 0.65rem 1rem; }
+        .ts-wrapper.form-input { padding: 0; border: none; }
+    </style>
+    @endpush
+
+    @push('scripts')
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            new TomSelect("#departments", {
+                create: false,
+                sortField: {
+                    field: "text",
+                    direction: "asc"
+                },
+                placeholder: "🔍 Tìm phòng ban...",
+                render: {
+                    no_results: function(data, escape) {
+                        return '<div class="no-results p-3 text-gray-500">Không tìm thấy phòng ban nào</div>';
+                    }
+                }
+            });
+        });
+    </script>
+    @endpush
+@endif