update ui

resources/css/app.css

@@ -1,9 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
-
-@font-face {
-    font-family: 'SVN-Poppins-Regular';
-    src: url('/fonts/FZ Poppins-Regular.ttf') format('truetype');
-    font-weight: 400;
     font-style: normal;
 }
 
@@ -54,6 +48,7 @@
 @import "@fontsource/roboto/500.css";
 @import "@fontsource/roboto/700.css";
 @import 'tailwindcss';
+@import 'tom-select/dist/css/tom-select.css';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';

resources/css/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Caveat';
+    src: url('/fonts/Caveat-700.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}

resources/js/app.js

@@ -3,6 +3,9 @@ import { AjaxTable } from './AjaxTable';
 
 window.AjaxTable = AjaxTable;
 
+import TomSelect from 'tom-select';
+window.TomSelect = TomSelect;
+
 document.addEventListener('DOMContentLoaded', () => {
     if (document.getElementById('filterForm') && document.querySelector('.bg-white.shadow-sm')) {
         new AjaxTable();

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');