feat: add void action to inventory count index

resources/js/Pages/Inventory/Count/Index.tsx

@@ -31,14 +31,26 @@ import {
     X,
     ClipboardCheck,
     Eye,
-    Pencil
+    Pencil,
+    Trash2
 } from 'lucide-react';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
 import Pagination from '@/Components/shared/Pagination';
 import { Can } from '@/Components/Permission/Can';
 
 export default function Index({ auth, docs, warehouses, filters }: any) {
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-    const { data, setData, post, processing, reset, errors } = useForm({
+    const [deleteId, setDeleteId] = useState<string | null>(null);
+    const { data, setData, post, processing, reset, errors, delete: destroy } = useForm({
         warehouse_id: '',
         remarks: '',
     });
@@ -108,6 +120,19 @@ export default function Index({ auth, docs, warehouses, filters }: any) {
         });
     };
 
+    const confirmDelete = (id: string) => {
+        setDeleteId(id);
+    };
+
+    const handleDelete = () => {
+        if (deleteId) {
+            destroy(route('inventory.count.destroy', [deleteId]), {
+                onSuccess: () => setDeleteId(null),
+                onError: () => setDeleteId(null),
+            });
+        }
+    };
+
     const getStatusBadge = (status) => {
         switch (status) {
             case 'draft':
@@ -115,7 +140,7 @@ export default function Index({ auth, docs, warehouses, filters }: any) {
             case 'counting':
                 return <Badge className="bg-blue-500 hover:bg-blue-600">盤點中</Badge>;
             case 'completed':
-                return <Badge className="bg-green-500 hover:bg-green-600">已完成</Badge>;
+                return <Badge className="bg-green-500 hover:bg-green-600">已核准</Badge>;
             case 'cancelled':
                 return <Badge variant="destructive">已取消</Badge>;
             default:
@@ -285,12 +310,23 @@ export default function Index({ auth, docs, warehouses, filters }: any) {
                                                             title={doc.status === 'completed' ? '查閱' : '盤點'}
                                                         >
                                                             {doc.status === 'completed' ? (
-                                                                <Eye className="w-4 h-4" />
+                                                                <Eye className="w-4 h-4 ml-0.5" />
                                                             ) : (
-                                                                <Pencil className="w-4 h-4" />
+                                                                <Pencil className="w-4 h-4 ml-0.5" />
                                                             )}
                                                         </Button>
                                                     </Link>
+                                                    {doc.status !== 'completed' && (
+                                                        <Button
+                                                            variant="outline"
+                                                            size="sm"
+                                                            className="button-outlined-error"
+                                                            title="作廢"
+                                                            onClick={() => confirmDelete(doc.id)}
+                                                        >
+                                                            <Trash2 className="w-4 h-4 ml-0.5" />
+                                                        </Button>
+                                                    )}
                                                 </Can>
                                             </div>
                                         </TableCell>
@@ -323,6 +359,21 @@ export default function Index({ auth, docs, warehouses, filters }: any) {
                     </div>
                     <Pagination links={docs.links} />
                 </div>
+
+                <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>確定要作廢此盤點單嗎？</AlertDialogTitle>
+                            <AlertDialogDescription>
+                                此動作無法復原。作廢後請重新建立盤點單。
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>取消</AlertDialogCancel>
+                            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">確認作廢</AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
             </div>
         </AuthenticatedLayout>
     );

resources/js/Pages/Inventory/Count/Show.tsx

@@ -1,5 +1,5 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import { Head, useForm, Link } from '@inertiajs/react'; // Added Link
+import { Head, useForm, Link, router } from '@inertiajs/react'; // Added Link
 import {
     Table,
     TableBody,
@@ -56,12 +56,10 @@ export default function Show({ doc }: any) {
     };
 
     const handleReopen = () => {
-        if (confirm('確定要取消核准嗎？單據將回復為盤點中狀態，且庫存異動將被撤回（若已過帳）。')) {
         router.visit(route('inventory.count.reopen', [doc.id]), {
             method: 'put',
         });
     }
-    }
 
     const isCompleted = doc.status === 'completed';
 
@@ -123,16 +121,31 @@ export default function Show({ doc }: any) {
 
                             {isCompleted && (
                                 <Can permission="inventory.adjust">
+                                    <AlertDialog>
+                                        <AlertDialogTrigger asChild>
                                             <Button
                                                 variant="outline"
                                                 size="sm"
                                                 className="button-outlined-error"
-                                        onClick={handleReopen}
                                                 disabled={processing}
                                             >
                                                 <RotateCcw className="w-4 h-4 mr-2" />
                                                 取消核准
                                             </Button>
+                                        </AlertDialogTrigger>
+                                        <AlertDialogContent>
+                                            <AlertDialogHeader>
+                                                <AlertDialogTitle>確定要取消核准嗎？</AlertDialogTitle>
+                                                <AlertDialogDescription>
+                                                    單據將回復為「盤點中」狀態，若已產生庫存異動將被撤回。此動作可讓您重新編輯盤點數量。
+                                                </AlertDialogDescription>
+                                            </AlertDialogHeader>
+                                            <AlertDialogFooter>
+                                                <AlertDialogCancel>取消</AlertDialogCancel>
+                                                <AlertDialogAction onClick={handleReopen} className="bg-red-600 hover:bg-red-700">確認取消核准</AlertDialogAction>
+                                            </AlertDialogFooter>
+                                        </AlertDialogContent>
+                                    </AlertDialog>
                                 </Can>
                             )}