Allow mixed-company cart, add delete confirmations, and fix profile settings routes.

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

src/App.vue

@@ -2,6 +2,7 @@
 import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import ConfirmDialog from '@/components/ui/ConfirmDialog.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useCartStore } from '@/stores/cart'
 import { useOrderStore } from '@/stores/order'
@@ -21,4 +22,5 @@ onMounted(() => {
   <DefaultLayout>
     <RouterView />
   </DefaultLayout>
+  <ConfirmDialog />
 </template>

src/components/layout/DesktopHeader.vue

@@ -21,7 +21,9 @@ const initials = computed(() => {
   return `${first}${last}` || '؟'
 })
 
-const companyLabel = computed(() => cartStore.activeCart?.companyName ?? '')
+const companyLabel = computed(
+  () => cartStore.companyNamesLabel || cartStore.activeCart?.companyName || '',
+)
 
 const searchPlaceholder = computed(() => {
   if (route.path.startsWith('/orders')) return 'جستجو در سفارش‌ها...'

src/components/layout/DesktopSidebar.vue

@@ -17,7 +17,9 @@ const orderStore = useOrderStore()
 
 const cartCount = computed(() => cartStore.itemCount)
 const draftCheckCount = computed(() => orderStore.draftChecks.length)
-const activeCompanyId = computed(() => cartStore.activeCart?.companyId ?? null)
+const activeCompanyId = computed(
+  () => cartStore.selectedCompanyId || cartStore.activeCart?.companyId || null,
+)
 
 function navigate(item: (typeof DESKTOP_NAV_ITEMS)[number]) {
   router.push(resolveNavPath(item, activeCompanyId.value))

src/components/ui/ConfirmDialog.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import BaseButton from '@/components/ui/BaseButton.vue'
+import { resolveConfirm, useConfirmState } from '@/composables/useConfirm'
+
+const state = useConfirmState()
+
+function cancel() {
+  resolveConfirm(false)
+}
+
+function confirmAction() {
+  resolveConfirm(true)
+}
+</script>
+
+<template>
+  <div
+    v-if="state.open"
+    class="dialog-overlay confirm-dialog-overlay"
+    role="dialog"
+    aria-modal="true"
+    :aria-labelledby="'confirm-dialog-title'"
+    @click.self="cancel"
+  >
+    <div class="dialog card confirm-dialog">
+      <h3 id="confirm-dialog-title" class="confirm-dialog__title">{{ state.title }}</h3>
+      <p class="confirm-dialog__message">{{ state.message }}</p>
+      <div class="dialog-actions confirm-dialog__actions">
+        <BaseButton variant="outline" @click="cancel">{{ state.cancelLabel }}</BaseButton>
+        <BaseButton :variant="state.tone === 'danger' ? 'danger' : 'primary'" @click="confirmAction">
+          {{ state.confirmLabel }}
+        </BaseButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.confirm-dialog {
+  padding: 20px;
+}
+
+.confirm-dialog__title {
+  margin: 0 0 8px;
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+
+.confirm-dialog__message {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.7;
+}
+
+.confirm-dialog__actions {
+  margin-top: 20px;
+}
+
+@media (min-width: 768px) {
+  .confirm-dialog__actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+</style>

src/composables/useCartPage.ts

@@ -1,6 +1,7 @@
 import { computed, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCartStore } from '@/stores/cart'
+import { confirm } from '@/composables/useConfirm'
 
 export function useCartPage() {
   const router = useRouter()
@@ -9,9 +10,20 @@ export function useCartPage() {
 
   const items = computed(() => cartStore.activeCart?.items ?? [])
   const isEmpty = computed(() => items.value.length === 0)
-  const companyName = computed(() => cartStore.activeCart?.companyName ?? '')
+  const companyName = computed(() => cartStore.companyNamesLabel || cartStore.activeCart?.companyName || '')
 
-  function removeItem(itemId: string) {
+  async function removeItem(itemId: string) {
+    const item = items.value.find((entry) => entry.id === itemId)
+    const ok = await confirm({
+      title: 'حذف از سبد',
+      message: item
+        ? `آیا از حذف «${item.productName}» از سبد خرید مطمئن هستید؟`
+        : 'آیا از حذف این آیتم از سبد خرید مطمئن هستید؟',
+      confirmLabel: 'حذف',
+      cancelLabel: 'انصراف',
+      tone: 'danger',
+    })
+    if (!ok) return
     cartStore.removeItem(itemId)
   }
 
@@ -32,9 +44,11 @@ export function useCartPage() {
   function createNewInvoice() {
     cartStore.createNewCartForSameCompany()
     showFullDialog.value = false
-    const companyId = cartStore.activeCart?.companyId
+    const companyId = cartStore.selectedCompanyId || cartStore.activeCart?.companyId
     if (companyId) {
       router.push(`/companies/${companyId}/catalogs`)
+    } else {
+      router.push('/')
     }
   }
 

src/composables/useConfirm.ts

@@ -0,0 +1,48 @@
+import { reactive } from 'vue'
+
+export interface ConfirmOptions {
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  tone?: 'danger' | 'primary'
+}
+
+interface ConfirmState extends ConfirmOptions {
+  open: boolean
+  resolve: ((value: boolean) => void) | null
+}
+
+const state = reactive<ConfirmState>({
+  open: false,
+  title: '',
+  message: '',
+  confirmLabel: 'حذف',
+  cancelLabel: 'انصراف',
+  tone: 'danger',
+  resolve: null,
+})
+
+export function useConfirmState() {
+  return state
+}
+
+export function confirm(options: ConfirmOptions): Promise<boolean> {
+  return new Promise((resolve) => {
+    Object.assign(state, {
+      open: true,
+      title: options.title,
+      message: options.message,
+      confirmLabel: options.confirmLabel ?? 'حذف',
+      cancelLabel: options.cancelLabel ?? 'انصراف',
+      tone: options.tone ?? 'danger',
+      resolve,
+    })
+  })
+}
+
+export function resolveConfirm(value: boolean) {
+  state.resolve?.(value)
+  state.open = false
+  state.resolve = null
+}

src/router/index.ts

@@ -106,6 +106,24 @@ const router = createRouter({
       component: () => import('@/views/profile/ProfileEditView.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/profile/security',
+      name: 'profile-security',
+      component: () => import('@/views/profile/ProfileSecurityView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/profile/notifications',
+      name: 'profile-notifications',
+      component: () => import('@/views/profile/ProfileNotificationsView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/profile/display',
+      name: 'profile-display',
+      component: () => import('@/views/profile/ProfileDisplayView.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/profile/checks',
       name: 'profile-checks',

src/stores/cart.ts

@@ -6,6 +6,8 @@ import { validateMeterage } from '@/utils/validation'
 import { getItem, setItem, STORAGE_KEYS } from '@/services/storage'
 import { getCompanyById } from '@/data/mockData'
 
+const DEFAULT_MAX_METERAGE = 5000
+
 function loadCarts(): Cart[] {
   return getItem<Cart[]>(STORAGE_KEYS.carts, [])
 }
@@ -26,16 +28,37 @@ function getCartTotalMeterage(cart: Cart): number {
   return cart.items.reduce((sum, item) => sum + item.meterage, 0)
 }
 
-function findOpenCartForCompany(carts: Cart[], company: Company): Cart | undefined {
-  return carts.find(
-    (cart) =>
-      cart.companyId === company.id &&
-      getCartTotalMeterage(cart) < company.maxMeteragePerInvoice,
-  )
+function companyMeterage(cart: Cart, companyId: string): number {
+  return cart.items
+    .filter((item) => item.companyId === companyId)
+    .reduce((sum, item) => sum + item.meterage, 0)
+}
+
+function uniqueCompanyNames(items: CartItem[]): string {
+  const names = [...new Set(items.map((item) => item.companyName).filter(Boolean))]
+  return names.join('، ')
+}
+
+function syncCartCompanyMeta(cart: Cart) {
+  if (cart.items.length === 0) return
+  const first = cart.items[0]!
+  cart.companyId = first.companyId
+  cart.companyName = uniqueCompanyNames(cart.items) || first.companyName
+}
+
+function migrateCartItems(carts: Cart[]): Cart[] {
+  return carts.map((cart) => ({
+    ...cart,
+    items: cart.items.map((item) => ({
+      ...item,
+      companyId: item.companyId || cart.companyId,
+      companyName: item.companyName || cart.companyName,
+    })),
+  }))
 }
 
 export const useCartStore = defineStore('cart', () => {
-  const carts = ref<Cart[]>(loadCarts())
+  const carts = ref<Cart[]>(migrateCartItems(loadCarts()))
   const activeCartId = ref<string | null>(loadActiveCartId())
   const selectedCompanyId = ref<string | null>(null)
 
@@ -47,10 +70,24 @@ export const useCartStore = defineStore('cart', () => {
 
   const itemCount = computed(() => activeCart.value?.items.length ?? 0)
 
+  const companyNamesLabel = computed(() => {
+    if (!activeCart.value?.items.length) return ''
+    return uniqueCompanyNames(activeCart.value.items)
+  })
+
   const maxMeterage = computed(() => {
-    if (!activeCart.value) return 5000
-    const company = getCompanyById(activeCart.value.companyId)
-    return company?.maxMeteragePerInvoice ?? 5000
+    if (!activeCart.value?.items.length) {
+      const selected = selectedCompanyId.value
+        ? getCompanyById(selectedCompanyId.value)
+        : null
+      return selected?.maxMeteragePerInvoice ?? DEFAULT_MAX_METERAGE
+    }
+
+    const companyIds = [...new Set(activeCart.value.items.map((item) => item.companyId))]
+    return companyIds.reduce((sum, id) => {
+      const company = getCompanyById(id)
+      return sum + (company?.maxMeteragePerInvoice ?? DEFAULT_MAX_METERAGE)
+    }, 0)
   })
 
   const remainingCapacity = computed(() => Math.max(0, maxMeterage.value - totalMeterage.value))
@@ -62,60 +99,68 @@ export const useCartStore = defineStore('cart', () => {
     saveActiveCartId(activeCartId.value)
   }
 
-  function initCartForCompany(company: Company): Cart {
-    const existing = findOpenCartForCompany(carts.value, company)
-    if (existing) {
-      activeCartId.value = existing.id
-      selectedCompanyId.value = company.id
-      persist()
-      return existing
-    }
-
+  function createEmptyCart(company?: Company): Cart {
     const cart: Cart = {
       id: generateId(),
-      companyId: company.id,
-      companyName: company.name,
+      companyId: company?.id ?? '',
+      companyName: company?.name ?? '',
       items: [],
     }
     carts.value.push(cart)
     activeCartId.value = cart.id
-    selectedCompanyId.value = company.id
+    if (company) selectedCompanyId.value = company.id
     persist()
     return cart
   }
 
-  function switchCompanyWarning(currentCompanyName: string, newCompanyName: string): string {
-    return `سبد خرید فعلی مربوط به ${currentCompanyName} است. برای خرید از ${newCompanyName} باید سبد خرید جداگانه‌ای ایجاد کنید.`
+  function getOrCreateCart(company?: Company): Cart {
+    if (activeCart.value) return activeCart.value
+
+    const withItems = carts.value.find((cart) => cart.items.length > 0)
+    if (withItems) {
+      activeCartId.value = withItems.id
+      selectedCompanyId.value = selectedCompanyId.value ?? withItems.companyId
+      persist()
+      return withItems
+    }
+
+    const open = carts.value.find(
+      (cart) => getCartTotalMeterage(cart) < DEFAULT_MAX_METERAGE,
+    )
+    if (open) {
+      activeCartId.value = open.id
+      if (company) selectedCompanyId.value = company.id
+      persist()
+      return open
+    }
+
+    return createEmptyCart(company)
   }
 
-  function canSwitchToCompany(companyId: string): { allowed: boolean; message?: string } {
-    if (!activeCart.value || activeCart.value.items.length === 0) {
-      return { allowed: true }
-    }
-    if (activeCart.value.companyId === companyId) {
-      return { allowed: true }
-    }
-    const newCompany = getCompanyById(companyId)
-    return {
-      allowed: false,
-      message: switchCompanyWarning(activeCart.value.companyName, newCompany?.name ?? ''),
+  /** @deprecated Prefer getOrCreateCart / selectCompany — kept for callers. */
+  function initCartForCompany(company: Company): Cart {
+    selectedCompanyId.value = company.id
+    const cart = getOrCreateCart(company)
+    if (!cart.companyId) {
+      cart.companyId = company.id
+      cart.companyName = company.name
+      persist()
     }
+    return cart
+  }
+
+  function selectCompany(company: Company): void {
+    selectedCompanyId.value = company.id
+    getOrCreateCart(company)
   }
 
   function createNewCartForSameCompany(): Cart | null {
-    if (!activeCart.value) return null
-    const company = getCompanyById(activeCart.value.companyId)
-    if (!company) return null
-    const cart: Cart = {
-      id: generateId(),
-      companyId: company.id,
-      companyName: company.name,
-      items: [],
-    }
-    carts.value.push(cart)
-    activeCartId.value = cart.id
-    persist()
-    return cart
+    const company = selectedCompanyId.value
+      ? getCompanyById(selectedCompanyId.value)
+      : activeCart.value?.companyId
+        ? getCompanyById(activeCart.value.companyId)
+        : undefined
+    return createEmptyCart(company)
   }
 
   function addItem(
@@ -123,40 +168,37 @@ export const useCartStore = defineStore('cart', () => {
     catalogCode: string,
     meterage: number,
   ): { success: boolean; message?: string } {
-    if (!activeCart.value) {
-      return { success: false, message: 'ابتدا شرکت را انتخاب کنید.' }
+    const company = getCompanyById(product.companyId)
+    if (!company) {
+      return { success: false, message: 'شرکت محصول یافت نشد.' }
     }
 
-    if (activeCart.value.companyId !== product.companyId) {
-      const currentCompany = activeCart.value.companyName
-      const newCompany = getCompanyById(product.companyId)
-      return {
-        success: false,
-        message: switchCompanyWarning(currentCompany, newCompany?.name ?? ''),
-      }
-    }
+    const cart = getOrCreateCart(company)
+    selectedCompanyId.value = company.id
 
-    const validation = validateMeterage(meterage, product, totalMeterage.value, maxMeterage.value)
+    const companyMax = company.maxMeteragePerInvoice
+    const currentCompanyMeterage = companyMeterage(cart, company.id)
+    const existing = cart.items.find((i) => i.productId === product.id)
+    const previousMeterage = existing?.meterage ?? 0
+
+    const validation = validateMeterage(
+      meterage,
+      product,
+      currentCompanyMeterage,
+      companyMax,
+      previousMeterage,
+    )
     if (!validation.valid) {
       return { success: false, message: validation.message }
     }
 
-    const existingIndex = activeCart.value.items.findIndex((i) => i.productId === product.id)
-    if (existingIndex >= 0) {
-      const existing = activeCart.value.items[existingIndex]!
-      const revalidation = validateMeterage(
-        meterage,
-        product,
-        totalMeterage.value,
-        maxMeterage.value,
-        existing.meterage,
-      )
-      if (!revalidation.valid) {
-        return { success: false, message: revalidation.message }
-      }
+    if (existing) {
       existing.meterage = meterage
+      existing.catalogCode = catalogCode
+      existing.companyId = company.id
+      existing.companyName = company.name
     } else {
-      const item: CartItem = {
+      cart.items.push({
         id: generateId(),
         productId: product.id,
         catalogCode,
@@ -165,10 +207,12 @@ export const useCartStore = defineStore('cart', () => {
         color: product.color,
         meterage,
         unitPrice: product.basePrice,
-      }
-      activeCart.value.items.push(item)
+        companyId: company.id,
+        companyName: company.name,
+      })
     }
 
+    syncCartCompanyMeta(cart)
     persist()
     return { success: true }
   }
@@ -182,11 +226,15 @@ export const useCartStore = defineStore('cart', () => {
     const item = activeCart.value.items.find((i) => i.id === itemId)
     if (!item) return { success: false, message: 'آیتم یافت نشد.' }
 
+    const company = getCompanyById(item.companyId || product.companyId)
+    const companyMax = company?.maxMeteragePerInvoice ?? DEFAULT_MAX_METERAGE
+    const currentCompanyMeterage = companyMeterage(activeCart.value, item.companyId)
+
     const validation = validateMeterage(
       meterage,
       product,
-      totalMeterage.value,
-      maxMeterage.value,
+      currentCompanyMeterage,
+      companyMax,
       item.meterage,
     )
     if (!validation.valid) {
@@ -201,6 +249,7 @@ export const useCartStore = defineStore('cart', () => {
   function removeItem(itemId: string) {
     if (!activeCart.value) return
     activeCart.value.items = activeCart.value.items.filter((i) => i.id !== itemId)
+    syncCartCompanyMeta(activeCart.value)
     persist()
   }
 
@@ -224,15 +273,17 @@ export const useCartStore = defineStore('cart', () => {
     if (!cartWithItems) return
 
     activeCartId.value = cartWithItems.id
-    selectedCompanyId.value = cartWithItems.companyId
+    selectedCompanyId.value = selectedCompanyId.value || cartWithItems.companyId
     persist()
   }
 
   function hydrate() {
-    carts.value = loadCarts()
+    carts.value = migrateCartItems(loadCarts())
     activeCartId.value = loadActiveCartId()
     if (activeCart.value) {
-      selectedCompanyId.value = activeCart.value.companyId
+      syncCartCompanyMeta(activeCart.value)
+      selectedCompanyId.value = selectedCompanyId.value || activeCart.value.companyId
+      persist()
     }
   }
 
@@ -243,11 +294,12 @@ export const useCartStore = defineStore('cart', () => {
     activeCart,
     totalMeterage,
     itemCount,
+    companyNamesLabel,
     maxMeterage,
     remainingCapacity,
     isFull,
     initCartForCompany,
-    canSwitchToCompany,
+    selectCompany,
     createNewCartForSameCompany,
     addItem,
     updateItemMeterage,

src/types/index.ts

@@ -99,10 +99,13 @@ export interface CartItem {
   meterage: number
   unitPrice?: number
   notes?: string
+  companyId: string
+  companyName: string
 }
 
 export interface Cart {
   id: string
+  /** Primary / first company — cart may include items from other companies. */
   companyId: string
   companyName: string
   items: CartItem[]

src/views/cart/CartView.vue

@@ -20,7 +20,7 @@ const {
 } = useCartPage()
 
 function goToOrdering() {
-  const companyId = cartStore.activeCart?.companyId
+  const companyId = cartStore.selectedCompanyId || cartStore.activeCart?.companyId
   if (companyId) {
     router.push(`/companies/${companyId}/catalogs`)
     return

src/views/cart/components/DesktopCartPage.vue

@@ -67,7 +67,9 @@ const quickLinks = [
 
     <header class="cart-desktop-page__head">
       <h1 class="cart-desktop-page__title">سبد خرید</h1>
-      <p class="cart-desktop-page__subtitle">شرکت: {{ companyName || '—' }}</p>
+      <p class="cart-desktop-page__subtitle">
+        {{ companyName ? `شرکت‌ها: ${companyName}` : 'سبد خرید مشترک' }}
+      </p>
     </header>
 
     <div class="cart-desktop-page__layout">
@@ -104,6 +106,7 @@ const quickLinks = [
               <thead>
                 <tr>
                   <th scope="col">محصول</th>
+                  <th scope="col">شرکت</th>
                   <th scope="col">کد</th>
                   <th scope="col">متراژ (متر)</th>
                   <th scope="col">حذف</th>
@@ -114,6 +117,7 @@ const quickLinks = [
                   <td>
                     <strong class="cart-items-table__name">{{ item.productName }}</strong>
                   </td>
+                  <td>{{ item.companyName || '—' }}</td>
                   <td>{{ item.productCode }}</td>
                   <td>{{ formatNumber(item.meterage) }}</td>
                   <td>

src/views/cart/components/MobileCartPage.vue

@@ -36,7 +36,9 @@ const emit = defineEmits<{
     </header>
 
     <div v-if="!isEmpty" class="cart-mobile-page__body">
-      <p class="cart-mobile-page__company">شرکت : {{ companyName }}</p>
+      <p class="cart-mobile-page__company">
+        {{ companyName ? `شرکت‌ها: ${companyName}` : 'سبد خرید مشترک' }}
+      </p>
 
       <div class="cart-mobile-page__scroll">
         <div class="cart-mobile-table">
@@ -49,6 +51,7 @@ const emit = defineEmits<{
             <div class="col-product">
               <strong>{{ item.productName }}</strong>
               <span>کد: {{ item.productCode }}</span>
+              <span v-if="item.companyName" class="col-product__company">{{ item.companyName }}</span>
             </div>
             <div class="col-meterage">{{ formatNumber(item.meterage) }}</div>
             <div class="col-delete">
@@ -181,10 +184,17 @@ const emit = defineEmits<{
 }
 
 .col-product span {
+  display: block;
   font-size: 0.75rem;
   color: var(--color-text-muted);
 }
 
+.col-product__company {
+  margin-top: 2px;
+  color: var(--color-primary) !important;
+  font-weight: 600;
+}
+
 .col-meterage {
   text-align: center;
   font-weight: 700;

src/views/checkout/CashSettlementView.vue

@@ -16,8 +16,13 @@ const cartStore = useCartStore()
 const orderStore = useOrderStore()
 const authStore = useAuthStore()
 
-const companyId = computed(() => cartStore.activeCart?.companyId ?? '')
-const companyName = computed(() => cartStore.activeCart?.companyName ?? '')
+const companyId = computed(() => {
+  const firstItem = cartStore.activeCart?.items[0]
+  return firstItem?.companyId || cartStore.selectedCompanyId || cartStore.activeCart?.companyId || ''
+})
+const companyName = computed(
+  () => cartStore.companyNamesLabel || cartStore.activeCart?.companyName || '',
+)
 const bankAccounts = computed(() => orderStore.getBankAccountsForCompany(companyId.value))
 
 const expiryMessage = computed(() => {
@@ -27,7 +32,8 @@ const expiryMessage = computed(() => {
 })
 
 const accountsSectionTitle = computed(() => {
-  const name = companyName.value.replace(/^شرکت\s+/u, '')
+  const company = getCompanyById(companyId.value)
+  const name = (company?.name || companyName.value).replace(/^شرکت\s+/u, '')
   return `شماره حساب‌های شرکت ${name}`
 })
 

src/views/checkout/CheckListView.vue

@@ -9,6 +9,7 @@ import EmptyState from '@/components/ui/EmptyState.vue'
 import IconChevronBack from '@/components/icons/IconChevronBack.vue'
 import { formatCurrency, formatDate, formatNumber, toPersianDigits } from '@/utils/format'
 import { calculateCheckRass } from '@/utils/checkRass'
+import { confirm } from '@/composables/useConfirm'
 import type { CheckData } from '@/types'
 
 const route = useRoute()
@@ -68,9 +69,17 @@ function addAnother() {
   router.push('/checkout/check-form')
 }
 
-function removeCheck(id: string) {
-  orderStore.removeDraftCheck(id)
+async function removeCheck(id: string) {
   openMenuId.value = ''
+  const ok = await confirm({
+    title: 'حذف چک',
+    message: 'آیا از حذف این چک مطمئن هستید؟',
+    confirmLabel: 'حذف',
+    cancelLabel: 'انصراف',
+    tone: 'danger',
+  })
+  if (!ok) return
+  orderStore.removeDraftCheck(id)
 }
 
 function toggleMenu(id: string) {

src/views/companies/CompanySelectView.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCatalogStore } from '@/stores/catalog'
 import { useCartStore } from '@/stores/cart'
-import BaseButton from '@/components/ui/BaseButton.vue'
 import IconParLogo from '@/components/icons/IconParLogo.vue'
 import IconFamBaftLogo from '@/components/icons/IconFamBaftLogo.vue'
 import MobileCompanySelect from '@/views/companies/components/MobileCompanySelect.vue'
@@ -15,9 +13,6 @@ const catalogStore = useCatalogStore()
 const cartStore = useCartStore()
 
 const companies = catalogStore.getActiveCompanies()
-const showSwitchDialog = ref(false)
-const pendingCompanyId = ref<string | null>(null)
-const switchMessage = ref('')
 
 const displayMeta: Record<string, { description: string; logo: typeof IconParLogo }> = {
   par: { description: 'تولید و عرضه انواع پارچه', logo: IconParLogo },
@@ -25,28 +20,11 @@ const displayMeta: Record<string, { description: string; logo: typeof IconParLog
 }
 
 function selectCompany(companyId: string) {
-  const check = cartStore.canSwitchToCompany(companyId)
-  if (!check.allowed) {
-    pendingCompanyId.value = companyId
-    switchMessage.value = check.message ?? ''
-    showSwitchDialog.value = true
-    return
-  }
-  goToCompany(companyId)
-}
-
-function goToCompany(companyId: string) {
   const company = catalogStore.getCompany(companyId)
   if (!company) return
-  cartStore.initCartForCompany(company)
-  router.push(`/companies/${companyId}/catalogs`)
-}
 
-function confirmSwitch() {
-  if (pendingCompanyId.value) {
-    goToCompany(pendingCompanyId.value)
-  }
-  showSwitchDialog.value = false
+  cartStore.selectCompany(company)
+  router.push(`/companies/${companyId}/catalogs`)
 }
 
 function cardVariant(slug: string) {
@@ -80,28 +58,4 @@ function companyLogo(slug: string) {
     :company-logo="companyLogo"
     @select="selectCompany"
   />
-
-  <div v-if="showSwitchDialog" class="dialog-overlay" @click.self="showSwitchDialog = false">
-    <div class="dialog card">
-      <h3>تغییر شرکت</h3>
-      <p class="text-sm">{{ switchMessage }}</p>
-      <div class="dialog-actions">
-        <BaseButton variant="outline" @click="showSwitchDialog = false">انصراف</BaseButton>
-        <BaseButton @click="confirmSwitch">سبد جدید</BaseButton>
-      </div>
-    </div>
-  </div>
 </template>
-
-<style scoped>
-.dialog h3 {
-  margin: 0 0 12px;
-}
-
-@media (min-width: 768px) {
-  .dialog-actions {
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-}
-</style>

src/views/profile/ProfileDisplayView.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseButton from '@/components/ui/BaseButton.vue'
+import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
+
+const language = ref('fa')
+const currency = ref('irr')
+const density = ref('comfortable')
+const saved = ref(false)
+
+function save() {
+  saved.value = true
+  setTimeout(() => {
+    saved.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <ProfileSubpageLayout title="تنظیمات نمایش" subtitle="زبان، واحد پول و حالت نمایش">
+    <div class="display-form">
+      <label class="display-field">
+        <span class="display-field__label">زبان</span>
+        <select v-model="language" class="display-field__control">
+          <option value="fa">فارسی</option>
+          <option value="en">English</option>
+        </select>
+      </label>
+
+      <label class="display-field">
+        <span class="display-field__label">واحد پول</span>
+        <select v-model="currency" class="display-field__control">
+          <option value="irr">تومان</option>
+          <option value="rial">ریال</option>
+        </select>
+      </label>
+
+      <fieldset class="display-field">
+        <legend class="display-field__label">حالت نمایش</legend>
+        <div class="display-options">
+          <label class="display-option">
+            <input v-model="density" type="radio" value="comfortable" />
+            <span>راحت</span>
+          </label>
+          <label class="display-option">
+            <input v-model="density" type="radio" value="compact" />
+            <span>فشرده</span>
+          </label>
+        </div>
+      </fieldset>
+
+      <BaseButton block @click="save">ذخیره تنظیمات</BaseButton>
+      <p v-if="saved" class="display-saved">تنظیمات نمایش ذخیره شد ✓</p>
+    </div>
+  </ProfileSubpageLayout>
+</template>
+
+<style scoped>
+.display-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.display-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.display-field__label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.display-field__control {
+  width: 100%;
+  min-height: var(--btn-height);
+  padding: 0 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: 0.9375rem;
+}
+
+.display-field__control:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+
+.display-options {
+  display: flex;
+  gap: 12px;
+}
+
+.display-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.display-option:has(input:checked) {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+.display-option input {
+  accent-color: var(--color-primary);
+}
+
+.display-saved {
+  margin: 0;
+  font-size: 0.875rem;
+  text-align: center;
+  color: var(--color-success);
+}
+</style>

src/views/profile/ProfileNotificationsView.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseButton from '@/components/ui/BaseButton.vue'
+import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
+
+const emailOrders = ref(true)
+const emailChecks = ref(true)
+const smsOrders = ref(true)
+const smsMarketing = ref(false)
+const saved = ref(false)
+
+function save() {
+  saved.value = true
+  setTimeout(() => {
+    saved.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <ProfileSubpageLayout title="اعلان‌ها" subtitle="مدیریت اعلان‌های ایمیل و پیامک">
+    <div class="notify-list">
+      <label class="notify-row">
+        <span class="notify-row__text">
+          <strong>ایمیل وضعیت سفارش</strong>
+          <span>اطلاع از تأیید، ارسال و تکمیل سفارش</span>
+        </span>
+        <input v-model="emailOrders" type="checkbox" class="notify-row__switch" />
+      </label>
+
+      <label class="notify-row">
+        <span class="notify-row__text">
+          <strong>ایمیل سررسید چک</strong>
+          <span>یادآوری قبل از موعد چک‌های ثبت‌شده</span>
+        </span>
+        <input v-model="emailChecks" type="checkbox" class="notify-row__switch" />
+      </label>
+
+      <label class="notify-row">
+        <span class="notify-row__text">
+          <strong>پیامک وضعیت سفارش</strong>
+          <span>ارسال پیامک برای تغییر وضعیت سفارش</span>
+        </span>
+        <input v-model="smsOrders" type="checkbox" class="notify-row__switch" />
+      </label>
+
+      <label class="notify-row">
+        <span class="notify-row__text">
+          <strong>پیامک‌های تبلیغاتی</strong>
+          <span>تخفیف‌ها و پیشنهادهای ویژه</span>
+        </span>
+        <input v-model="smsMarketing" type="checkbox" class="notify-row__switch" />
+      </label>
+    </div>
+
+    <BaseButton block class="notify-save" @click="save">ذخیره تنظیمات</BaseButton>
+    <p v-if="saved" class="notify-saved">تنظیمات اعلان ذخیره شد ✓</p>
+  </ProfileSubpageLayout>
+</template>
+
+<style scoped>
+.notify-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.notify-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--color-border);
+  cursor: pointer;
+}
+
+.notify-row:last-of-type {
+  border-bottom: none;
+}
+
+.notify-row__text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.notify-row__text strong {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.notify-row__text span {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.notify-row__switch {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
+.notify-save {
+  margin-top: 16px;
+}
+
+.notify-saved {
+  margin: 8px 0 0;
+  font-size: 0.875rem;
+  text-align: center;
+  color: var(--color-success);
+}
+</style>

src/views/profile/ProfileSecurityView.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseInput from '@/components/ui/BaseInput.vue'
+import BaseButton from '@/components/ui/BaseButton.vue'
+import FormErrorBanner from '@/components/ui/FormErrorBanner.vue'
+import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
+import {
+  FORM_VALIDATION_SUMMARY,
+  clearFieldError,
+  hasFieldErrors,
+  type FieldErrors,
+} from '@/utils/formErrors'
+
+const currentPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const fieldErrors = ref<FieldErrors>({})
+const formError = ref('')
+const saved = ref(false)
+
+function clearField(key: string) {
+  fieldErrors.value = clearFieldError(fieldErrors.value, key)
+  if (!hasFieldErrors(fieldErrors.value)) formError.value = ''
+}
+
+function save() {
+  fieldErrors.value = {}
+  formError.value = ''
+  saved.value = false
+
+  const errors: FieldErrors = {}
+  if (!currentPassword.value) errors.currentPassword = 'رمز فعلی الزامی است.'
+  if (newPassword.value.length < 6) errors.newPassword = 'رمز جدید باید حداقل ۶ کاراکتر باشد.'
+  if (confirmPassword.value !== newPassword.value) {
+    errors.confirmPassword = 'تکرار رمز با رمز جدید یکسان نیست.'
+  }
+
+  if (hasFieldErrors(errors)) {
+    fieldErrors.value = errors
+    formError.value = FORM_VALIDATION_SUMMARY
+    return
+  }
+
+  currentPassword.value = ''
+  newPassword.value = ''
+  confirmPassword.value = ''
+  saved.value = true
+  setTimeout(() => {
+    saved.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <ProfileSubpageLayout title="امنیت حساب" subtitle="تغییر رمز عبور و تنظیمات ورود">
+    <FormErrorBanner :message="formError" />
+
+    <div class="settings-form">
+      <BaseInput
+        v-model="currentPassword"
+        type="password"
+        label="رمز عبور فعلی"
+        :error="fieldErrors.currentPassword"
+        @update:model-value="clearField('currentPassword')"
+      />
+      <BaseInput
+        v-model="newPassword"
+        type="password"
+        label="رمز عبور جدید"
+        :error="fieldErrors.newPassword"
+        @update:model-value="clearField('newPassword')"
+      />
+      <BaseInput
+        v-model="confirmPassword"
+        type="password"
+        label="تکرار رمز عبور جدید"
+        :error="fieldErrors.confirmPassword"
+        @update:model-value="clearField('confirmPassword')"
+      />
+      <BaseButton block @click="save">ذخیره رمز جدید</BaseButton>
+      <p v-if="saved" class="settings-form__saved">رمز عبور با موفقیت تغییر کرد ✓</p>
+    </div>
+  </ProfileSubpageLayout>
+</template>
+
+<style scoped>
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.settings-form__saved {
+  margin: 8px 0 0;
+  font-size: 0.875rem;
+  text-align: center;
+  color: var(--color-success);
+}
+</style>

src/views/profile/components/DesktopProfilePage.vue

@@ -106,21 +106,21 @@ const settingsItems: Array<{
     label: 'امنیت حساب',
     description: 'تغییر رمز عبور و تنظیمات ورود',
     icon: IconLock,
-    path: '/profile/edit',
+    path: '/profile/security',
   },
   {
     id: 'notifications',
     label: 'اعلان‌ها',
     description: 'مدیریت اعلان‌های ایمیل و پیامک',
     icon: IconBell,
-    path: '/profile/edit',
+    path: '/profile/notifications',
   },
   {
     id: 'display',
     label: 'تنظیمات نمایش',
     description: 'زبان، واحد پول و حالت نمایش',
     icon: IconLayoutGrid,
-    path: '/profile/edit',
+    path: '/profile/display',
   },
 ]
 

src/views/profile/components/ProfileSubpageLayout.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import IconChevronBack from '@/components/icons/IconChevronBack.vue'
+
+defineProps<{
+  title: string
+  subtitle?: string
+}>()
+
+const router = useRouter()
+
+function goBack() {
+  router.push('/profile')
+}
+</script>
+
+<template>
+  <!-- Mobile -->
+  <div class="page profile-subpage mobile-only">
+    <header class="profile-subpage__nav">
+      <button type="button" class="nav-btn" aria-label="بازگشت" @click="goBack">
+        <IconChevronBack :size="20" />
+      </button>
+      <h1 class="profile-subpage__title">{{ title }}</h1>
+      <button type="button" class="nav-btn nav-btn--ghost" aria-hidden="true" tabindex="-1">
+        <IconChevronBack :size="18" class="nav-btn__flip" />
+      </button>
+    </header>
+
+    <div class="page__scroll page__scroll--with-nav">
+      <div class="profile-subpage__card card">
+        <slot />
+      </div>
+    </div>
+  </div>
+
+  <!-- Desktop -->
+  <div class="desktop-page profile-subpage-desktop desktop-only">
+    <header class="desktop-page__head">
+      <button type="button" class="profile-subpage-desktop__back" @click="goBack">
+        <IconChevronBack :size="18" />
+        بازگشت به پروفایل
+      </button>
+      <h1 class="desktop-page__title">{{ title }}</h1>
+      <p v-if="subtitle" class="desktop-page__subtitle">{{ subtitle }}</p>
+    </header>
+
+    <div class="profile-subpage-desktop__card card">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-subpage {
+  overflow: hidden;
+}
+
+.profile-subpage__nav {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.profile-subpage__title {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.nav-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  color: var(--color-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.nav-btn--ghost {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.nav-btn__flip {
+  transform: scaleX(-1);
+}
+
+.profile-subpage__card {
+  padding: 20px 16px;
+}
+
+.profile-subpage-desktop__back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.profile-subpage-desktop__card {
+  max-width: 560px;
+  padding: 24px;
+}
+</style>