Initial commit: Hedena Gold monorepo.
First commit of the Hedena Gold product (separate from gold-bank): branding, package names, and deploy defaults aligned to the new brand; legacy Henza trees stay local-only via .gitignore.
This commit is contained in:
s.esmaeili
@@ -0,0 +1,329 @@
|
||||
<!--
|
||||
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: 20px;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
background: @primary;
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user