feat: mobile UI optimizations

frontend/src/components/StatsBar.tsx

@@ -8,31 +8,72 @@ export interface StatsBarProps {
   avgLeadTime: number | null; // روز
 }
 
-// نوار ۴ ستونه‌ی آمار
 export function StatsBar({ total, offered, accepted, avgLeadTime }: StatsBarProps) {
-  const stats: { label: string; value: string; color: string; icon: LucideIcon }[] = [
-    { label: "کل پیشنهادها", value: fmtNum(total), color: "text-ink", icon: ClipboardList },
-    // پیشنهاد باز = نارنجی، پذیرفته‌شده = آبی، رسیده = سبز
-    { label: "پیشنهاد باز", value: fmtNum(offered), color: "text-amber", icon: Inbox },
-    { label: "پذیرفته‌شده", value: fmtNum(accepted), color: "text-[#1d4ed8]", icon: CheckCircle2 },
-    { label: "میانگین lead time (روز)", value: avgLeadTime == null ? "—" : fmtNum(avgLeadTime), color: "text-green", icon: Timer },
+  const stats: {
+    label: string;
+    shortLabel: string;
+    value: string;
+    color: string;
+    icon: LucideIcon;
+  }[] = [
+    {
+      label: "کل پیشنهادها",
+      shortLabel: "کل",
+      value: fmtNum(total),
+      color: "text-ink",
+      icon: ClipboardList,
+    },
+    {
+      label: "پیشنهاد باز",
+      shortLabel: "باز",
+      value: fmtNum(offered),
+      color: "text-amber",
+      icon: Inbox,
+    },
+    {
+      label: "پذیرفته‌شده",
+      shortLabel: "پذیرفته",
+      value: fmtNum(accepted),
+      color: "text-[#1d4ed8]",
+      icon: CheckCircle2,
+    },
+    {
+      label: "میانگین lead time (روز)",
+      shortLabel: "زمان تحویل",
+      value: avgLeadTime == null ? "—" : fmtNum(avgLeadTime),
+      color: "text-green",
+      icon: Timer,
+    },
   ];
+
   return (
-    <section className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+    <section className="grid grid-cols-4 gap-1.5 sm:gap-3">
       {stats.map((s) => (
         <div
           key={s.label}
-          className="rounded-lg border border-line bg-panel p-3.5 transition-colors hover:border-accent/40"
+          className="rounded-xl border border-line bg-panel p-2 text-center transition-colors hover:border-accent/40 sm:rounded-lg sm:p-3.5 sm:text-right"
         >
-          <div className="flex items-center justify-between">
-            <div className="text-[11px] font-medium text-muted">{s.label}</div>
-            <span className="flex h-6 w-6 items-center justify-center rounded-md bg-slate-bg text-muted">
+          {/* عنوان کارت */}
+          <div className="flex items-center justify-center sm:justify-between">
+            <span className="truncate text-[10px] font-medium text-muted sm:text-[11px]">
+              <span className="sm:hidden">{s.shortLabel}</span>
+              <span className="hidden sm:inline">{s.label}</span>
+            </span>
+
+            {/* آیکون در موبایل حذف شده تا فضا برای متن باز بماند */}
+            <span className="hidden h-6 w-6 shrink-0 items-center justify-center rounded-md bg-slate-bg text-muted sm:flex">
               <s.icon className="h-3.5 w-3.5" strokeWidth={2} />
             </span>
           </div>
-          <div className={`mt-1 text-[22px] font-extrabold leading-8 tabular-nums ${s.color}`}>{s.value}</div>
+
+          {/* مقدار عددی */}
+          <div
+            className={`mt-0.5 text-base font-extrabold leading-5 tabular-nums sm:mt-1 sm:text-[22px] sm:leading-8 ${s.color}`}
+          >
+            {s.value}
+          </div>
         </div>
       ))}
     </section>
   );
-}
+}

frontend/src/components/layout/Header.tsx

@@ -38,7 +38,7 @@ export function Header({ title, sub, backTo, backLabel = "بازگشت", actions
         <button
           type="button"
           onClick={goBack}
-          className="inline-flex cursor-pointer items-center gap-0.5 rounded-md px-2 py-1 text-[13px] text-muted transition-colors hover:bg-slate-bg hover:text-ink max-md:px-2.5 max-md:py-2"
+          className="hidden md:inline-flex cursor-pointer items-center gap-0.5 rounded-md px-2 py-1 text-[13px] text-muted transition-colors hover:bg-slate-bg hover:text-ink"
         >
           <ChevronRight className="h-4 w-4" />
           {backLabel}
@@ -66,4 +66,4 @@ export function PageLayout({
   return (
     <div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4 max-md:pb-24", className)}>{children}</div>
   );
-}
+}