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

resources/views/user/send.blade.php

@@ -1,6 +1,13 @@
 @extends('layouts.app')
 @section('title', 'Gửi Thank Card')
 
+@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
+
 @section('content')
 <div class="max-w-[640px] mx-auto w-full pb-10">
     <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden">
@@ -91,6 +98,20 @@
 @push('scripts')
 <script>
     document.addEventListener('DOMContentLoaded', function () {
+        new TomSelect("#receiver", {
+            create: false,
+            sortField: {
+                field: "text",
+                direction: "asc"
+            },
+            placeholder: "🔍 Nhập tên, mã NV hoặc email...",
+            render: {
+                no_results: function(data, escape) {
+                    return '<div class="no-results p-3 text-gray-500">Không tìm thấy nhân viên nào</div>';
+                }
+            }
+        });
+
         const btnSubmit = document.getElementById('btnSubmitSend');
         const form = document.getElementById('sendCardForm');