portal/app/resources/js/components/billing/BalanceCapacityIndicator.vue

<script setup lang="ts">
/**
 * Постоянная подсказка под балансом (Billing v2 Spec C §3.6, Task 1.10).
 *
 * Чистый presentational-компонент: показывает, на сколько дней хватит ёмкости
 * баланса (в лидах) при текущем дневном заказе всех eligible-проектов.
 * Зелёный — хватает на 3+ дня; жёлтый — меньше 3 дней; красный — не хватает.
 */
import { computed } from 'vue';

const props = defineProps<{
    /** Баланс в рублях (строка scale 2, например "1000.00"). */
    balanceRub: string;
    /** Сколько лидов покрывает баланс по текущему тарифу. */
    capacityLeads: number;
    /** Суммарный дневной заказ всех активных проектов (лидов/день). */
    requiredLeadsPerDay: number;
}>();

const daysLeft = computed(() =>
    props.requiredLeadsPerDay > 0 ? props.capacityLeads / props.requiredLeadsPerDay : Infinity,
);

const statusClass = computed(() => {
    if (props.requiredLeadsPerDay > 0 && props.capacityLeads < props.requiredLeadsPerDay) {
        return 'capacity-insufficient';
    }
    if (daysLeft.value < 3) return 'capacity-warning';
    return 'capacity-ok';
});

const daysLabel = computed(() => (Number.isFinite(daysLeft.value) ? daysLeft.value.toFixed(1) : '∞'));

// Разделитель тысяч + без лишних копеек: "1000.00" → "1 000".
const balanceFormatted = computed(() =>
    new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 0 }).format(parseFloat(props.balanceRub) || 0),
);
</script>

<template>
    <div
        class="balance-capacity text-body-2"
        :class="statusClass"
        data-testid="balance-capacity-indicator"
        data-tour="billing-capacity"
    >
        <div>Баланс: {{ balanceFormatted }} ₽ = до {{ capacityLeads }} лидов по тарифу</div>
        <div>Проекты заказывают: {{ requiredLeadsPerDay }} лидов в день</div>
        <div v-if="statusClass === 'capacity-insufficient'" class="capacity-note">
            <v-icon size="14" class="mr-1">mdi-alert-outline</v-icon>Не хватает — пополните счёт
        </div>
        <div v-else-if="statusClass === 'capacity-warning'" class="capacity-note">
            Хватит на ~{{ daysLabel }} дн. — скоро потребуется пополнение
        </div>
        <div v-else class="capacity-note">
            <v-icon size="14" class="mr-1">mdi-check-circle-outline</v-icon>Хватит на ~{{ daysLabel }} дн.
        </div>
    </div>
</template>

<style scoped>
.balance-capacity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}
.capacity-note {
    font-weight: 600;
}
.capacity-ok .capacity-note {
    color: rgb(var(--v-theme-success));
}
.capacity-warning .capacity-note {
    color: rgb(var(--v-theme-warning));
}
.capacity-insufficient .capacity-note {
    color: rgb(var(--v-theme-error));
}
</style>