tehran_taj/apps/user-app/src/views/user/ProfileView.vue

<!--
  Ported from legacy henza_pwa/src/views/user/src/components/profile.vue,
  restyled into the redesigned design language (see components/home/* and
  HomeView).

  Heavily simplified when first ported, and still is — legacy's original (971
  lines, the largest view in the app) is a full edit form (bank info, KYC
  document uploads, sub-user management for banker accounts). None of that has
  a backend to back it: there's no update-customer endpoint, no
  document-upload endpoint, and (as in DashboardView) no banker/sub-account
  concept in the new Customer model at all. Kept: the real read-only info
  card, all backed by fields the API genuinely returns.

  DROPPED, unchanged from the previous version: "تکمیل پروفایل", the
  "افزودن کاربر" sub-user FAB, and the "کارشناس فروش" contact card — that last
  one needs the referring AdminUser's name/mobile, which GET /customers/:id
  does not expose (only referredByAgentId, a bare id).
-->
<template>
  <div class="prof">
    <PageBar title="اطلاعات کاربری" back-to="userPage::hasSubRoute" />

    <container class="prof__body">
      <!-- Identity -->
      <section class="prof__identity">
        <div class="prof__avatar" aria-hidden="true">
          <Icon icon="vuesax-linear:user" size="30" />
        </div>
        <h2 class="prof__name">{{ customer?.fullName ?? '—' }}</h2>
        <p v-if="customer" class="prof__mobile">{{ customer.mobile }}</p>
        <span v-if="customer" class="prof__seal" :class="isVerified ? 'is-ok' : 'is-pending'">
          {{ VERIFICATION_LABELS[customer.verificationStep] ?? customer.verificationStep }}
        </span>
      </section>

      <!-- Real, read-only fields -->
      <section v-if="customer" class="prof__block">
        <SectionHead title="مشخصات" subtitle="اطلاعات ثبت‌شده حساب شما" />
        <dl class="prof__specs">
          <div class="prof__spec">
            <dt>نام و نام خانوادگی</dt>
            <dd>{{ customer.fullName }}</dd>
          </div>
          <div class="prof__spec">
            <dt>تلفن همراه</dt>
            <dd>{{ customer.mobile }}</dd>
          </div>
          <div class="prof__spec">
            <dt>کد ملی</dt>
            <dd>{{ customer.nationalCode }}</dd>
          </div>
          <div class="prof__spec">
            <dt>وضعیت احراز هویت</dt>
            <dd>{{ VERIFICATION_LABELS[customer.verificationStep] ?? customer.verificationStep }}</dd>
          </div>
        </dl>
      </section>

      <section v-else-if="!loading" class="prof__empty">
        <Icon icon="vuesax-linear:user" size="26" />
        <p>اطلاعات حساب در دسترس نیست.</p>
      </section>
    </container>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import SectionHead from '../../components/home/SectionHead.vue'
import { useSessionStore } from '../../stores/session'
import { api, type CustomerDetail } from '../../api/client'

const VERIFICATION_LABELS: Record<string, string> = {
  UNVERIFIED: 'احراز نشده',
  STEP_ONE_SUBMITTED: 'مرحله اول ثبت شده',
  STEP_TWO_SUBMITTED: 'مرحله دوم ثبت شده',
  VERIFIED: 'تایید شده',
}

const session = useSessionStore()
const customer = ref<CustomerDetail | null>(null)
const loading = ref(false)

const isVerified = computed(() => customer.value?.verificationStep === 'VERIFIED')

onMounted(async () => {
  if (!session.isLoggedIn) return
  loading.value = true
  try {
    customer.value = await api.getMe()
  } finally {
    loading.value = false
  }
})
</script>

<style scoped lang="less">
.prof {
  background: @canvas;
  min-height: 100vh;
}

.prof__body {
  padding-top: 80px;
  padding-bottom: 90px;
}

.prof__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 20px 28px;
  border: 1px solid @hairline;
  border-radius: 20px;
  background: @canvasSoft;
}

.prof__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: @wine;
  background: @wineWash;
}

.prof__name {
  margin: 14px 0 0;
  font-size: 15.5px;
  font-weight: 800;
  color: @ink;
}

.prof__mobile {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: @inkMuted;
  direction: ltr;
}

.prof__seal {
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.prof__seal.is-ok {
  color: @green;
  background: #f0fdf4;
}

.prof__seal.is-pending {
  color: @wine;
  background: @wineWash;
}

.prof__block {
  margin-top: 26px;
}

.prof__specs {
  margin: 0;
  border: 1px solid @hairline;
  border-radius: 18px;
  overflow: hidden;
}

.prof__spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid @hairlineSoft;
}

.prof__spec:last-child {
  border-bottom: 0;
}

.prof__spec dt {
  margin: 0;
  font-size: 12px;
  color: @inkFaint;
}

.prof__spec dd {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: @ink;
  text-align: left;
}

.prof__empty {
  margin-top: 26px;
  padding: 34px 20px;
  border: 1px dashed @hairline;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: @inkFaint;
}
.prof__empty p {
  margin: 0;
  font-size: 12.5px;
}
</style>