From f0e424316ef5ea3b3d7da216ab7efb3587388d1f Mon Sep 17 00:00:00 2001
From: "reza.g" <rezagoli.1385@gmail.com>
Date: Tue, 8 Sep 2026 16:03:56 +0330
Subject: [PATCH] fix(web): remove the mobile bottom navigation bar

The fixed bottom tab bar (MobileTabBar) was rendered app-wide on
screens <768px, duplicating navigation that already exists in the
header/hamburger menus.

- unmount <MobileTabBar /> in App.tsx and drop its import
- delete components/layout/MobileTabBar.tsx (no remaining references)
- drop the max-md:pb-24 clearance in PageLayout (Header.tsx) that only
  existed to keep page content above the removed fixed bar

Desktop and header-menu navigation are unaffected; mobile pages keep a
full-height viewport without dead bottom padding.
---
 frontend/src/App.tsx                          |   2 -
 frontend/src/components/layout/Header.tsx     |   2 +-
 .../src/components/layout/MobileTabBar.tsx    | 100 ------------------
 3 files changed, 1 insertion(+), 103 deletions(-)
 delete mode 100644 frontend/src/components/layout/MobileTabBar.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3cace90..36381ee 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,6 @@
 import { lazy, Suspense } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { useAuthStore } from "./store/auth";
-import { MobileTabBar } from "./components/layout/MobileTabBar";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 
 // هر صفحه با React.lazy لود می‌شود (code splitting)
@@ -197,7 +196,6 @@ export default function App() {
         <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </Suspense>
-      <MobileTabBar />
     </ErrorBoundary>
   );
 }
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 29a467e..c91b016 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -64,6 +64,6 @@ export function PageLayout({
   className?: string;
 }) {
   return (
-    <div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4 max-md:pb-24", className)}>{children}</div>
+    <div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4", className)}>{children}</div>
   );
 }
diff --git a/frontend/src/components/layout/MobileTabBar.tsx b/frontend/src/components/layout/MobileTabBar.tsx
deleted file mode 100644
index b5fcecf..0000000
--- a/frontend/src/components/layout/MobileTabBar.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-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;
-}