feat: implement OTP sending via Kavenegar VerifyLookup and add image cropping modal

- Added support for sending OTP messages using Kavenegar's VerifyLookup method, ensuring compliance with specified token formatting and template usage.
- Updated OtpService to handle new template parameters and fallback mechanisms.
- Introduced ImageCropModal component for cropping images with a user-friendly interface.
- Created utility function for cropping images and generating downloadable files.

assets/admin/components/ImageCropModal.tsx

@@ -0,0 +1,75 @@
+import { useCallback, useState } from 'react';
+import Cropper, { type Area } from 'react-easy-crop';
+import { getCroppedImage } from '../lib/cropImage';
+
+interface ImageCropModalProps {
+  src: string;
+  fileName: string;
+  onCancel: () => void;
+  onConfirm: (file: File) => void;
+}
+
+export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: ImageCropModalProps) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [area, setArea] = useState<Area | null>(null);
+  const [processing, setProcessing] = useState(false);
+
+  const onCropComplete = useCallback((_: Area, pixels: Area) => setArea(pixels), []);
+
+  const handleConfirm = async () => {
+    if (!area) return;
+    setProcessing(true);
+    try {
+      const file = await getCroppedImage(src, area, fileName);
+      onConfirm(file);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" dir="rtl">
+      <div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-2xl overflow-hidden">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-gray-800">
+          <p className="text-base font-bold text-slate-800 dark:text-slate-100">برش تصویر</p>
+          <button onClick={onCancel}
+            className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 text-xl leading-none">×</button>
+        </div>
+
+        <div className="relative w-full h-72 bg-slate-100 dark:bg-gray-800">
+          <Cropper
+            image={src}
+            crop={crop}
+            zoom={zoom}
+            aspect={1}
+            cropShape="round"
+            showGrid={false}
+            onCropChange={setCrop}
+            onZoomChange={setZoom}
+            onCropComplete={onCropComplete}
+          />
+        </div>
+
+        <div className="px-5 py-4 space-y-4">
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-slate-500 dark:text-slate-400 shrink-0">بزرگ‌نمایی</span>
+            <input type="range" min={1} max={3} step={0.01} value={zoom}
+              onChange={e => setZoom(Number(e.target.value))}
+              className="w-full accent-indigo-600" />
+          </div>
+          <div className="flex items-center justify-end gap-3">
+            <button onClick={onCancel} disabled={processing}
+              className="px-4 py-2 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-gray-800 hover:bg-slate-200 dark:hover:bg-gray-700 disabled:opacity-50">
+              انصراف
+            </button>
+            <button onClick={handleConfirm} disabled={processing || !area}
+              className="px-4 py-2 rounded-xl text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50">
+              {processing ? 'در حال برش...' : 'ذخیره'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

assets/admin/lib/cropImage.ts

@@ -0,0 +1,49 @@
+import type { Area } from 'react-easy-crop';
+
+function createImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', (err) => reject(err));
+    image.setAttribute('crossOrigin', 'anonymous');
+    image.src = url;
+  });
+}
+
+export async function getCroppedImage(
+  src: string,
+  area: Area,
+  fileName: string,
+  outputSize = 512,
+): Promise<File> {
+  const image = await createImage(src);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('عدم دسترسی به canvas');
+
+  canvas.width = outputSize;
+  canvas.height = outputSize;
+
+  ctx.drawImage(
+    image,
+    area.x,
+    area.y,
+    area.width,
+    area.height,
+    0,
+    0,
+    outputSize,
+    outputSize,
+  );
+
+  const blob: Blob = await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (b) => (b ? resolve(b) : reject(new Error('خطا در برش تصویر'))),
+      'image/jpeg',
+      0.92,
+    );
+  });
+
+  const baseName = fileName.replace(/\.[^./\\]+$/, '') || 'avatar';
+  return new File([blob], `${baseName}.jpg`, { type: 'image/jpeg' });
+}

assets/admin/pages/DoctorDetailPage.tsx

@@ -29,6 +29,7 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
 import NotificationMobileCard from '../components/ui/NotificationMobileCard';
 import GlobalSearchableSelect from '../components/ui/SearchableSelect';
 import PersianDatePicker from '../components/ui/PersianDatePicker';
+import ImageCropModal from '../components/ImageCropModal';
 
 // Fix leaflet default marker icons
 delete (L.Icon.Default.prototype as any)._getIconUrl;
@@ -2335,6 +2336,7 @@ export default function DoctorDetailPage({ isOwnProfile = false }: { isOwnProfil
   const [toggleConfirm,    setToggleConfirm]    = useState(false);
   const [menuOpen,         setMenuOpen]         = useState(false);
   const [uploadingImg,     setUploadingImg]     = useState(false);
+  const [cropState,        setCropState]        = useState<{ src: string; name: string } | null>(null);
   const [addrModalOpen,    setAddrModalOpen]    = useState(false);
   const [editingAddr,      setEditingAddr]      = useState<AddressData | null>(null);
   const [deletingAddrId,   setDeletingAddrId]   = useState<string | null>(null);
@@ -2475,6 +2477,17 @@ export default function DoctorDetailPage({ isOwnProfile = false }: { isOwnProfil
 
   // ── Image upload ──
 
+  const openCrop = useCallback((file: File) => {
+    setCropState({ src: URL.createObjectURL(file), name: file.name });
+  }, []);
+
+  const closeCrop = useCallback(() => {
+    setCropState(prev => {
+      if (prev) URL.revokeObjectURL(prev.src);
+      return null;
+    });
+  }, []);
+
   const handleImageUpload = useCallback(async (file: File) => {
     setUploadingImg(true);
     try {
@@ -2567,7 +2580,15 @@ export default function DoctorDetailPage({ isOwnProfile = false }: { isOwnProfil
 
           <div className="flex flex-col items-center gap-1.5">
             <DoctorAvatar name={doctor.name} img={mainImage} idx={idNum}
-              onUpload={primaryRole !== 'clinic' && !isReadOnly ? handleImageUpload : undefined} uploading={uploadingImg} />
+              onUpload={primaryRole !== 'clinic' && !isReadOnly ? openCrop : undefined} uploading={uploadingImg} />
+            {cropState && (
+              <ImageCropModal
+                src={cropState.src}
+                fileName={cropState.name}
+                onCancel={closeCrop}
+                onConfirm={(file) => { closeCrop(); handleImageUpload(file); }}
+              />
+            )}
             {primaryRole !== 'clinic' && !isReadOnly && (
               <span className="text-[10px] text-slate-400 dark:text-slate-500">کلیک برای تغییر عکس</span>
             )}