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

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

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

@@ -13,7 +13,6 @@ import {
     TableRow,
 } from "@/Components/ui/table";
 import { format } from 'date-fns';
-import { toast } from 'sonner';
 import { Can } from '@/Components/Permission/Can';
 import { useState } from 'react';
 import {
@@ -23,6 +22,16 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@/Components/ui/dialog";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
 
 interface User {
     id: number;
@@ -50,11 +59,23 @@ interface Props {
 
 export default function RoleIndex({ roles, filters = {} }: Props) {
     const [selectedRole, setSelectedRole] = useState<Role | null>(null);
+    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('roles.destroy', id), {
-                onSuccess: () => toast.success('角色已刪除'),
+    const confirmDelete = (id: number, name: string) => {
+        setDeleteId(id);
+        setDeleteName(name);
+        setModelOpen(true);
+    };
+
+    const handleDelete = () => {
+        if (deleteId) {
+            router.delete(route('roles.destroy', deleteId), {
+                onSuccess: () => {
+                    setModelOpen(false);
+                },
+                onFinish: () => setModelOpen(false),
             });
         }
     };
@@ -212,7 +233,7 @@ export default function RoleIndex({ roles, filters = {} }: Props) {
                                                         className="button-outlined-error"
                                                         title="刪除"
                                                         disabled={role.users_count > 0}
-                                                        onClick={() => handleDelete(role.id, role.display_name)}
+                                                        onClick={() => confirmDelete(role.id, role.display_name)}
                                                     >
                                                         <Trash2 className="h-4 w-4" />
                                                     </Button>
@@ -274,6 +295,23 @@ export default function RoleIndex({ roles, filters = {} }: Props) {
                     </div>
                 </DialogContent>
             </Dialog>
+
+            <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>
     );
 }