fabric_trade_user/src/views/profile/components/MobileProfilePage.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useOrderStore } from '@/stores/order'
import IconChevronLeft from '@/components/icons/IconChevronLeft.vue'
import IconProfile from '@/components/icons/IconProfile.vue'
import IconCheckBook from '@/components/icons/IconCheckBook.vue'
import IconOrders from '@/components/icons/IconOrders.vue'

const router = useRouter()
const auth = useAuthStore()
const orderStore = useOrderStore()

const initials = computed(() => {
  const first = auth.user?.firstName?.[0] ?? ''
  const last = auth.user?.lastName?.[0] ?? ''
  return `${first}${last}` || '؟'
})

const draftCheckCount = computed(() => orderStore.draftChecks.length)

const menuItems = computed(() => [
  {
    id: 'edit',
    label: 'اطلاعات کاربری',
    description: 'نام، نام خانوادگی و کد ملی',
    path: '/profile/edit',
    icon: IconProfile,
  },
  {
    id: 'checks',
    label: 'لیست چک‌ها',
    description: 'چک‌های ثبت‌شده و رأس چک',
    path: '/profile/checks',
    icon: IconCheckBook,
    badge: draftCheckCount.value,
  },
  {
    id: 'orders',
    label: 'سفارش‌های من',
    description: 'پیگیری وضعیت سفارش‌ها',
    path: '/orders',
    icon: IconOrders,
  },
])

const emit = defineEmits<{ logout: [] }>()
</script>

<template>
  <div class="page profile-page">
    <div class="profile-hero">
      <div class="profile-hero__avatar">{{ initials }}</div>
      <h1 class="profile-hero__name">{{ auth.fullName }}</h1>
      <p class="profile-hero__phone" dir="ltr">{{ auth.user?.phone }}</p>
    </div>

    <div class="page__scroll page__scroll--with-nav profile-page__scroll">
      <nav class="profile-menu" aria-label="منوی پروفایل">
        <button
          v-for="item in menuItems"
          :key="item.id"
          type="button"
          class="profile-menu__item"
          @click="router.push(item.path)"
        >
          <span class="profile-menu__icon">
            <component :is="item.icon" :size="22" />
          </span>
          <span class="profile-menu__content">
            <strong class="profile-menu__label">{{ item.label }}</strong>
            <span class="profile-menu__desc">{{ item.description }}</span>
          </span>
          <span v-if="item.badge" class="profile-menu__badge">{{ item.badge }}</span>
          <IconChevronLeft :size="18" class="profile-menu__chevron" />
        </button>
      </nav>

      <button type="button" class="profile-logout" @click="emit('logout')">خروج از حساب</button>
    </div>
  </div>
</template>

<style scoped>
.profile-page {
  overflow: hidden;
  padding-top: 0;
  background: var(--color-bg);
}

.profile-hero {
  flex-shrink: 0;
  margin: 0 calc(-1 * var(--page-padding));
  padding: calc(28px + env(safe-area-inset-top, 0)) var(--page-padding) 32px;
  background: linear-gradient(160deg, var(--color-primary) 0%, #2a4a73 100%);
  text-align: center;
  color: #fff;
}

.profile-hero__avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.profile-hero__name {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
}

.profile-hero__phone {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.profile-page__scroll {
  margin-top: -18px;
  padding-top: 0;
}

.profile-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.profile-menu__item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: right;
  transition: box-shadow 0.15s;
}

.profile-menu__item:hover {
  box-shadow: var(--shadow-md);
}

.profile-menu__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-menu__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-menu__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
}

.profile-menu__desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.profile-menu__badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-menu__chevron {
  color: var(--color-text-muted);
  transform: scaleX(-1);
}

.profile-logout {
  width: 100%;
  height: var(--btn-height);
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff;
  color: var(--color-danger);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}

.profile-logout:hover {
  background: var(--color-danger-light);
}
</style>