fix(admin): confirm event deletion actions

src/views/AdminEvents.tsx

@@ -2,15 +2,28 @@
 
 import * as React from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Edit3, Eye, Trash2 } from 'lucide-react';
 import { Link, useNavigate } from '@/lib/router';
 import type { EventListItemSchema } from '@/lib/types';
 import { api } from '@/lib/api';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import ProgressiveImage from '@/components/ProgressiveImage';
 import { useToast } from '@/hooks/use-toast';
 import { formatJalali, formatToman, getEventCardImageUrl, resolveErrorMessage, toPersianDigits } from '@/lib/utils';
@@ -101,6 +114,70 @@ const AdminEventsPage: React.FC = () => {
     }
   }, [eventsQuery.data, filters.sort]);
 
+  const renderEventActions = (event: EventListItemSchema) => (
+    <div className="flex items-center justify-end gap-1">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            size="icon"
+            variant="outline"
+            onClick={() => navigate(`/admin/events/${event.id}`)}
+            aria-label="جزئیات"
+            title="جزئیات"
+          >
+            <Eye className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>جزئیات</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon" variant="outline" asChild aria-label="ویرایش" title="ویرایش">
+            <Link to={`/admin/events/${event.id}/edit`}>
+              <Edit3 className="h-4 w-4" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>ویرایش</TooltipContent>
+      </Tooltip>
+      <AlertDialog>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <AlertDialogTrigger asChild>
+              <Button
+                size="icon"
+                variant="destructive"
+                disabled={deleteMutation.isPending}
+                aria-label="حذف"
+                title="حذف"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </AlertDialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent>حذف</TooltipContent>
+        </Tooltip>
+        <AlertDialogContent dir="rtl">
+          <AlertDialogHeader className="text-right">
+            <AlertDialogTitle>حذف رویداد</AlertDialogTitle>
+            <AlertDialogDescription>
+              آیا از حذف رویداد «{event.title}» مطمئن هستید؟ این عملیات رویداد را از لیست‌های عادی حذف می‌کند.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="gap-2 sm:justify-start">
+            <AlertDialogCancel>انصراف</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => deleteMutation.mutate(event.id)}
+            >
+              حذف
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-1">
@@ -219,7 +296,7 @@ const AdminEventsPage: React.FC = () => {
                         <th className="px-3 py-2 text-right">تاریخ شروع</th>
                         <th className="px-3 py-2 text-right">ثبت‌نام‌ها</th>
                         <th className="px-3 py-2 text-right">قیمت (تومان)</th>
-                        <th className="px-3 py-2 text-right">عملیات</th>
+                        <th className="px-3 py-2 text-right"></th>
                       </tr>
                     </thead>
                     <tbody>
@@ -244,20 +321,8 @@ const AdminEventsPage: React.FC = () => {
                           <td className="px-3 py-2 text-right">{formatJalali(event.start_time)}</td>
                           <td className="px-3 py-2 text-right">{toPersianDigits(event.registration_count)}</td>
                           <td className="px-3 py-2 text-right">{formatToman(event.price)}</td>
-                          <td className="px-3 py-2 text-left flex items-center gap-1">
+                          <td className="px-3 py-2 text-left">
-                            <Button size="sm" variant="outline" onClick={() => navigate(`/admin/events/${event.id}`)}>
+                            {renderEventActions(event)}
-                              جزئیات
-                            </Button>
-                            <Button size="sm" variant="outline" asChild>
-                              <Link to={`/admin/events/${event.id}/edit`}>ویرایش</Link>
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="destructive"
-                              onClick={() => deleteMutation.mutate(event.id)}
-                            >
-                              حذف
-                            </Button>
                           </td>
                         </tr>
                       ))}
@@ -278,16 +343,8 @@ const AdminEventsPage: React.FC = () => {
                       <div>ثبت‌نام‌ها: {toPersianDigits(event.registration_count)}</div>
                       <div>قیمت: {formatToman(event.price)}</div>
                     </div>
-                    <div className="flex items-center gap-2 justify-end">
+                    <div className="flex justify-end">
-                      <Button size="sm" variant="outline" onClick={() => navigate(`/admin/events/${event.id}`)}>
+                      {renderEventActions(event)}
-                        جزئیات
-                      </Button>
-                      <Button size="sm" variant="outline" asChild>
-                        <Link to={`/admin/events/${event.id}/edit`}>ویرایش</Link>
-                      </Button>
-                      <Button size="sm" variant="destructive" onClick={() => deleteMutation.mutate(event.id)}>
-                        حذف
-                      </Button>
                     </div>
                   </div>
                 ))}