Merge main_v2 mobile UI into production, restore mobile bottom tab bar

Merges main_v2 a110741 (mobile UI optimizations) into production and
reinstates the mobile bottom navigation that f0e4243 had removed.

Conflicts in DashboardPage, QuoteCard and InventoryPage resolved in
favour of main_v2's mobile-first markup, keeping production's newer
design system (Button variant="primary" on InventoryPage).

f0e4243's removal was reverted in effect: MobileTabBar is restored and
remounted in App.tsx, and PageLayout regains max-md:pb-24 clearance so
content is not hidden behind the fixed bar.

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}
@@ -64,6 +64,6 @@ export function PageLayout({
   className?: string;
 }) {
   return (
-    <div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4", className)}>{children}</div>
+    <div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4 max-md:pb-24", className)}>{children}</div>
   );
-}
+}

frontend/src/components/layout/MobileTabBar.tsx

@@ -0,0 +1,100 @@
+import { NavLink, useLocation } from "react-router-dom";
+import {
+  ArrowLeftRight,
+  Boxes,
+  Building2,
+  CalendarDays,
+  LayoutDashboard,
+  PackageSearch,
+  Scale,
+  Truck,
+  UsersRound,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+import { useAuthStore } from "../../store/auth";
+
+interface TabDef {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+  end?: boolean;
+}
+
+// تب‌های دفتر تدارکات (ادمین / مدیر تدارکات)
+const PROC_TABS: TabDef[] = [
+  { to: "/", label: "داشبورد", icon: LayoutDashboard, end: true },
+  { to: "/suppliers", label: "تأمین‌کننده‌ها", icon: Truck },
+  { to: "/projects", label: "پروژه‌ها", icon: Building2 },
+  { to: "/units", label: "ضرایب", icon: Scale },
+];
+
+// تب‌های پنل انبار برای مدیر پروژه
+const PM_INV_TABS: TabDef[] = [
+  { to: "/inventory", label: "انبار", icon: Boxes, end: true },
+  { to: "/inventory/change", label: "تغییر موجودی", icon: ArrowLeftRight },
+  { to: "/inventory/daily", label: "کنترل روزانه", icon: CalendarDays },
+  { to: "/inventory/arrivals", label: "کالاهای در راه", icon: PackageSearch },
+];
+
+// تب‌های پنل انبار برای ادمین / مدیر تدارکات (آینه‌ی ناوبری بالای دسکتاپ)
+const ADMIN_INV_TABS: TabDef[] = [
+  { to: "/inventory", label: "انبار", icon: Boxes, end: true },
+  { to: "/inventory/daily", label: "کنترل روزانه", icon: CalendarDays },
+  { to: "/inventory/arrivals", label: "کالاهای در راه", icon: PackageSearch },
+  { to: "/inventory/org", label: "سازمان‌دهی", icon: UsersRound },
+];
+
+function TabBar({ tabs }: { tabs: TabDef[] }) {
+  return (
+    <nav
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-line bg-panel md:hidden"
+      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+    >
+      <div className="grid grid-cols-4">
+        {tabs.map((t) => (
+          <NavLink
+            key={t.to}
+            to={t.to}
+            end={t.end}
+            className={({ isActive }) =>
+              cn(
+                "flex min-h-[56px] flex-col items-center justify-center gap-0.5 whitespace-nowrap px-1 text-[10.5px] font-medium transition-colors",
+                isActive ? "text-accent" : "text-muted",
+              )
+            }
+          >
+            <t.icon className="h-5 w-5" strokeWidth={1.8} />
+            <span>{t.label}</span>
+          </NavLink>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+// نوار تب پایینِ موبایل — فقط زیر 768px (md:hidden) و فقط در صفحاتِ نقش کاربر:
+// مدیر پروژه → تب‌های انبار؛ ادمین/مدیر تدارکات → تب‌های دفتر یا انبار (بر اساس مسیر).
+// در ویزارد نمایش داده نمی‌شود تا با جابه‌جایی تصادفی، کارِ کاربر از بین نرود.
+export function MobileTabBar() {
+  const role = useAuthStore((s) => s.user?.role);
+  const { pathname } = useLocation();
+
+  if (pathname === "/login" || pathname === "/admin") return null;
+  const isPM = role === "pm";
+  const isOffice = role === "admin" || role === "procurement_manager";
+
+  if (pathname.startsWith("/inventory")) {
+    if (isPM) return <TabBar tabs={PM_INV_TABS} />;
+    if (isOffice) return <TabBar tabs={ADMIN_INV_TABS} />;
+    return null;
+  }
+  if (pathname === "/wizard") return null;
+  const onOfficePage =
+    pathname === "/" ||
+    pathname === "/projects" ||
+    pathname === "/units" ||
+    pathname.startsWith("/suppliers");
+  if (onOfficePage && isOffice) return <TabBar tabs={PROC_TABS} />;
+  return null;
+}