feat: improve line items layout, number inputs and supplier click-to-call

frontend/src/pages/Suppliers/SupplierDetailPage.tsx

@@ -15,6 +15,15 @@ import { ConfirmDeleteDialog } from "../../components/ConfirmDeleteDialog";
 import { normalize } from "../../lib/normalize";
 import { PurchaseHistory } from "./PurchaseHistory";
 
+// تمیزکاری و استانداردسازی شماره برای شماره‌گیر خودکار موبایل (اندروید و iOS)
+function cleanPhoneForTel(phone?: string | null): string {
+  if (!phone) return "";
+  const enDigits = phone
+    .replace(/[۰-۹]/g, (d) => String("۰۱۲۳۴۵۶۷۸۹".indexOf(d)))
+    .replace(/[٠-٩]/g, (d) => String("٠١٢٣٤٥٦٧٨٩".indexOf(d)));
+  return enDigits.replace(/(?!^\+)[^\d]/g, "");
+}
+
 // صفحه‌ی مشخصات کامل تأمین‌کننده + سابقه خرید + مدیریت متریال‌های تأمین‌شده
 export function SupplierDetailPage() {
   useStoreData();
@@ -82,7 +91,6 @@ export function SupplierDetailPage() {
   const breadcrumb = `${topicName ? topicName + " — " : ""}${firstCat ? firstCat + " — " : ""}${s.name}`;
 
   const saveCategories = (names: string[]) => {
-    // v2.6: اتصال واقعی تأمین‌کننده ↔ متریال (کاتالوگ) — با نام متریال
     if (!id || busy) return;
     setBusy(true);
     void (async () => {
@@ -143,13 +151,29 @@ export function SupplierDetailPage() {
             )}
           </div>
 
-          <div className="mt-3 flex flex-col gap-1.5 text-[13.5px]">
+          <div className="mt-3 flex flex-col gap-2 text-[13.5px]">
             <span>
               <MapPin className="me-1.5 inline h-4 w-4 text-muted" /> <b>موقعیت:</b> {s.location || "—"}
             </span>
-            <span>
-              <Phone className="me-1.5 inline h-4 w-4 text-muted" /> <b>تلفن:</b> {s.phone || "—"}
-            </span>
+
+            {/* بخش تلفن — همراه با قابلیت تماس مستقیم با یک لمس */}
+            <div className="flex items-center">
+              <Phone className="me-1.5 inline h-4 w-4 text-muted" />
+              <b className="me-1">تلفن:</b>
+              {s.phone ? (
+                <a
+                  href={`tel:${cleanPhoneForTel(s.phone)}`}
+                  className="inline-flex items-center gap-1 font-semibold text-accent hover:underline active:opacity-80"
+                  dir="ltr"
+                  title="تماس مستقیم با تأمین‌کننده"
+                >
+                  <span className="tabular-nums">{s.phone}</span>
+                </a>
+              ) : (
+                <span className="text-muted">—</span>
+              )}
+            </div>
+
             <span>
               <User className="me-1.5 inline h-4 w-4 text-muted" /> <b>شخص رابط:</b> {s.contact || "—"}
             </span>
@@ -179,7 +203,7 @@ export function SupplierDetailPage() {
           </div>
         </div>
 
-        {/* متریال‌های این تأمین‌کننده — افزودن/حذف + مشاهده‌ی همه */}
+        {/* متریال‌های این تأمین‌کننده */}
         <div className="mt-4 max-w-xl rounded-xl border border-line bg-panel p-5 shadow-sm">
           <h4 className="mb-1 text-[13.5px] font-bold">
             <Package className="me-1 inline h-4 w-4 text-accent" /> متریال‌های تأمین‌شده
@@ -219,7 +243,7 @@ export function SupplierDetailPage() {
           )}
         </div>
 
-        {/* سابقه خرید از این تأمین‌کننده — همه‌ی پیشنهادها + فاکتور/پیش‌فاکتور */}
+        {/* سابقه خرید از این تأمین‌کننده */}
         <div className="mt-4 max-w-4xl">
           <PurchaseHistory supplier={s} quotes={quotes} materials={materials} />
         </div>