feat: polish admin UI, phone login, and product details

Switch admin auth to mobile, restyle shell/login with Vuesax icons, and add product detail fields plus public product pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin/src/layouts/AdminLayout.vue

@@ -1,20 +1,8 @@
 <script setup lang="ts">
-import {
-  AppstoreOutlined,
-  DashboardOutlined,
-  ExportOutlined,
-  FileImageOutlined,
-  LayoutOutlined,
-  LogoutOutlined,
-  MailOutlined,
-  MenuOutlined,
-  ShoppingOutlined,
-  TeamOutlined,
-  UserOutlined,
-} from "@ant-design/icons-vue";
 import { ROLE_LABELS } from "@imen/shared";
 import { computed, h, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import VuesaxIcon from "@/components/VuesaxIcon.vue";
 import { useAuthStore } from "@/stores/auth";
 import { SITE_URL } from "@/utils/format";
 
@@ -23,14 +11,18 @@ const route = useRoute();
 const router = useRouter();
 const drawer = ref(false);
 
+/** Icon badge box + Vuesax glyph (keeps pre-swap menu structure) */
+const menuIcon = (name: string) => () =>
+  h("span", { class: "admin-menu__icon" }, [h(VuesaxIcon, { name, size: 16 })]);
+
 const items = computed(() => [
-  { key: "dashboard", icon: () => h(DashboardOutlined), label: "داشبورد" },
-  { key: "products", icon: () => h(ShoppingOutlined), label: "محصولات" },
-  { key: "categories", icon: () => h(AppstoreOutlined), label: "دسته‌بندی‌ها" },
-  { key: "sections", icon: () => h(LayoutOutlined), label: "بخش‌های سایت" },
-  { key: "messages", icon: () => h(MailOutlined), label: "پیام‌های تماس" },
-  { key: "media", icon: () => h(FileImageOutlined), label: "کتابخانه رسانه" },
-  ...(auth.isAdmin ? [{ key: "users", icon: () => h(TeamOutlined), label: "کاربران" }] : []),
+  { key: "dashboard", icon: menuIcon("element-3"), label: "داشبورد" },
+  { key: "products", icon: menuIcon("bag-2"), label: "محصولات" },
+  { key: "categories", icon: menuIcon("category"), label: "دسته‌بندی‌ها" },
+  { key: "sections", icon: menuIcon("row-vertical"), label: "بخش‌های سایت" },
+  { key: "messages", icon: menuIcon("sms"), label: "پیام‌های تماس" },
+  { key: "media", icon: menuIcon("gallery"), label: "کتابخانه رسانه" },
+  ...(auth.isAdmin ? [{ key: "users", icon: menuIcon("profile-2user"), label: "کاربران" }] : []),
 ]);
 
 /** menu entry to highlight for nested pages (products/12 → products) */
@@ -41,11 +33,31 @@ const MENU_OF: Record<string, string> = {
   "category-edit": "categories",
   "section-edit": "sections",
 };
+
+const PAGE_TITLES: Record<string, string> = {
+  dashboard: "داشبورد",
+  products: "محصولات",
+  "product-new": "محصول جدید",
+  "product-edit": "ویرایش محصول",
+  categories: "دسته‌بندی‌ها",
+  "category-new": "دسته‌بندی جدید",
+  "category-edit": "ویرایش دسته‌بندی",
+  sections: "بخش‌های سایت",
+  "section-edit": "ویرایش بخش",
+  messages: "پیام‌های تماس",
+  media: "کتابخانه رسانه",
+  users: "کاربران",
+  profile: "حساب کاربری",
+};
+
 const selected = computed(() => {
   const name = String(route.name ?? "");
   return [MENU_OF[name] ?? name];
 });
 
+const pageTitle = computed(() => PAGE_TITLES[String(route.name ?? "")] ?? "پنل مدیریت");
+const userInitial = computed(() => (auth.user?.name?.trim().charAt(0) || "ک").slice(0, 1));
+
 const go = ({ key }: { key: string | number }) => {
   drawer.value = false;
   void router.push({ name: String(key) });
@@ -55,78 +67,515 @@ watch(() => route.fullPath, () => (drawer.value = false));
 </script>
 
 <template>
-  <a-layout class="min-h-screen">
+  <a-layout class="admin-shell">
     <a-layout-sider
-      :width="232"
+      :width="248"
       breakpoint="lg"
       collapsed-width="0"
       :trigger="null"
-      class="!hidden lg:!block"
-      style="background: #0b1224"
+      class="admin-sider !hidden lg:!block"
     >
-      <div class="flex items-center gap-3 px-5 py-5">
-        <img src="/favicon.svg" alt="" class="size-8" />
-        <div class="leading-tight text-white">
-          <div class="font-bold">ایمن پیشگامان</div>
-          <div class="text-[11px] text-white/50">پنل مدیریت</div>
+      <div class="admin-sider__brand">
+        <span class="admin-sider__logo">
+          <img src="/logo.png" alt="" class="size-7 object-contain" />
+        </span>
+        <div class="leading-tight">
+          <div class="text-[14px] font-bold text-[#0f172a]">ایمن پیشگامان</div>
+          <div class="text-[10px] font-medium tracking-wide text-[#94a3b8]">پنل مدیریت</div>
         </div>
       </div>
-      <a-menu
-        theme="dark"
-        mode="inline"
-        :selected-keys="selected"
-        :items="items"
-        style="background: transparent; border: 0"
-        @click="go"
-      />
+
+      <div class="admin-sider__nav">
+        <div class="admin-sider__label">منوی اصلی</div>
+        <a-menu
+          class="admin-menu"
+          mode="inline"
+          :selected-keys="selected"
+          :items="items"
+          @click="go"
+        />
+      </div>
     </a-layout-sider>
 
-    <a-drawer v-model:open="drawer" placement="right" :width="260" :body-style="{ padding: 0, background: '#0b1224' }" :closable="false">
-      <a-menu theme="dark" mode="inline" :selected-keys="selected" :items="items" style="background: transparent; border: 0" @click="go" />
+    <a-drawer
+      v-model:open="drawer"
+      placement="right"
+      :width="280"
+      :closable="false"
+      class="admin-drawer"
+      :body-style="{ padding: 0, background: '#ffffff' }"
+    >
+      <div class="admin-sider__brand">
+        <span class="admin-sider__logo">
+          <img src="/logo.png" alt="" class="size-7 object-contain" />
+        </span>
+        <div class="leading-tight">
+          <div class="text-[14px] font-bold text-[#0f172a]">ایمن پیشگامان</div>
+          <div class="text-[10px] font-medium text-[#94a3b8]">پنل مدیریت</div>
+        </div>
+      </div>
+      <div class="admin-sider__nav">
+        <div class="admin-sider__label">منوی اصلی</div>
+        <a-menu
+          class="admin-menu"
+          mode="inline"
+          :selected-keys="selected"
+          :items="items"
+          @click="go"
+        />
+      </div>
     </a-drawer>
 
     <a-layout>
-      <a-layout-header
-        class="flex items-center justify-between gap-4 border-b border-gray-200 !bg-white !px-4 md:!px-6"
-        style="height: 60px; line-height: 60px"
-      >
-        <div class="flex items-center gap-3">
-          <a-button class="lg:!hidden" @click="drawer = true">
-            <template #icon><MenuOutlined /></template>
+      <a-layout-header class="admin-header">
+        <div class="admin-header__start">
+          <a-button class="admin-header__menu-btn lg:!hidden" @click="drawer = true">
+            <template #icon><VuesaxIcon name="menu" :size="18" /></template>
           </a-button>
-          <a :href="SITE_URL" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-[#ff5a00]">
-            <ExportOutlined />
-            مشاهده سایت
-          </a>
+
+          <div class="admin-header__crumb">
+            <span class="admin-header__crumb-kicker">پنل مدیریت</span>
+            <span class="admin-header__crumb-sep" aria-hidden="true">/</span>
+            <span class="admin-header__crumb-page">{{ pageTitle }}</span>
+          </div>
         </div>
 
-        <a-dropdown placement="bottomLeft">
-          <a-button type="text" class="flex items-center gap-2">
-            <UserOutlined />
-            <span>{{ auth.user?.name }}</span>
-            <a-tag v-if="auth.user" class="!m-0" :color="auth.isAdmin ? 'orange' : 'blue'">
-              {{ ROLE_LABELS[auth.user.role] }}
-            </a-tag>
-          </a-button>
-          <template #overlay>
-            <a-menu>
-              <a-menu-item key="profile" @click="router.push({ name: 'profile' })">
-                <UserOutlined /> حساب کاربری
-              </a-menu-item>
-              <a-menu-item key="logout" danger @click="auth.logout()">
-                <LogoutOutlined /> خروج
-              </a-menu-item>
-            </a-menu>
-          </template>
-        </a-dropdown>
+        <div class="admin-header__end">
+          <a
+            :href="SITE_URL"
+            target="_blank"
+            rel="noopener"
+            class="admin-header__site"
+          >
+            <VuesaxIcon name="export" :size="16" />
+            <span>مشاهده سایت</span>
+          </a>
+
+          <div class="admin-header__divider" aria-hidden="true" />
+
+          <a-dropdown placement="bottomLeft" :trigger="['click']">
+            <button type="button" class="admin-header__user">
+              <span class="admin-header__avatar">{{ userInitial }}</span>
+              <span class="admin-header__user-meta">
+                <span class="admin-header__user-name">{{ auth.user?.name }}</span>
+                <span v-if="auth.user" class="admin-header__user-role">
+                  {{ ROLE_LABELS[auth.user.role] }}
+                </span>
+              </span>
+              <VuesaxIcon name="arrow-down" :size="12" class="admin-header__chevron" />
+            </button>
+            <template #overlay>
+              <a-menu class="admin-header__dropdown">
+                <a-menu-item key="profile" @click="router.push({ name: 'profile' })">
+                  <VuesaxIcon name="user" :size="16" /> حساب کاربری
+                </a-menu-item>
+                <a-menu-divider />
+                <a-menu-item key="logout" danger @click="auth.logout()">
+                  <VuesaxIcon name="logout" :size="16" /> خروج
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </div>
       </a-layout-header>
 
-      <a-layout-content class="p-4 md:p-6">
-        <!-- keyed by path (not query) so /sections/hero → /sections/about gets a fresh page -->
-        <RouterView v-slot="{ Component, route: r }">
-          <component :is="Component" :key="r.path" />
-        </RouterView>
+      <a-layout-content class="admin-content">
+        <div class="admin-page">
+          <RouterView v-slot="{ Component, route: r }">
+            <component :is="Component" :key="r.path" />
+          </RouterView>
+        </div>
       </a-layout-content>
     </a-layout>
   </a-layout>
 </template>
+
+<style scoped>
+.admin-shell {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.admin-shell > :deep(.ant-layout) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.admin-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  height: 64px !important;
+  line-height: 1.3 !important;
+  padding-inline: 16px 20px !important;
+  background: rgba(255, 255, 255, 0.96) !important;
+  border-bottom: 1px solid #e8ecf2;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
+}
+
+.admin-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px;
+  background: #f5f6fa;
+  box-sizing: border-box;
+}
+
+/* White panel locked to remaining viewport; pages manage their own inner scroll */
+.admin-page {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background: #ffffff;
+  border: 1px solid #e8ecf2;
+  border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+}
+
+.admin-page > :deep(*) {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Pages that don't use AdminPage still scroll inside the panel */
+.admin-page > :deep(*:not(.ap)) {
+  overflow: auto;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+@media (min-width: 768px) {
+  .admin-header {
+    padding-inline: 24px !important;
+  }
+}
+
+.admin-header__start,
+.admin-header__end {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.admin-header__menu-btn {
+  border-radius: 10px !important;
+  border-color: #e2e8f0 !important;
+  color: #475569 !important;
+}
+
+.admin-header__crumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.admin-header__crumb-kicker {
+  display: none;
+  font-size: 12px;
+  font-weight: 500;
+  color: #94a3b8;
+}
+
+@media (min-width: 640px) {
+  .admin-header__crumb-kicker {
+    display: inline;
+  }
+}
+
+.admin-header__crumb-sep {
+  display: none;
+  color: #cbd5e1;
+}
+
+@media (min-width: 640px) {
+  .admin-header__crumb-sep {
+    display: inline;
+  }
+}
+
+.admin-header__crumb-page {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.admin-header__site {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding-inline: 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  transition:
+    color 0.18s ease,
+    border-color 0.18s ease,
+    background 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.admin-header__site:hover {
+  color: #e04f00;
+  border-color: #ffd0b5;
+  background: #fff7f2;
+  box-shadow: 0 2px 8px rgba(255, 90, 0, 0.08);
+}
+
+.admin-header__divider {
+  width: 1px;
+  height: 28px;
+  background: #e8ecf2;
+}
+
+.admin-header__user {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 260px;
+  height: 44px;
+  padding-block: 4px;
+  padding-inline: 4px 10px;
+  border: 1px solid #e8ecf2;
+  border-radius: 999px;
+  background: #f8fafc;
+  color: inherit;
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    background 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.admin-header__user:hover {
+  background: #ffffff;
+  border-color: #ffd0b5;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
+}
+
+.admin-header__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #ff5a00, #ff8a3d);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 700;
+  box-shadow: 0 2px 8px rgba(255, 90, 0, 0.28);
+}
+
+.admin-header__user-meta {
+  display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  line-height: 1.25;
+}
+
+@media (min-width: 640px) {
+  .admin-header__user-meta {
+    display: flex;
+  }
+}
+
+.admin-header__user-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 140px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.admin-header__user-role {
+  font-size: 11px;
+  font-weight: 500;
+  color: #94a3b8;
+}
+
+.admin-header__chevron {
+  font-size: 10px;
+  color: #94a3b8;
+}
+
+.admin-sider {
+  height: 100vh !important;
+  height: 100dvh !important;
+  max-height: 100vh !important;
+  max-height: 100dvh !important;
+  position: sticky !important;
+  top: 0;
+  background: #ffffff !important;
+  /* content-facing edge (left in RTL) — continuous vertical rail */
+  border-inline-end: 1px solid #e8ecf2;
+  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.04);
+}
+
+.admin-sider :deep(.ant-layout-sider-children) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.admin-sider__brand {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 10px;
+  height: 64px;
+  padding: 0 16px;
+  border-bottom: 1px solid #eef1f6;
+  box-sizing: border-box;
+}
+
+.admin-sider__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: #fff7f2;
+  border: 1px solid #ffe0cc;
+  box-shadow: 0 1px 2px rgba(255, 90, 0, 0.06);
+}
+
+.admin-sider__nav {
+  flex: 1;
+  min-height: 0;
+  height: calc(100vh - 64px);
+  height: calc(100dvh - 64px);
+  padding: 16px 12px 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.admin-sider__label {
+  margin: 0 8px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+}
+
+.admin-menu {
+  background: transparent !important;
+  border: 0 !important;
+}
+
+.admin-menu :deep(.ant-menu-item) {
+  display: flex;
+  align-items: center;
+  height: 44px !important;
+  margin: 0 0 6px !important;
+  padding-inline: 12px !important;
+  border: 1px solid transparent !important;
+  border-radius: 12px !important;
+  color: #475569 !important;
+  font-weight: 500;
+  line-height: 44px !important;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.admin-menu :deep(.ant-menu-item-icon),
+.admin-menu :deep(.ant-menu-item .anticon) {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  width: auto !important;
+  height: auto !important;
+  margin-inline-end: 0 !important;
+  font-size: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.admin-menu :deep(.admin-menu__icon) {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  margin-inline-end: 10px;
+  border-radius: 9px;
+  background: #f1f5f9;
+  color: #64748b;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.admin-menu :deep(.admin-menu__icon .vx-icon) {
+  width: 16px !important;
+  height: 16px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: inherit;
+}
+
+.admin-menu :deep(.ant-menu-item:hover) {
+  background: #f8fafc !important;
+  color: #0f172a !important;
+  border-color: #eef1f6 !important;
+}
+
+.admin-menu :deep(.ant-menu-item:hover .admin-menu__icon) {
+  background: #e8eef7;
+  color: #475569;
+}
+
+.admin-menu :deep(.ant-menu-item-selected) {
+  background: #fff7f2 !important;
+  border-color: #ffd7bf !important;
+  color: #c2410c !important;
+  font-weight: 700;
+  box-shadow: 0 4px 14px rgba(255, 90, 0, 0.1);
+}
+
+.admin-menu :deep(.ant-menu-item-selected .admin-menu__icon) {
+  background: #ff5a00 !important;
+  color: #ffffff !important;
+  box-shadow: 0 4px 10px rgba(255, 90, 0, 0.32);
+}
+
+.admin-menu :deep(.ant-menu-item-selected::after) {
+  display: none !important;
+}
+</style>