update ui

app/Http/Middleware/Admin/AdminMiddleware.php

@@ -15,6 +15,6 @@ class AdminMiddleware
         if (Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN') && Auth::user()->status == config('constants.STATUS_ACTIVE')) {
             return $next($request);
         }
-        return redirect()->route('login');
+        abort(404);
     }
 }

package-lock.json

@@ -6,7 +6,8 @@
         "": {
             "dependencies": {
                 "@fontsource/roboto": "^5.2.10",
-                "puppeteer": "^25.2.1"
+                "puppeteer": "^25.2.1",
+                "tom-select": "^2.2.2"
             },
             "devDependencies": {
                 "@tailwindcss/vite": "^4.0.0",
@@ -518,6 +519,21 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@orchidjs/sifter": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz",
+            "integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@orchidjs/unicode-variants": "^1.1.2"
+            }
+        },
+        "node_modules/@orchidjs/unicode-variants": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz",
+            "integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA==",
+            "license": "Apache-2.0"
+        },
         "node_modules/@puppeteer/browsers": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.0.5.tgz",
@@ -2553,6 +2569,23 @@
                 "url": "https://github.com/sponsors/SuperchupuDev"
             }
         },
+        "node_modules/tom-select": {
+            "version": "2.6.2",
+            "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.6.2.tgz",
+            "integrity": "sha512-eiXIkk82XzzUTOVQDFpy+ZGejuqdTvMukyUyeZBQaKnqW42UoTiTZnrod/eX0rkqJEc4rZY9DZ3zdjV07i29wQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@orchidjs/sifter": "^1.1.0",
+                "@orchidjs/unicode-variants": "^1.1.2"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/tom-select"
+            }
+        },
         "node_modules/tree-kill": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",

package.json

@@ -16,6 +16,7 @@
     },
     "dependencies": {
         "@fontsource/roboto": "^5.2.10",
-        "puppeteer": "^25.2.1"
+        "puppeteer": "^25.2.1",
+        "tom-select": "^2.2.2"
     }
 }

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