74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<template>
|
|
<div class="animate-fade-slide-in">
|
|
<FilterBar
|
|
title="КАТЕГОРИИ"
|
|
:groups="filterGroups"
|
|
v-model="filters"
|
|
/>
|
|
|
|
<div class="content-swap mb-5" :class="cardsClass">
|
|
<div class="grid grid-cols-4 gap-3">
|
|
<KpiCard
|
|
v-for="card in visibleCards"
|
|
:key="card.key"
|
|
v-bind="card"
|
|
:change-up="true"
|
|
:small-value="true"
|
|
@click="onCardClick(card.key)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DetailPanel
|
|
:open="detailOpen"
|
|
:title="detailData?.title || ''"
|
|
:columns="detailData?.head || []"
|
|
:rows="detailData?.rows || []"
|
|
:summary="detailData?.sum || ''"
|
|
@close="closeDetail"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from "vue"
|
|
import FilterBar from "@/components/shared/FilterBar.vue"
|
|
import KpiCard from "@/components/shared/KpiCard.vue"
|
|
import DetailPanel from "@/components/shared/DetailPanel.vue"
|
|
import { useStore } from "@/data/store"
|
|
import { useContentSwap } from "@/utils/useContentSwap"
|
|
|
|
const { D } = useStore()
|
|
const { cardsClass, detailOpen, openDetail, closeDetail } = useContentSwap()
|
|
|
|
const filters = ref({})
|
|
const detailData = ref(null)
|
|
|
|
const filterGroups = [
|
|
{
|
|
chips: [
|
|
{ key: "rates", label: "Ставки" },
|
|
{ key: "social", label: "Взносы" },
|
|
{ key: "limits", label: "Лимиты" },
|
|
{ key: "inspection", label: "Инспекция" },
|
|
],
|
|
},
|
|
]
|
|
|
|
const allCards = [
|
|
{ key: "rates", label: "Налоговые ставки", value: "ВКРП", subtitle: "9 налогов · ставки 2026", change: "📊", status: "normal" },
|
|
{ key: "social", label: "Соц. взносы", value: "DSMF·İTS", subtitle: "3 вида · работодатель + работник", change: "💰", status: "normal" },
|
|
{ key: "limits", label: "Пороги и лимиты", value: "₼400", subtitle: "МЗП · ƏDV порог · льготы", change: "📋", status: "normal" },
|
|
{ key: "inspection", label: "Инспекция", value: "Risk", subtitle: "пороги · дедлайны · частота", change: "🔍", status: "normal" },
|
|
]
|
|
|
|
const visibleCards = computed(() =>
|
|
allCards.filter((c) => filters.value[c.key] !== false)
|
|
)
|
|
|
|
function onCardClick(key) {
|
|
detailData.value = D.region[key] || null
|
|
if (detailData.value) openDetail()
|
|
}
|
|
</script>
|