radicall/resources/js/Client/Pages/Dashboard/Wallet/Index.vue

<script setup>
import { computed, ref } from 'vue';
import { usePage } from '@inertiajs/inertia-vue3';
import { toast } from 'vue3-toastify';
import ClientLayout from '../../../layouts/ClientLayout.vue';
import TableGeneric from '../../../components/ui/TableGeneric.vue';
import UiCard from '../../../components/ui/UiCard.vue';
import UiInput from '../../../components/ui/UiInput.vue';
import UiButton from '../../../components/ui/UiButton.vue';
import WalletSvg from '../../../components/svg/wallet.svg';
import WithdrawRequestCard from '../../../components/dashboard/wallet/WithdrawRequestCard.vue';
import { walletTransactionColumns } from '../../../data/walletTransactionsTableColumns';
import { withdrawRequestColumns } from '../../../data/withdrawRequestsTableColumns';
import { convertEnglishToPersian, convertPersianToEnglish, formatPrice } from '../../../utils/numberUtils';

const props = defineProps({
    transactions: {
        type: Object,
        required: true
    },
    withdrawRequests: {
        type: Array,
        required: true
    },
    bankCards: {
        type: Array,
        required: true
    }
});

const { props: pageProps } = usePage();

const quickAmounts = [100000, 200000, 500000];

const amount = ref('');
const depositing = ref(false);

const numericAmount = computed(() => Number(convertPersianToEnglish(amount.value).replace(/\D/g, '')) || 0);

const formattedBalance = computed(() => formatPrice(pageProps.value.auth?.wallet_balance || 0));

const pendingWithdrawAmount = computed(() => props.withdrawRequests
    .filter((request) => request.status === 'در انتظار بررسی')
    .reduce((sum, request) => sum + request.amount, 0));

const withdrawStatusClasses = (status) => {
    if (status === 'تایید شده') {
        return 'text-[#1F7A4D] bg-[#E6F4EC]';
    }

    if (status === 'رد شده') {
        return 'text-[#7A1419] bg-[#F8E9EA]';
    }

    return 'text-[#576989] bg-[#EEF2F8]';
};

const formatCardNumber = (cardNumber) => convertEnglishToPersian(cardNumber.replace(/(\d{4})(?=\d)/g, '$1 - '));

const selectQuickAmount = (value) => {
    amount.value = String(value);
};

const handleDeposit = async () => {
    if (numericAmount.value < 10000) {
        toast.error('حداقل مبلغ شارژ ۱۰٬۰۰۰ تومان است.');
        return;
    }

    depositing.value = true;
    try {
        const { data } = await window.axios.post('/dashboard/wallet/deposit', { amount: numericAmount.value });
        window.location.href = data.url;
    } catch (error) {
        depositing.value = false;
        toast.error(error.response?.data?.message || 'خطا در اتصال به درگاه پرداخت. لطفا دوباره تلاش کنید.');
    }
};
</script>

<template>
    <ClientLayout>
        <div class="flex flex-col gap-4">
            <UiCard title="کیف پول" variant="default">
                <div class="grid grid-cols-2 max-sm:grid-cols-1 gap-4">
                    <div class="flex items-center gap-3 bg-[#EEF2F8] border border-[#DEE3EB] rounded-[12px] px-5 py-4">
                        <WalletSvg class="w-6 h-6" />
                        <div class="flex flex-col gap-1">
                            <span class="text-[11px] font-normal text-[#576989]">موجودی کیف پول</span>
                            <strong class="text-[16px] font-bold text-[#3E4C63]">{{ formattedBalance }} تومان</strong>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 bg-[#F8FAFC] border border-[#DEE3EB] rounded-[12px] px-5 py-4">
                        <div class="flex flex-col gap-1">
                            <span class="text-[11px] font-normal text-[#576989]">مبلغ در انتظار برداشت</span>
                            <strong class="text-[16px] font-bold text-[#3E4C63]">{{ formatPrice(pendingWithdrawAmount) }} تومان</strong>
                        </div>
                    </div>
                </div>
            </UiCard>

            <UiCard title="شارژ کیف پول" variant="default">
                <form class="flex flex-col gap-4" @submit.prevent="handleDeposit">
                    <p class="text-[11px] font-normal text-[#576989] leading-6">
                        مبلغ مورد نظر را وارد کنید؛ پس از پرداخت از طریق درگاه بانکی، موجودی کیف پول شما بلافاصله افزایش می‌یابد.
                    </p>
                    <div class="flex items-end gap-3 max-sm:flex-col max-sm:items-stretch">
                        <UiInput
                            v-model="amount"
                            label="مبلغ شارژ"
                            placeholder="مبلغ مورد نظر را به تومان وارد کنید"
                            prefixEnd="تومان"
                            prefixClasses="!border-dominant-50"
                            class="!w-[22rem] max-sm:!w-full"
                            customClass="!border-dominant-50 !font-normal !text-[12px]"
                        />
                        <UiButton
                            label="افزایش موجودی"
                            severity="success"
                            size="small"
                            :loading="depositing"
                            :disabled="depositing"
                            @click="handleDeposit"
                        />
                    </div>

                    <div class="flex items-center gap-2 flex-wrap">
                        <button
                            v-for="value in quickAmounts"
                            :key="value"
                            type="button"
                            class="text-[11px] font-normal text-[#576989] bg-[#F5F7FA] border border-[#DEE3EB] rounded-lg px-3 py-1.5 hover:bg-[#EEF2F8]"
                            @click="selectQuickAmount(value)"
                        >
                            {{ formatPrice(value) }} تومان
                        </button>
                    </div>
                </form>
            </UiCard>

            <WithdrawRequestCard :bank-cards="bankCards" />

            <UiCard title="درخواست‌های برداشت" variant="default">
                <TableGeneric
                    class="bg-white !rounded-2xl"
                    :data="withdrawRequests"
                    customStyle="!text-[11px] !font-normal"
                    :searchable="false"
                    :columns="withdrawRequestColumns"
                    :selectable="false"
                    :pagination="null"
                    :model-value="[]"
                >
                    <template #column-bank_card="{ data }">
                        <span v-if="data.bank_card" dir="ltr">{{ formatCardNumber(data.bank_card.card_number) }}</span>
                        <span v-else>-</span>
                    </template>
                    <template #column-status="{ data }">
                        <span class="text-[11px] font-normal rounded-md px-2 py-1" :class="withdrawStatusClasses(data.status)">
                            {{ data.status }}
                        </span>
                    </template>
                </TableGeneric>
            </UiCard>

            <UiCard title="تراکنش‌ها" variant="default">
                <TableGeneric
                    class="bg-white !rounded-2xl"
                    :data="transactions.data"
                    customStyle="!text-[11px] !font-normal"
                    :searchable="false"
                    :columns="walletTransactionColumns"
                    :selectable="false"
                    :pagination="transactions.meta"
                    :model-value="[]"
                >
                    <template #column-type="{ data }">
                        <span
                            class="text-[11px] font-normal rounded-md px-2 py-1"
                            :class="data.type === 'واریز' ? 'text-[#1F7A4D] bg-[#E6F4EC]' : 'text-[#7A1419] bg-[#F8E9EA]'"
                        >
                            {{ data.type }}
                        </span>
                    </template>
                </TableGeneric>
            </UiCard>
        </div>
    </ClientLayout>
</template>