feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

resources/js/Pages/Admin/User/Index.tsx

@@ -12,11 +12,20 @@ import {
     TableRow,
 } from "@/Components/ui/table";
 import { format } from 'date-fns';
-import { toast } from 'sonner';
 import { Can } from '@/Components/Permission/Can';
 import { cn } from "@/lib/utils";
 import Pagination from "@/Components/shared/Pagination";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
 
 interface Role {
     id: number;
@@ -54,12 +63,23 @@ interface Props {
 
 export default function UserIndex({ users, filters }: Props) {
     const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
+    const [deleteId, setDeleteId] = useState<number | null>(null);
+    const [deleteName, setDeleteName] = useState<string>('');
+    const [modelOpen, setModelOpen] = useState(false);
 
-    const handleDelete = (id: number, name: string) => {
-        if (confirm(`確定要刪除使用者「${name}」嗎？此操作無法復原。`)) {
-            router.delete(route('users.destroy', id), {
-                onSuccess: () => toast.success('使用者已刪除'),
-                onError: () => toast.error('刪除失敗，請檢查權限'),
+    const confirmDelete = (id: number, name: string) => {
+        setDeleteId(id);
+        setDeleteName(name);
+        setModelOpen(true);
+    };
+
+    const handleDelete = () => {
+        if (deleteId) {
+            router.delete(route('users.destroy', deleteId), {
+                onSuccess: () => {
+                    setModelOpen(false);
+                },
+                onFinish: () => setModelOpen(false),
             });
         }
     };
@@ -229,7 +249,7 @@ export default function UserIndex({ users, filters }: Props) {
                                                     size="sm"
                                                     className="button-outlined-error"
                                                     title="刪除"
-                                                    onClick={() => handleDelete(user.id, user.name)}
+                                                    onClick={() => confirmDelete(user.id, user.name)}
                                                 >
                                                     <Trash2 className="h-4 w-4" />
                                                 </Button>
@@ -243,7 +263,7 @@ export default function UserIndex({ users, filters }: Props) {
                 </div>
 
                 {/* 分頁元件 - 統一樣式 */}
-                <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="mt-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                     <div className="flex items-center gap-2 text-sm text-gray-500">
                         <span>每頁顯示</span>
                         <SearchableSelect
@@ -255,14 +275,33 @@ export default function UserIndex({ users, filters }: Props) {
                                 { label: "50", value: "50" },
                                 { label: "100", value: "100" }
                             ]}
-                            className="w-[80px] h-8"
+                            className="w-[100px] h-8"
                             showSearch={false}
                         />
                         <span>筆</span>
                     </div>
-                    <Pagination links={users.links} />
+                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
+                        <Pagination links={users.links} />
+                    </div>
                 </div>
             </div>
-        </AuthenticatedLayout>
+
+            <AlertDialog open={modelOpen} onOpenChange={setModelOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>確定要刪除此使用者嗎？</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            您即將刪除使用者「{deleteName}」。此操作無法復原，請確認是否繼續。
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>取消</AlertDialogCancel>
+                        <AlertDialogAction onClick={handleDelete} className="button-filled-error">
+                            確認刪除
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </AuthenticatedLayout >
     );
 }