tehran_tala/apps/user-app-v2/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>

      <!-- D27 §12: the balance in the accounting software, re-read on every visit. -->
      <section v-if="balance && balance.source !== 'none'" class="prof__block">
        <SectionHead title="مانده‌ی حساب" :subtitle="balanceSubtitle" />
        <dl class="prof__specs">
          <div class="prof__spec">
            <dt>مانده‌ی طلا</dt>
            <dd :class="sideClass(balance.gold)">{{ grams(balance.gold) }} <small>{{ sideLabel(balance.gold) }}</small></dd>
          </div>
          <div class="prof__spec">
            <dt>مانده‌ی ریالی</dt>
            <dd :class="sideClass(balance.rial)">{{ rials(balance.rial) }} <small>{{ sideLabel(balance.rial) }}</small></dd>
          </div>
        </dl>
      </section>
      <section v-else-if="balanceLoading" class="prof__block">
        <SectionHead title="مانده‌ی حساب" subtitle="در حال دریافت از حسابداری…" />
        <div class="prof__specs prof__skeleton" />
      </section>

      <section v-else-if="!loading" class="prof__empty">
        <Icon icon="vuesax-linear:user" size="26" />
        <p>اطلاعات حساب در دسترس نیست.</p>
      </section>
      <!--
        "تکمیل پروفایل" — the reference showed this button here, on the profile,
        and only while sts_verify_step_two was neither 1 nor 2
        (henza_pwa .../components/profile.vue:96-102). The same condition holds
        here against the target VerificationStep enum.
      -->
      <button
        v-if="canCompleteProfile"
        type="button"
        class="prof__complete"
        @click="router.push({ name: 'completeProfile' })"
      >
        تکمیل پروفایل
      </button>
    </container>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
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 type { AccountingBalance, CustomerDetail } from '../../api/client'
import { useCachedReads } from '../../api/cachedReads'
import { KEYS } from '../../stores/queryCache'

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

const session = useSessionStore()
const reads = useCachedReads()
const customer = ref<CustomerDetail | null>(reads.peek<CustomerDetail>(KEYS.profile) ?? null)
const loading = ref(false)

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

/**
 * The reference gated the button on sts_verify_step_two being neither 1 nor 2,
 * i.e. show it only while the documents have not been submitted. STEP_TWO_
 * SUBMITTED and VERIFIED are those two states here.
 */
const canCompleteProfile = computed(() => {
  const step = customer.value?.verificationStep
  return Boolean(step) && step !== 'VERIFIED' && step !== 'STEP_TWO_SUBMITTED'
})

const router = useRouter()

// D27 §12 — fetched on its own, every time the page opens, so a slow
// accounting server never holds up the profile itself. The last copy fills the
// screen until the fresh one arrives.
const balance = ref<AccountingBalance | null>(reads.peek<AccountingBalance>(KEYS.balance) ?? null)
const balanceLoading = ref(false)

const num = (v: string | null) => Number(v ?? 0)
const sideLabel = (v: string | null) => (num(v) > 0 ? 'بدهکار' : num(v) < 0 ? 'بستانکار' : '')
const sideClass = (v: string | null) => (num(v) > 0 ? 'is-debt' : num(v) < 0 ? 'is-credit' : '')
const grams = (v: string | null) =>
  `${Math.abs(num(v)).toLocaleString('fa-IR', { maximumFractionDigits: 3 })} گرم`
const rials = (v: string | null) => `${Math.abs(num(v)).toLocaleString('fa-IR')} ریال`
const balanceSubtitle = computed(() => {
  const b = balance.value
  if (!b?.at) return ''
  const when = new Date(b.at).toLocaleString('fa-IR', { dateStyle: 'short', timeStyle: 'short' })
  return b.source === 'stored' ? `آخرین مانده‌ی ثبت‌شده — ${when}` : `از ${b.provider ?? 'حسابداری'} — ${when}`
})

async function loadBalance() {
  balanceLoading.value = !balance.value
  try {
    balance.value = await reads.accountingBalance({ force: true })
  } catch {
    balance.value = null
  } finally {
    balanceLoading.value = false
  }
}

onMounted(async () => {
  if (!session.isLoggedIn) return
  void loadBalance()
  loading.value = !customer.value
  try {
    customer.value = await reads.me({ force: true })
  } finally {
    loading.value = false
  }
})
</script>

<style scoped lang="less">
.prof {
  background: @page;
  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: alpha(@green, 10%);
}

.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__spec dd.is-debt {
  color: @wine;
}

.prof__spec dd.is-credit {
  color: @green;
}

.prof__spec dd small {
  font-weight: 500;
  font-size: 11px;
}

.prof__skeleton {
  height: 92px;
  background: @hairlineSoft;
}

.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;
}

.prof__complete {
  margin-top: 24px;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: @wine;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
</style>