Route shop browse through categories and catalogs, and align product detail with the mockup.

Customers can add items without a company-first path, and the detail page matches the card, badge, share, and footer layout.

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

src/components/icons/IconShare.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number
+    color?: string
+  }>(),
+  { size: 20, color: '#9AA3AF' },
+)
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M12 3.5v11"
+      :stroke="color"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M8.25 7 12 3.25 15.75 7"
+      :stroke="color"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.5 11.5v7.25c0 .97.78 1.75 1.75 1.75h7.5c.97 0 1.75-.78 1.75-1.75V11.5"
+      :stroke="color"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

src/components/layout/BottomNav.vue

@@ -14,9 +14,9 @@ function navigate(path: string, event: Event) {
   const target = event.currentTarget
   if (target instanceof HTMLElement) target.blur()
 
-  // «ثبت سفارش»: سبد خالی → انتخاب شرکت؛ در غیر این صورت سبد خرید
+  // «ثبت سفارش»: سبد خالی → دسته‌بندی‌ها؛ در غیر این صورت سبد خرید
   if (path === '/cart' && cartStore.itemCount === 0) {
-    router.push('/companies')
+    router.push('/categories')
     return
   }
   router.push(path)

src/composables/useCartPage.ts

@@ -74,12 +74,7 @@ export function useCartPage() {
   async function createNewInvoice() {
     await cartStore.createNewCartForSameCompany()
     showFullDialog.value = false
-    const companyId = cartStore.selectedCompanyId || cartStore.activeCart?.companyId
+    router.push('/categories')
-    if (companyId) {
-      router.push(`/companies/${companyId}/catalogs`)
-    } else {
-      router.push('/companies')
-    }
   }
 
   onMounted(() => {

src/router/index.ts

@@ -121,8 +121,13 @@ const router = createRouter({
     {
       path: '/companies/:companyId/catalogs/:catalogId/products',
       name: 'company-products',
-      component: () => import('@/views/products/ProductListView.vue'),
+      redirect: (to) => ({
-      meta: { requiresAuth: true },
+        path: '/products',
+        query: {
+          catalogId: String(to.params.catalogId ?? ''),
+          companyId: String(to.params.companyId ?? ''),
+        },
+      }),
     },
     {
       path: '/cart',

src/services/agentApi.ts

@@ -25,6 +25,7 @@ export type BrowseProductDto = {
   companyId?: string
   catalogId?: string
   catalogCode?: string
+  catalogName?: string
   color?: string
   minMeterage?: number
   orderMultiplier?: number
@@ -80,12 +81,16 @@ export async function fetchCatalogCategories() {
 export async function fetchBrowseProducts(query?: {
   categoryId?: string
   season?: string
+  catalogId?: string
+  companyId?: string
 }) {
   return apiRequest<BrowseProductDto[]>('/products', {
     query: {
       activeOnly: true,
       categoryId: query?.categoryId,
       season: query?.season,
+      catalogId: query?.catalogId,
+      companyId: query?.companyId,
     },
   })
 }

src/stores/cart.ts

@@ -231,14 +231,15 @@ export const useCartStore = defineStore('cart', () => {
     catalogCode: string,
     meterage: number,
   ): Promise<{ success: boolean; message?: string }> {
-    const company = catalogStore.getCompany(product.companyId)
+    if (!catalogStore.companies.length) {
-    if (!company) {
+      await catalogStore.loadCompanies()
-      return { success: false, message: 'شرکت محصول یافت نشد.' }
     }
-
+    const company = catalogStore.getCompany(product.companyId)
-    const cart = getOrCreateCart(company)
+    const cart = activeCart.value ?? emptyCart()
-    const companyMax = company.maxMeteragePerInvoice
+    const companyMax = company?.maxMeteragePerInvoice ?? DEFAULT_MAX_METERAGE
-    const currentCompanyMeterage = companyMeterage(cart, company.id)
+    const currentCompanyMeterage = product.companyId
+      ? companyMeterage(cart, product.companyId)
+      : 0
     const existing = cart.items.find((i) => i.productId === product.id)
     const previousMeterage = existing?.meterage ?? 0
 
@@ -254,6 +255,9 @@ export const useCartStore = defineStore('cart', () => {
     }
 
     if (useLocalCart()) {
+      if (!company) {
+        return { success: false, message: 'شرکت محصول یافت نشد.' }
+      }
       return addItemLocal(product, catalogCode, meterage, company)
     }
 
@@ -271,7 +275,7 @@ export const useCartStore = defineStore('cart', () => {
         })
       }
       applyServerCart(serverCart)
-      selectedCompanyId.value = company.id
+      selectedCompanyId.value = company?.id || product.companyId || selectedCompanyId.value
       return { success: true }
     } catch (e) {
       return {

src/stores/crm.ts

@@ -25,6 +25,7 @@ function mapProduct(p: {
   companyId?: string
   catalogId?: string
   catalogCode?: string
+  catalogName?: string
   color?: string
   minMeterage?: number
   orderMultiplier?: number
@@ -63,6 +64,7 @@ function mapProduct(p: {
     companyId: p.companyId,
     catalogId: p.catalogId,
     catalogCode: p.catalogCode,
+    catalogName: p.catalogName,
     color: p.color,
     minMeterage: p.minMeterage ?? 30,
     orderMultiplier: p.orderMultiplier ?? 10,
@@ -87,7 +89,12 @@ export const useCrmStore = defineStore('crm', () => {
     return data
   }
 
-  async function loadBrowseProducts(query?: { categoryId?: string; season?: string }) {
+  async function loadBrowseProducts(query?: {
+    categoryId?: string
+    season?: string
+    catalogId?: string
+    companyId?: string
+  }) {
     const list = await fetchBrowseProducts(query)
     browseProducts.value = list.map(mapProduct)
     return browseProducts.value
@@ -101,6 +108,7 @@ export const useCrmStore = defineStore('crm', () => {
       companyId?: string
       catalogId?: string
       catalogCode?: string
+      catalogName?: string
       color?: string
       minMeterage?: number
       orderMultiplier?: number

src/types/crm.ts

@@ -92,6 +92,7 @@ export interface CatalogProductCard {
   companyId?: string
   catalogId?: string
   catalogCode?: string
+  catalogName?: string
   color?: string
   minMeterage?: number
   orderMultiplier?: number

src/utils/navigation.ts

@@ -34,9 +34,10 @@ export const DESKTOP_NAV_ITEMS: NavItem[] = [
   { name: 'profile', path: '/profile', label: 'پروفایل', icon: IconProfile },
 ]
 
-export function getOrderingPath(activeCompanyId: string | null | undefined): string {
+export const SHOP_BROWSE_PATH = '/categories'
-  if (activeCompanyId) return `/companies/${activeCompanyId}/catalogs`
+
-  return '/companies'
+export function getOrderingPath(_activeCompanyId?: string | null): string {
+  return SHOP_BROWSE_PATH
 }
 
 const CATALOG_PATHS = [
@@ -51,7 +52,12 @@ const CATALOG_PATHS = [
 
 export function isNavItemActive(name: string, path: string, currentPath: string): boolean {
   if (name === 'ordering') {
-    return currentPath.startsWith('/companies/')
+    return (
+      currentPath.startsWith('/categories') ||
+      currentPath.startsWith('/products') ||
+      currentPath.startsWith('/product') ||
+      currentPath.startsWith('/catalogs')
+    )
   }
   if (name === 'home') {
     return currentPath === '/'

src/views/OrdersView.vue

@@ -88,7 +88,7 @@ const desktopFilterTabs: { id: DesktopOrderFilterId; label: string }[] = [
       @set-desktop-filter="setDesktopFilter"
       @select="goToOrder"
       @set-page="setPage"
-      @new-order="router.push('/companies')"
+      @new-order="router.push('/categories')"
     />
   </div>
 </template>

src/views/auth/LoginView.vue

@@ -77,7 +77,6 @@ async function submit() {
 
     <div class="page__scroll flex flex-col justify-center py-6">
       <div class="auth-header">
-        <div class="text-5xl mb-3">🧵</div>
         <h1 class="page-title">ورود به سامانه</h1>
         <p class="page-subtitle">سامانه سفارش عمده پارچه</p>
       </div>

src/views/cart/CartView.vue

@@ -24,12 +24,7 @@ const {
 } = useCartPage()
 
 function goToOrdering() {
-  const companyId = cartStore.selectedCompanyId || cartStore.activeCart?.companyId
+  router.push('/categories')
-  if (companyId) {
-    router.push(`/companies/${companyId}/catalogs`)
-    return
-  }
-  router.push('/companies')
 }
 </script>
 
@@ -50,7 +45,7 @@ function goToOrdering() {
       @back="router.push('/')"
       @remove="removeItem"
       @checkout="proceedToCheckout"
-      @select-company="router.push('/companies')"
+      @select-company="goToOrdering()"
     />
 
     <DesktopCartPage
@@ -65,7 +60,7 @@ function goToOrdering() {
       :submitting="submitting"
       @remove="removeItem"
       @checkout="proceedToCheckout"
-      @select-company="router.push('/companies')"
+      @select-company="goToOrdering()"
       @back="goToOrdering"
     />
 

src/views/cart/components/DesktopCartPage.vue

@@ -88,13 +88,12 @@ const quickLinks = [
           </div>
           <h2 class="cart-empty-card__heading">سبد خرید شما خالی است</h2>
           <p class="cart-empty-card__text">
-            برای ثبت سفارش جدید، ابتدا شرکت موردنظر را انتخاب کنید و سپس کالیته و محصولات
+            از دسته‌بندی یا کالیته محصول را انتخاب کنید، جزئیات را ببینید و به سبد اضافه کنید.
-            را به سبد اضافه کنید.
           </p>
           <div class="cart-empty-card__actions">
             <button type="button" class="cart-btn cart-btn--primary" @click="emit('selectCompany')">
               <IconBuilding :size="18" />
-              انتخاب شرکت
+              مشاهده محصولات
             </button>
             <button type="button" class="cart-btn cart-btn--outline" @click="emit('back')">
               <IconChevronLeft :size="16" />

src/views/cart/components/MobileCartPage.vue

@@ -106,8 +106,8 @@ const emit = defineEmits<{
       </div>
     </div>
 
-    <EmptyState v-else variant="cart" message="برای شروع سفارش، یک شرکت انتخاب کنید">
+    <EmptyState v-else variant="cart" message="از دسته‌بندی یا کالیته محصول را انتخاب کنید">
-      <BaseButton @click="emit('selectCompany')">انتخاب شرکت</BaseButton>
+      <BaseButton @click="emit('selectCompany')">مشاهده محصولات</BaseButton>
     </EmptyState>
   </div>
 </template>

src/views/catalogs/CatalogListView.vue

@@ -32,7 +32,10 @@ onMounted(load)
 watch(companyId, load)
 
 function openCatalog(catalogId: string) {
-  router.push(`/companies/${companyId.value}/catalogs/${catalogId}/products`)
+  router.push({
+    path: '/products',
+    query: { catalogId, companyId: companyId.value },
+  })
 }
 
 function getProductCount(catalogId: string) {

src/views/catalogs/CatalogRequestView.vue

@@ -38,9 +38,12 @@ onMounted(async () => {
   error.value = null
   try {
     const list = await crm.loadBrowseProducts()
-    products.value = list
+    const selected = preselectId.value
-    if (preselectId.value) {
+    products.value = selected
-      quantities.value = { ...quantities.value, [preselectId.value]: 1 }
+      ? [...list].sort((a, b) => Number(b.id === selected) - Number(a.id === selected))
+      : list
+    if (selected) {
+      quantities.value = { ...quantities.value, [selected]: 1 }
     }
   } catch (e) {
     error.value = e instanceof Error ? e.message : 'بارگذاری محصولات ناموفق بود.'
@@ -79,11 +82,18 @@ async function submit() {
   <div class="page">
     <PageHeader title="درخواست کالیته" show-back centered @back="router.back()" />
     <div class="page__scroll page__scroll--with-nav body">
-      <p class="hint">محصولات و تعداد اقلام موردنظر را مشخص کنید.</p>
+      <p class="hint">
+        {{ preselectId ? 'این محصول برای درخواست کالیته انتخاب شده است. در صورت نیاز اقلام دیگر را هم اضافه کنید.' : 'محصولات و تعداد اقلام موردنظر را مشخص کنید.' }}
+      </p>
       <PageSkeleton v-if="loading" variant="form" />
       <p v-else-if="error" class="error">{{ error }}</p>
       <template v-else>
-        <article v-for="item in products" :key="item.id" class="row">
+        <article
+          v-for="item in products"
+          :key="item.id"
+          class="row"
+          :class="{ 'row--selected': preselectId === item.id }"
+        >
           <div>
             <strong>{{ item.name }}</strong>
             <span>کد {{ item.code }}</span>
@@ -141,6 +151,10 @@ async function submit() {
   box-shadow: var(--shadow-sm);
 }
 
+.row--selected {
+  outline: 2px solid var(--color-primary);
+}
+
 .row strong {
   display: block;
   font-size: 0.9rem;

src/views/catalogs/CatalogsHubView.vue

@@ -36,7 +36,8 @@ onMounted(async () => {
 
 function openCatalog(item: Catalog) {
   router.push({
-    path: `/companies/${item.companyId}/catalogs/${item.id}/products`,
+    path: '/products',
+    query: { catalogId: item.id, companyId: item.companyId },
   })
 }
 
@@ -61,9 +62,9 @@ function companyName(companyId: string) {
         <strong>مشاهده دسته‌بندی‌ها</strong>
         <span>انتخاب بر اساس کاربرد و فصل</span>
       </button>
-      <button type="button" class="hub-card" @click="router.push('/companies')">
+      <button type="button" class="hub-card" @click="router.push('/products')">
-        <strong>کالیته‌های برندها</strong>
+        <strong>همه محصولات</strong>
-        <span>مسیر انتخاب شرکت و کالیته</span>
+        <span>مشاهده کاتالوگ و ثبت سفارش</span>
       </button>
 
       <PageSkeleton v-if="loading" variant="grid" />

src/views/categories/CategoriesView.vue

@@ -95,6 +95,7 @@ function openSeason(id: string) {
           >
             <div
               class="usage-card__image"
+              :class="`usage-card__image--${item.id}`"
               :style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : undefined"
             >
               <span class="usage-card__icon">
@@ -123,10 +124,6 @@ function openSeason(id: string) {
             class="season-card"
             @click="openSeason(item.id)"
           >
-            <div
-              class="season-card__image"
-              :style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : undefined"
-            />
             <div class="season-card__body">
               <div class="season-card__title-row">
                 <span class="season-card__icon">
@@ -140,6 +137,11 @@ function openSeason(id: string) {
                 <IconChevronLeft :size="14" />
               </span>
             </div>
+            <div
+              class="season-card__image"
+              :class="`season-card__image--${item.id}`"
+              :style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : undefined"
+            />
           </button>
         </div>
       </section>
@@ -261,10 +263,22 @@ function openSeason(id: string) {
 
 .usage-card__image {
   position: relative;
-  height: 72px;
+  height: 96px;
   background: linear-gradient(140deg, #6b7280, #1f2937) center / cover no-repeat;
 }
 
+.usage-card__image--suit {
+  background: linear-gradient(150deg, #2c3038, #111318) center / cover no-repeat;
+}
+
+.usage-card__image--shirt {
+  background: linear-gradient(150deg, #e8eef3, #9aa8b5) center / cover no-repeat;
+}
+
+.usage-card__image--trousers {
+  background: linear-gradient(150deg, #1a1d24, #0b0d12) center / cover no-repeat;
+}
+
 .usage-card__icon {
   position: absolute;
   left: 50%;
@@ -308,7 +322,7 @@ function openSeason(id: string) {
 
 .season-card {
   display: grid;
-  grid-template-columns: 110px 1fr;
+  grid-template-columns: 1fr 42%;
   border: none;
   background: var(--color-surface);
   border-radius: var(--radius-lg);
@@ -320,10 +334,22 @@ function openSeason(id: string) {
 }
 
 .season-card__image {
-  min-height: 100px;
+  min-height: 124px;
   background: linear-gradient(160deg, #d6c3a8, #8b7355) center / cover no-repeat;
 }
 
+.season-card__image--summer {
+  background: linear-gradient(160deg, #f3e6c8, #c4a574) center / cover no-repeat;
+}
+
+.season-card__image--winter {
+  background: linear-gradient(160deg, #cfd6de, #7d8b99) center / cover no-repeat;
+}
+
+.season-card__image--all_season {
+  background: linear-gradient(160deg, #efe6d6, #b9a48a) center / cover no-repeat;
+}
+
 .season-card__body {
   padding: 12px;
 }

src/views/checkout/CheckListView.vue

@@ -140,7 +140,7 @@ async function submitChecks() {
     <div v-if="checks.length === 0" class="check-list-page__empty page__scroll page__scroll--with-nav">
       <EmptyState variant="checks" message="برای ادامه، حداقل یک چک ثبت کنید">
         <BaseButton v-if="isCheckout" @click="addAnother">ثبت چک جدید</BaseButton>
-        <BaseButton v-else variant="outline" @click="router.push('/companies')">ثبت سفارش جدید</BaseButton>
+        <BaseButton v-else variant="outline" @click="router.push('/categories')">ثبت سفارش جدید</BaseButton>
       </EmptyState>
     </div>
 

src/views/products/ProductDetailView.vue

@@ -7,14 +7,31 @@ import { useCartStore } from '@/stores/cart'
 import { useCatalogStore } from '@/stores/catalog'
 import type { CatalogProductCard } from '@/types/crm'
 import type { Product } from '@/types'
-import { formatMeterage, formatNumber } from '@/utils/format'
+import { formatNumber } from '@/utils/format'
 import IconChevronBack from '@/components/icons/IconChevronBack.vue'
 import IconCart from '@/components/icons/IconCart.vue'
 import IconCatalog from '@/components/icons/IconCatalog.vue'
 import IconHeart from '@/components/icons/IconHeart.vue'
-import IconMail from '@/components/icons/IconMail.vue'
+import IconShare from '@/components/icons/IconShare.vue'
+import IconShoppingBag from '@/components/icons/IconShoppingBag.vue'
 import { useGoBack } from '@/composables/useGoBack'
 import PageSkeleton from '@/components/ui/PageSkeleton.vue'
+import {
+  CATALOG_SEASON_CATEGORIES,
+  CATALOG_USAGE_CATEGORIES,
+} from '@/data/catalogCategories'
+
+const USAGE_CHIP_LABEL: Record<string, string> = {
+  suit: 'پارچه کت‌شلواری',
+  trousers: 'پارچه شلواری',
+  shirt: 'پارچه پیراهنی',
+}
+
+const SEASON_CHIP_LABEL: Record<string, string> = {
+  summer: 'پارچه تابستانه',
+  winter: 'پارچه زمستانه',
+  all_season: 'پارچه چهارفصل',
+}
 
 const route = useRoute()
 const router = useRouter()
@@ -30,7 +47,6 @@ const error = ref<string | null>(null)
 const selectedColor = ref(0)
 const rolls = ref(1)
 const adding = ref(false)
-const actionMessage = ref<string | null>(null)
 const showAllSpecs = ref(false)
 
 const rollMeters = computed(() => product.value?.rollMeters ?? 50)
@@ -42,6 +58,65 @@ const minOrderMeters = computed(() => {
 const minRolls = computed(() =>
   Math.max(1, Math.ceil(minOrderMeters.value / rollMeters.value)),
 )
+const usageLabel = computed(
+  () => USAGE_CHIP_LABEL[product.value?.categoryId ?? ''] || '—',
+)
+const seasonLabel = computed(
+  () => SEASON_CHIP_LABEL[product.value?.season ?? ''] || '—',
+)
+
+const categoryChips = computed(() => {
+  const p = product.value
+  if (!p) return []
+
+  const chips: Array<{
+    key: string
+    label: string
+    to?: { path: string; query: Record<string, string> }
+  }> = []
+
+  const usageId = CATALOG_USAGE_CATEGORIES.some((c) => c.id === p.categoryId)
+    ? p.categoryId
+    : ''
+  const usageLabel = usageId ? USAGE_CHIP_LABEL[usageId] : ''
+  if (usageLabel) {
+    chips.push({
+      key: `usage-${usageId}`,
+      label: usageLabel,
+      to: { path: '/products', query: { categoryId: usageId } },
+    })
+  }
+
+  const seasonId = CATALOG_SEASON_CATEGORIES.some((c) => c.id === p.season)
+    ? p.season
+    : ''
+  const seasonLabel = seasonId ? SEASON_CHIP_LABEL[seasonId] : ''
+  if (seasonLabel) {
+    chips.push({
+      key: `season-${seasonId}`,
+      label: seasonLabel,
+      to: { path: '/products', query: { season: seasonId } },
+    })
+  }
+
+  const covered = new Set(
+    chips.flatMap((c) => [c.label, c.label.replace(/^پارچه\s*/, '')]),
+  )
+  for (const tag of p.tags) {
+    const short = tag.replace(/^پارچه‌?های?\s*/, '').trim()
+    if (!short || covered.has(short) || chips.some((c) => c.label.includes(short))) {
+      continue
+    }
+    const label = tag.startsWith('پارچه') ? tag : `پارچه ${short}`
+    covered.add(short)
+    chips.push({
+      key: `tag-${tag}`,
+      label,
+    })
+  }
+
+  return chips
+})
 
 async function load() {
   if (!productId.value) {
@@ -51,7 +126,6 @@ async function load() {
   }
   loading.value = true
   error.value = null
-  actionMessage.value = null
   try {
     await Promise.all([favorites.hydrate(), catalogStore.loadCompanies()])
     product.value = await crm.loadProductById(productId.value)
@@ -68,15 +142,14 @@ async function load() {
 onMounted(load)
 watch(productId, load)
 
-function toCartProduct(p: CatalogProductCard): Product | null {
+function toCartProduct(p: CatalogProductCard): Product {
-  if (!p.companyId || !p.catalogId) return null
   const roll = p.rollMeters || 50
   const step = p.orderMultiplier && p.orderMultiplier > 0 ? p.orderMultiplier : roll
   const min = p.minMeterage && p.minMeterage > 0 ? p.minMeterage : roll
   return {
     id: p.id,
-    companyId: p.companyId,
+    companyId: p.companyId || '',
-    catalogId: p.catalogId,
+    catalogId: p.catalogId || '',
     name: p.name,
     code: p.code,
     color: p.color || p.colors[selectedColor.value] || '—',
@@ -97,32 +170,18 @@ function snapMeterage(meters: number, step: number, min: number) {
 async function addToOrder() {
   if (!product.value) return
   const cartProduct = toCartProduct(product.value)
-  if (!cartProduct) {
-    actionMessage.value = 'اطلاعات شرکت/کاتالوگ محصول ناقص است.'
-    return
-  }
-  if (!catalogStore.getCompany(cartProduct.companyId)) {
-    await catalogStore.loadCompanies()
-  }
   adding.value = true
-  actionMessage.value = null
   try {
     const meterage = snapMeterage(
       orderMeters.value,
       cartProduct.orderMultiplier,
       cartProduct.minMeterage,
     )
-    const result = await cartStore.addItem(
+    await cartStore.addItem(
       cartProduct,
       product.value.catalogCode || product.value.code,
       meterage,
     )
-    if (result.success) {
-      actionMessage.value = 'به سفارش اضافه شد.'
-      await router.push('/cart')
-    } else {
-      actionMessage.value = result.message || 'افزودن به سفارش ناموفق بود.'
-    }
   } finally {
     adding.value = false
   }
@@ -133,19 +192,15 @@ function toggleFavorite() {
   void favorites.toggle(product.value.id)
 }
 
-function adjustRolls(delta: number) {
-  rolls.value = Math.max(minRolls.value, rolls.value + delta)
-}
-
 function shareProduct() {
   const url = window.location.href
   if (navigator.share) {
     void navigator.share({ title: product.value?.name, url }).catch(() => undefined)
-  } else {
+    return
+  }
   void navigator.clipboard?.writeText(url)
-    actionMessage.value = 'لینک محصول کپی شد.'
-  }
 }
+
 </script>
 
 <template>
@@ -173,7 +228,7 @@ function shareProduct() {
           />
         </button>
         <button type="button" class="icon-btn" aria-label="اشتراک‌گذاری" @click="shareProduct">
-          <IconMail :size="20" />
+          <IconShare :size="20" />
         </button>
       </div>
     </header>
@@ -203,9 +258,10 @@ function shareProduct() {
             type="button"
             class="thumb"
             :class="{ 'thumb--active': selectedColor === idx }"
-            :style="{ background: color }"
             @click="selectedColor = idx"
-          />
+          >
+            <span class="thumb__swatch" :style="{ background: color }" />
+          </button>
         </div>
       </div>
 
@@ -218,36 +274,58 @@ function shareProduct() {
 
         <div class="specs">
           <div class="spec-cell">
-            <span class="spec-cell__label">عرض</span>
+            <span class="spec-icon" aria-hidden="true">
-            <strong>{{ formatNumber(product.widthCm) }} سانتی متر</strong>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+                <rect x="4" y="8" width="16" height="8" rx="2" />
+              </svg>
+            </span>
+            <span>عرض</span>
+            <strong>{{ formatNumber(product.widthCm) }} سانتی‌متر</strong>
           </div>
           <div class="spec-cell">
-            <span class="spec-cell__label">جنس</span>
+            <span class="spec-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+                <path d="M12 3.5 20 8v8l-8 4.5L4 16V8l8-4.5Z" />
+              </svg>
+            </span>
+            <span>جنس</span>
             <strong>{{ product.composition || '—' }}</strong>
           </div>
           <div class="spec-cell">
-            <span class="spec-cell__label">وزن</span>
+            <span class="spec-icon" aria-hidden="true">
+              <IconShoppingBag :size="22" color="#98a2ad" />
+            </span>
+            <span>وزن</span>
             <strong>{{ product.weightGrams ? `${formatNumber(product.weightGrams)} گرم` : '—' }}</strong>
           </div>
           <div class="spec-cell">
-            <span class="spec-cell__label">نوع بافت</span>
+            <span class="spec-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+                <circle cx="12" cy="12" r="8" />
+                <path d="M12 8a6 6 0 0 1 0 8" />
+              </svg>
+            </span>
+            <span>نوع بافت</span>
             <strong>{{ product.weaveType || '—' }}</strong>
           </div>
         </div>
         <button type="button" class="specs-more" @click="showAllSpecs = !showAllSpecs">
           {{ showAllSpecs ? 'بستن مشخصات' : 'مشاهده همه مشخصات' }}
+          <svg class="specs-more__chevron" :class="{ 'is-open': showAllSpecs }" viewBox="0 0 12 12" aria-hidden="true">
+            <path d="M3 4.5 6 8l3-3.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+          </svg>
         </button>
         <div v-if="showAllSpecs" class="specs-extra">
-          <p>فصل: {{ product.season }}</p>
+          <p>فصل: {{ seasonLabel }}</p>
-          <p>دسته: {{ product.categoryId }}</p>
+          <p>دسته: {{ usageLabel }}</p>
-          <p v-if="product.basePrice">قیمت پایه: {{ formatNumber(product.basePrice) }} تومان</p>
+          <p>جمع سفارش: {{ formatNumber(orderMeters) }} متر</p>
         </div>
 
-        <section>
+        <section class="pd-section pd-section--boxed">
-          <h2 class="section-label">
+          <div class="section-head">
-            رنگ بندی
+            <h2>رنگ‌بندی</h2>
             <span>({{ formatNumber(product.colors.length) }} رنگ موجود)</span>
-          </h2>
+          </div>
           <div class="colors">
             <button
               v-for="(color, idx) in product.colors"
@@ -261,45 +339,42 @@ function shareProduct() {
           </div>
         </section>
 
-        <section>
+        <section class="pd-section">
-          <h2 class="section-label">دسته بندی</h2>
+          <h2 class="section-title">دسته‌بندی</h2>
-          <div class="tags">
+          <div class="tags" role="list">
-            <span v-for="tag in product.tags" :key="tag" class="tag">{{ tag }}</span>
+            <button
-            <span v-if="!product.tags.length" class="tag">{{ product.categoryId }}</span>
+              v-for="chip in categoryChips"
+              :key="chip.key"
+              type="button"
+              class="tag"
+              :class="{ 'tag--link': !!chip.to }"
+              role="listitem"
+              @click="chip.to && router.push(chip.to)"
+            >
+              {{ chip.label }}
+            </button>
           </div>
         </section>
 
-        <section>
+        <section class="pd-section">
-          <h2 class="section-label">متراژ هر ساقه (طاقه)</h2>
+          <h2 class="section-title">متراژ هر ساقه (طاقه)</h2>
           <div class="roll-field">{{ formatNumber(product.rollMeters) }} متر</div>
         </section>
-
-        <section>
-          <h2 class="section-label">تعداد طاقه</h2>
-          <div class="roll-stepper">
-            <button type="button" class="step-btn" @click="adjustRolls(-1)">−</button>
-            <strong>{{ formatNumber(rolls) }}</strong>
-            <button type="button" class="step-btn" @click="adjustRolls(1)">+</button>
-          </div>
-          <p class="order-meters">جمع متراژ سفارش: {{ formatNumber(orderMeters) }} متر</p>
-        </section>
-
-        <p v-if="actionMessage" class="action-msg">{{ actionMessage }}</p>
       </div>
     </div>
 
     <footer class="pd-footer">
-      <button type="button" class="btn-secondary" @click="router.push({ path: '/catalog-request', query: { productId: product.id } })">
-        <IconCatalog :size="18" />
-        درخواست کالیته
-      </button>
       <div class="pd-footer__primary">
         <button type="button" class="btn-primary" :disabled="adding" @click="addToOrder">
           <IconCart :size="18" color="#ffffff" />
           {{ adding ? 'در حال افزودن...' : 'افزودن به سفارش' }}
         </button>
-        <p class="min-note">حداقل سفارش: {{ formatMeterage(minOrderMeters) }}</p>
+        <p class="min-note">حداقل سفارش: {{ formatNumber(minRolls) }} طاقه</p>
       </div>
+      <button type="button" class="btn-secondary" @click="router.push({ path: '/catalog-request', query: { productId: product.id } })">
+        <IconCatalog :size="18" />
+        درخواست کالیته
+      </button>
     </footer>
   </div>
 
@@ -315,7 +390,10 @@ function shareProduct() {
 
 <style scoped>
 .product-detail {
-  background: var(--color-bg);
+  --pd-card-border: 1px solid #eeeef1;
+  --pd-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.05);
+  --pd-card-radius: 16px;
+  background: #fff;
   display: flex;
   flex-direction: column;
   min-height: 100%;
@@ -368,96 +446,165 @@ function shareProduct() {
 
 .gallery__thumbs {
   display: flex;
-  gap: 8px;
+  gap: 10px;
-  padding: 12px var(--page-padding);
+  margin: 12px var(--page-padding) 0;
+  padding: 10px;
   overflow-x: auto;
-  background: var(--color-surface);
+  background: #fff;
+  border: var(--pd-card-border);
+  border-radius: var(--pd-card-radius);
+  box-shadow: var(--pd-card-shadow);
 }
 
 .thumb {
-  width: 48px;
+  appearance: none;
-  height: 48px;
+  -webkit-appearance: none;
-  border-radius: 10px;
+  width: 52px;
-  border: 2px solid transparent;
+  height: 52px;
+  border-radius: 14px;
+  border: var(--pd-card-border);
+  background: #fff;
+  box-shadow: var(--pd-card-shadow);
   cursor: pointer;
   flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.thumb__swatch {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
 }
 
 .thumb--active {
-  border-color: #111;
+  padding: 3px;
+  border: 2px solid #0a353c;
+}
+
+.thumb--active .thumb__swatch {
+  border-radius: 9px;
 }
 
 .pd-body {
-  padding: 16px var(--page-padding) 24px;
+  padding: 16px var(--page-padding) 20px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 18px;
+  background: #fff;
 }
 
 .title-row {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 8px;
 }
 
 .title-row h1 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.2rem;
-}
-
-.new-badge {
-  background: var(--color-primary-soft);
-  color: var(--color-primary);
-  border-radius: 999px;
-  padding: 2px 10px;
-  font-size: 0.75rem;
   font-weight: 700;
 }
 
+.new-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 10px;
+  background: #96b49c;
+  color: #fff;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
 .code {
-  margin: -8px 0 0;
+  margin: -10px 0 0;
   color: var(--color-text-muted);
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 
 .specs {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
+  gap: 6px;
-  background: var(--color-surface);
+  padding: 14px 8px;
-  border: 1px solid var(--color-border);
+  background: #fff;
-  border-radius: var(--radius-md);
+  border: var(--pd-card-border);
-  padding: 12px;
+  border-radius: var(--pd-card-radius);
-  font-size: 0.8rem;
+  box-shadow: var(--pd-card-shadow);
 }
 
 .spec-cell {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  align-items: center;
+  gap: 6px;
+  text-align: center;
+  min-width: 0;
 }
 
-.spec-cell__label {
+.spec-icon {
-  color: var(--color-text-muted);
+  width: 22px;
-  font-size: 0.75rem;
+  height: 22px;
+  color: #98a2ad;
+  display: grid;
+  place-items: center;
+}
+
+.spec-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.spec-cell strong {
+  font-size: 0.7rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.spec-cell span {
+  color: #98a2ad;
+  font-size: 0.7rem;
 }
 
 .specs-more {
   border: none;
   background: transparent;
-  color: var(--color-primary);
+  color: #8b939c;
-  font-weight: 700;
+  font-weight: 500;
+  font-size: 0.8rem;
   cursor: pointer;
-  align-self: flex-start;
+  align-self: center;
   padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.specs-more__chevron {
+  width: 12px;
+  height: 12px;
+}
+
+.specs-more__chevron.is-open {
+  transform: rotate(180deg);
 }
 
 .specs-extra {
-  background: var(--color-surface);
+  background: #f6f7f8;
-  border: 1px solid var(--color-border);
+  border-radius: 12px;
-  border-radius: var(--radius-md);
+  padding: 12px 14px;
-  padding: 12px;
+  font-size: 0.82rem;
-  font-size: 0.85rem;
   color: var(--color-text-muted);
 }
 
@@ -465,93 +612,134 @@ function shareProduct() {
   margin: 0 0 6px;
 }
 
-.section-label {
+.specs-extra p:last-child {
-  margin: 0 0 8px;
+  margin: 0;
-  font-size: 0.95rem;
 }
 
-.section-label span {
+.pd-section {
-  color: var(--color-text-muted);
+  display: flex;
-  font-weight: 500;
+  flex-direction: column;
-  font-size: 0.8rem;
+  gap: 10px;
+}
+
+.pd-section--boxed {
+  padding: 12px 14px;
+  background: #fff;
+  border: var(--pd-card-border);
+  border-radius: var(--pd-card-radius);
+  box-shadow: var(--pd-card-shadow);
+}
+
+.section-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.section-head h2,
+.section-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.section-head span {
+  color: #8b939c;
+  font-size: 0.78rem;
 }
 
 .colors {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
-  gap: 10px;
+  gap: 14px;
+  overflow-x: auto;
+  padding: 4px 2px;
+  padding-inline-start: 20px;
 }
 
 .color-dot {
-  width: 28px;
+  appearance: none;
-  height: 28px;
+  -webkit-appearance: none;
+  width: 22px;
+  height: 22px;
   border-radius: 999px;
-  border: 2px solid transparent;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: none;
   cursor: pointer;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0;
 }
 
 .color-dot--active {
-  outline: 2px solid var(--color-primary);
+  border-color: transparent;
-  outline-offset: 2px;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0a353c;
 }
 
 .tags {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-start;
   gap: 8px;
 }
 
-.tag {
+.tag,
-  background: var(--color-bg);
+button.tag {
-  border-radius: 999px;
+  appearance: none;
-  padding: 8px 12px;
+  -webkit-appearance: none;
-  font-size: 0.8rem;
-}
-
-.roll-field {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  padding: 12px 14px;
-}
-
-.roll-stepper {
   display: inline-flex;
   align-items: center;
-  gap: 16px;
+  justify-content: center;
-  background: var(--color-surface);
+  height: 32px;
-  border: 1px solid var(--color-border);
+  min-height: 32px;
-  border-radius: var(--radius-md);
+  padding: 0 16px;
-  padding: 8px 12px;
+  border: var(--pd-card-border);
+  border-radius: var(--pd-card-radius);
+  background: #fff;
+  color: #6b7280;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+  box-shadow: var(--pd-card-shadow);
+  outline: none;
 }
 
-.step-btn {
+button.tag {
-  width: 36px;
+  cursor: default;
-  height: 36px;
+  font-family: inherit;
-  border-radius: 10px;
+}
-  border: 1px solid var(--color-border);
+
-  background: #fff;
+button.tag--link {
-  font-size: 1.2rem;
   cursor: pointer;
 }
 
-.order-meters,
+button.tag--link:hover {
-.action-msg {
+  background: #fff;
-  margin: 8px 0 0;
-  font-size: 0.85rem;
-  color: var(--color-text-muted);
 }
 
-.action-msg {
+.roll-field {
-  color: var(--color-primary);
+  display: inline-flex;
-  font-weight: 600;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  border: 1px solid #eeeef1;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.05);
+  padding: 14px 16px;
+  color: #6b7280;
+  font-size: 0.9rem;
 }
 
 .pd-footer {
   position: sticky;
   bottom: 0;
   display: grid;
-  grid-template-columns: 1fr 1.2fr;
+  grid-template-columns: 1.2fr 1fr;
+  align-items: start;
   gap: 8px;
   padding: 12px var(--page-padding) calc(12px + env(safe-area-inset-bottom, 0));
   background: var(--color-surface);
@@ -566,6 +754,7 @@ function shareProduct() {
 .btn-secondary,
 .btn-primary {
   width: 100%;
+  height: 48px;
   min-height: 48px;
   border-radius: 12px;
   display: inline-flex;

src/views/products/ProductsView.vue

@@ -17,16 +17,20 @@ const crm = useCrmStore()
 const favorites = useFavoritesStore()
 
 const categoryId = computed(() => String(route.query.categoryId ?? ''))
+const catalogId = computed(() => String(route.query.catalogId ?? ''))
+const companyId = computed(() => String(route.query.companyId ?? ''))
 const season = computed(() => String(route.query.season ?? '') as SeasonKind | '')
 const q = computed(() => String(route.query.q ?? ''))
 const searchDraft = ref(String(route.query.q ?? ''))
 const products = ref<CatalogProductCard[]>([])
 const seasons = ref<SeasonCategory[]>([])
+const catalogTitle = ref('')
 const loading = ref(true)
 const error = ref<string | null>(null)
 const sortMode = ref<'newest' | 'name'>('newest')
 
 const title = computed(() => {
+  if (catalogId.value && catalogTitle.value) return catalogTitle.value
   if (categoryId.value) {
     const cat = crm.usageCategories.find((c) => c.id === categoryId.value)
     return cat?.title ?? 'محصولات'
@@ -38,6 +42,17 @@ const title = computed(() => {
   return 'همه محصولات'
 })
 
+const bannerSubtitle = computed(() => {
+  if (catalogId.value) return 'انتخاب محصول از کالیته'
+  if (categoryId.value === 'suit') return 'شیک، بادوام و رسمی'
+  if (categoryId.value === 'trousers') return 'مناسب شلوار و مصارف روزانه'
+  if (categoryId.value === 'shirt') return 'سبک و مناسب پیراهن'
+  if (season.value) return 'فیلتر شده بر اساس فصل'
+  return 'مشاهده و ثبت سفارش'
+})
+
+const showSearch = computed(() => !categoryId.value && !catalogId.value)
+
 const sortedProducts = computed(() => {
   const needle = q.value.trim().toLowerCase()
   let list = [...products.value]
@@ -65,6 +80,8 @@ function applySearch(value: string) {
     path: '/products',
     query: {
       ...(categoryId.value ? { categoryId: categoryId.value } : {}),
+      ...(catalogId.value ? { catalogId: catalogId.value } : {}),
+      ...(companyId.value ? { companyId: companyId.value } : {}),
       ...(season.value ? { season: season.value } : {}),
       ...(value.trim() ? { q: value.trim() } : {}),
     },
@@ -82,7 +99,11 @@ async function load() {
     products.value = await crm.loadBrowseProducts({
       categoryId: categoryId.value || undefined,
       season: season.value || undefined,
+      catalogId: catalogId.value || undefined,
+      companyId: companyId.value || undefined,
     })
+    const fromCatalog = products.value[0]
+    catalogTitle.value = fromCatalog?.catalogName || fromCatalog?.catalogCode || ''
   } catch (e) {
     error.value = e instanceof Error ? e.message : 'بارگذاری محصولات ناموفق بود.'
     products.value = []
@@ -95,7 +116,7 @@ onMounted(async () => {
   await favorites.hydrate()
   await load()
 })
-watch([categoryId, season], load)
+watch([categoryId, season, catalogId, companyId], load)
 watch(q, (value) => {
   searchDraft.value = value
 })
@@ -105,6 +126,8 @@ function setSeason(value: string) {
     path: '/products',
     query: {
       ...(categoryId.value ? { categoryId: categoryId.value } : {}),
+      ...(catalogId.value ? { catalogId: catalogId.value } : {}),
+      ...(companyId.value ? { companyId: companyId.value } : {}),
       ...(value ? { season: value } : {}),
       ...(q.value ? { q: q.value } : {}),
     },
@@ -136,6 +159,7 @@ function toggleFavorite(productId: string) {
 
     <div class="page__scroll page__scroll--with-nav products-scroll">
       <SearchField
+        v-if="showSearch"
         :model-value="searchDraft"
         placeholder="جستجو نام یا کد محصول..."
         @update:model-value="applySearch"
@@ -147,7 +171,7 @@ function toggleFavorite(productId: string) {
         <div class="cat-banner__icon" aria-hidden="true" />
         <div>
           <h2>{{ title }}</h2>
-          <p>شیک، بادوام و رسمی</p>
+          <p>{{ bannerSubtitle }}</p>
         </div>
       </section>
 
@@ -232,6 +256,7 @@ function toggleFavorite(productId: string) {
           </button>
         </div>
       </article>
+      <p v-if="!sortedProducts.length" class="empty-list">محصولی در این دسته یافت نشد.</p>
       </template>
     </div>
   </div>
@@ -446,4 +471,10 @@ function toggleFavorite(productId: string) {
   font-size: 0.75rem;
   cursor: pointer;
 }
+
+.empty-list {
+  margin: 12px 0 0;
+  text-align: center;
+  color: var(--color-text-muted);
+}
 </style>