feat: complete application updates
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Copilot
@@ -1,12 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { onClickOutside, useEventListener } from '@vueuse/core'
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import BaseModal from '@/components/ui/BaseModal.vue'
|
||||
import { useSmsWalletSummary } from '@/composables/useSmsWalletSummary'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
import { dashboardApi, notificationsApi } from '@/services/api'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import { formatDateTime, formatNumber, toPersianDigits } from '@/utils/format'
|
||||
import { resolveAdminInboxLink } from '@/utils/inboxLinks'
|
||||
import { formatCardNumber, formatSheba } from '@/utils/smsFormat'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useThemeStore, type ThemePreference } from '@/stores/theme'
|
||||
import type { AdminNotification, InternalMessage } from '@/types'
|
||||
@@ -20,6 +24,9 @@ type OpenPanel = 'messages' | 'notifications' | 'theme' | null
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const theme = useThemeStore()
|
||||
const toast = useToast()
|
||||
const { summary: smsSummary, refresh: refreshSmsSummary } = useSmsWalletSummary()
|
||||
const chargeOpen = ref(false)
|
||||
const openPanel = ref<OpenPanel>(null)
|
||||
const actionsRef = ref<HTMLElement | null>(null)
|
||||
|
||||
@@ -135,6 +142,30 @@ function selectTheme(value: ThemePreference) {
|
||||
theme.setPreference(value)
|
||||
closePanel()
|
||||
}
|
||||
|
||||
const smsCreditTone = computed(() => {
|
||||
const row = smsSummary.value
|
||||
if (!row) return 'ok'
|
||||
if (row.blocked || row.balanceToman <= row.redThreshold) return 'danger'
|
||||
if (row.balanceToman <= row.yellowThreshold) return 'warn'
|
||||
return 'ok'
|
||||
})
|
||||
|
||||
function refreshSmsCredit() {
|
||||
void refreshSmsSummary().catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(refreshSmsCredit)
|
||||
useEventListener(window, 'focus', refreshSmsCredit)
|
||||
|
||||
async function copyDeposit(value: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(value.replace(/\s/g, ''))
|
||||
toast.success('کپی شد.')
|
||||
} catch {
|
||||
toast.error('کپی انجام نشد.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -151,6 +182,21 @@ function selectTheme(value: ThemePreference) {
|
||||
</div>
|
||||
|
||||
<div ref="actionsRef" class="admin-header__left">
|
||||
<div
|
||||
class="sms-credit"
|
||||
:class="smsSummary ? `sms-credit--${smsCreditTone}` : ''"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="sms-credit__charge"
|
||||
:disabled="!smsSummary"
|
||||
@click="chargeOpen = true"
|
||||
>
|
||||
شارژ
|
||||
</button>
|
||||
<span>اعتبار پیامک: {{ smsSummary ? formatNumber(smsSummary.balanceRial) : '—' }} ریال</span>
|
||||
<span v-if="smsSummary?.blocked">مسدود</span>
|
||||
</div>
|
||||
<div class="admin-header__dropdown">
|
||||
<button
|
||||
type="button"
|
||||
@@ -336,6 +382,36 @@ function selectTheme(value: ThemePreference) {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<BaseModal :open="chargeOpen" title="شارژ اعتبار پیامک" @close="chargeOpen = false">
|
||||
<div v-if="smsSummary" class="sms-charge">
|
||||
<p class="sms-charge__note">
|
||||
لطفا مبلغ مورد نظر خود جهت شارژ سامانه پیامکی را به شماره کارت یا حساب زیر واریز نمایید و تصویر فیش پرداختی را برای پشتیبانی بفرستید.
|
||||
</p>
|
||||
<div class="sms-charge__row">
|
||||
<button type="button" class="sms-charge__copy" @click="copyDeposit(smsSummary.deposit.cardNumber)">
|
||||
کپی
|
||||
</button>
|
||||
<div>
|
||||
<span>شماره کارت</span>
|
||||
<strong dir="ltr">{{ toPersianDigits(formatCardNumber(smsSummary.deposit.cardNumber)) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sms-charge__row">
|
||||
<button type="button" class="sms-charge__copy sms-charge__copy--sheba" @click="copyDeposit(smsSummary.deposit.sheba)">
|
||||
کپی
|
||||
</button>
|
||||
<div>
|
||||
<span>شماره شبا</span>
|
||||
<strong dir="ltr">{{ toPersianDigits(formatSheba(smsSummary.deposit.sheba)) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sms-charge__name">
|
||||
به نام
|
||||
<strong>{{ smsSummary.deposit.accountName }}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -725,5 +801,118 @@ function selectTheme(value: ThemePreference) {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sms-credit {
|
||||
max-width: 46vw;
|
||||
}
|
||||
|
||||
.sms-credit span:nth-child(2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.sms-credit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
max-width: 100%;
|
||||
padding: 4px 12px 4px 4px;
|
||||
border-radius: 999px;
|
||||
background: #e8f8ef;
|
||||
color: #067647;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sms-credit--warn {
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.sms-credit--danger {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.sms-credit__charge {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 4px 12px;
|
||||
background: #12b76a;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sms-credit--warn .sms-credit__charge {
|
||||
background: #f79009;
|
||||
}
|
||||
|
||||
.sms-credit--danger .sms-credit__charge {
|
||||
background: #f04438;
|
||||
}
|
||||
|
||||
.sms-charge__note {
|
||||
margin: 0 0 14px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
background: #eef6ff;
|
||||
color: #334155;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.sms-charge__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.sms-charge__row span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: var(--color-text-muted, #64748b);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.sms-charge__row strong {
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.sms-charge__copy {
|
||||
border: 1px solid #c4b5fd;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
background: #f5f3ff;
|
||||
color: #6d28d9;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sms-charge__copy--sheba {
|
||||
border-color: #a7f3d0;
|
||||
background: #ecfdf3;
|
||||
color: #067647;
|
||||
}
|
||||
|
||||
.sms-charge__name {
|
||||
margin: 4px 0 0;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.sms-charge__name strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ADMIN_NAV_ITEMS, isNavActive } from '@/utils/navigation'
|
||||
import { computed } from 'vue'
|
||||
import { isNavActive, navItemsForPhone } from '@/utils/navigation'
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
@@ -15,6 +16,8 @@ const emit = defineEmits<{
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const navItems = computed(() => navItemsForPhone(auth.session?.phone))
|
||||
const brandLogoUrl = `${import.meta.env.BASE_URL}brand-logo.png`
|
||||
|
||||
function navigate(path: string) {
|
||||
router.push(path)
|
||||
@@ -42,6 +45,7 @@ function logout() {
|
||||
:aria-hidden="!open"
|
||||
>
|
||||
<div class="admin-drawer__brand">
|
||||
<img :src="brandLogoUrl" alt="نادمی تکس" class="admin-drawer__logo" />
|
||||
<strong>پارچه</strong>
|
||||
<span>پنل مدیریت</span>
|
||||
<button type="button" class="admin-drawer__close" aria-label="بستن منو" @click="emit('close')">
|
||||
@@ -51,7 +55,7 @@ function logout() {
|
||||
|
||||
<nav class="admin-drawer__nav">
|
||||
<button
|
||||
v-for="item in ADMIN_NAV_ITEMS"
|
||||
v-for="item in navItems"
|
||||
:key="item.name"
|
||||
type="button"
|
||||
class="admin-drawer__item"
|
||||
@@ -78,6 +82,14 @@ function logout() {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.admin-drawer__logo {
|
||||
display: block;
|
||||
width: 92px;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
|
||||
.admin-drawer__brand strong {
|
||||
display: block;
|
||||
font-size: 1.0625rem;
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ADMIN_NAV_ITEMS, isNavActive } from '@/utils/navigation'
|
||||
import { computed } from 'vue'
|
||||
import { isNavActive, navItemsForPhone } from '@/utils/navigation'
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const navItems = computed(() => navItemsForPhone(auth.session?.phone))
|
||||
const brandLogoUrl = `${import.meta.env.BASE_URL}brand-logo.png`
|
||||
|
||||
function navigate(path: string) {
|
||||
router.push(path)
|
||||
@@ -21,13 +24,14 @@ function logout() {
|
||||
<template>
|
||||
<aside class="admin-sidebar" aria-label="ناوبری پنل مدیریت">
|
||||
<div class="admin-sidebar__brand">
|
||||
<img :src="brandLogoUrl" alt="نادمی تکس" class="admin-sidebar__logo" />
|
||||
<strong class="admin-sidebar__title">پارچه</strong>
|
||||
<span class="admin-sidebar__subtitle">پنل مدیریت</span>
|
||||
</div>
|
||||
|
||||
<nav class="admin-sidebar__nav">
|
||||
<button
|
||||
v-for="item in ADMIN_NAV_ITEMS"
|
||||
v-for="item in navItems"
|
||||
:key="item.name"
|
||||
type="button"
|
||||
class="admin-sidebar__item"
|
||||
@@ -64,6 +68,14 @@ function logout() {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.admin-sidebar__logo {
|
||||
display: block;
|
||||
width: 92px;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
|
||||
.admin-sidebar__title {
|
||||
display: block;
|
||||
font-size: 1.125rem;
|
||||
|
||||
Reference in New Issue
Block a user