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