feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能

resources/js/Pages/Warehouse/SafetyStockSettings.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { ArrowLeft, Plus } from "lucide-react";
+import { ArrowLeft, Plus, Shield } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, Link, router } from "@inertiajs/react";
@@ -14,6 +14,17 @@ import AddSafetyStockDialog from "@/Components/Warehouse/SafetyStock/AddSafetySt
 import EditSafetyStockDialog from "@/Components/Warehouse/SafetyStock/EditSafetyStockDialog";
 import { toast } from "sonner";
 import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
 
 interface Props {
     warehouse: Warehouse;
@@ -31,6 +42,7 @@ export default function SafetyStockPage({
     const [settings, setSettings] = useState<SafetyStockSetting[]>(initialSettings);
     const [showAddDialog, setShowAddDialog] = useState(false);
     const [editingSetting, setEditingSetting] = useState<SafetyStockSetting | null>(null);
+    const [deleteId, setDeleteId] = useState<string | null>(null);
 
 
     // 當 Props 更新時同步本地 State
@@ -71,10 +83,16 @@ export default function SafetyStockPage({
         });
     };
 
-    const handleDelete = (id: string) => {
-        router.delete(route('warehouses.safety-stock.destroy', [warehouse.id, id]), {
+    const handleDelete = () => {
+        if (!deleteId) return;
+
+        router.delete(route('warehouses.safety-stock.destroy', [warehouse.id, deleteId]), {
             onSuccess: () => {
+                setDeleteId(null);
                 toast.success("已刪除安全庫存設定");
+            },
+            onError: () => {
+                toast.error("刪除失敗");
             }
         });
     };
@@ -101,18 +119,23 @@ export default function SafetyStockPage({
 
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="mb-2">安全庫存設定 - {warehouse.name}</h1>
-                            <p className="text-gray-600 font-medium">
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                                <Shield className="h-6 w-6 text-[#01ab83]" />
+                                安全庫存設定 - {warehouse.name}
+                            </h1>
+                            <p className="text-gray-500 mt-1">
                                 設定商品的安全庫存量，當庫存低於安全值時將發出警告
                             </p>
                         </div>
-                        <Button
-                            onClick={() => setShowAddDialog(true)}
-                            className="button-filled-primary"
-                        >
-                            <Plus className="mr-2 h-4 w-4" />
-                            新增安全庫存
-                        </Button>
+                        <Can permission="inventory.safety_stock">
+                            <Button
+                                onClick={() => setShowAddDialog(true)}
+                                className="button-filled-primary"
+                            >
+                                <Plus className="mr-2 h-4 w-4" />
+                                新增安全庫存
+                            </Button>
+                        </Can>
                     </div>
                 </div>
 
@@ -121,7 +144,7 @@ export default function SafetyStockPage({
                     settings={settings}
                     inventories={inventories}
                     onEdit={setEditingSetting}
-                    onDelete={handleDelete}
+                    onDelete={setDeleteId}
                 />
 
                 {/* 新增對話框 */}
@@ -143,6 +166,27 @@ export default function SafetyStockPage({
                         onSave={handleEdit}
                     />
                 )}
+
+                {/* 刪除確認對話框 */}
+                <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>確認刪除安全庫存設定</AlertDialogTitle>
+                            <AlertDialogDescription>
+                                您確定要刪除此項商品的安全庫存設定嗎？刪除後系統將不再針對此商品發出庫存不足警告。此動作無法復原。
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
+                            <AlertDialogAction
+                                onClick={handleDelete}
+                                className="bg-red-600 hover:bg-red-700 text-white"
+                            >
+                                確認刪除
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
             </div>
         </AuthenticatedLayout>
     );