feat(ui): confirm destructive admin actions

src/components/ConfirmAction.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+type ConfirmActionProps = {
+  trigger: ReactNode;
+  title: string;
+  description: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => unknown | Promise<unknown>;
+  disabled?: boolean;
+};
+
+export default function ConfirmAction({
+  trigger,
+  title,
+  description,
+  confirmLabel = "حذف",
+  cancelLabel = "انصراف",
+  onConfirm,
+  disabled = false,
+}: ConfirmActionProps) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        {trigger}
+      </AlertDialogTrigger>
+      <AlertDialogContent dir="rtl">
+        <AlertDialogHeader className="text-right">
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription className="leading-7">{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="gap-2 sm:justify-start">
+          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            disabled={disabled}
+            onClick={() => void onConfirm()}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/NotificationsBell.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Bell, CheckCheck, Loader2, Trash2 } from "lucide-react";
+import ConfirmAction from "@/components/ConfirmAction";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -33,15 +34,21 @@ function NotificationItem({
       )}
     >
       <div className="flex items-start justify-between gap-3">
-        <Button
-          type="button"
-          size="icon"
-          variant="ghost"
-          className="h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:text-destructive"
-          onClick={() => void onDelete(notification)}
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
+        <ConfirmAction
+          title="حذف اعلان"
+          description="آیا از حذف این اعلان مطمئن هستید؟"
+          onConfirm={() => onDelete(notification)}
+          trigger={
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              className="h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:text-destructive"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          }
+        />
         <button
           type="button"
           onClick={() => void onOpen(notification)}