mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 00:02:15 +00:00
54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<div class="card shadow-card">
|
|
<FormLabel icon="bar-chart">
|
|
{{ $t('Usage Estimates') }}
|
|
</FormLabel>
|
|
|
|
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
|
{{ user.data.meta.usages.costEstimate }}
|
|
</b>
|
|
|
|
<b class="mb-3 block text-sm text-gray-400 mb-5">
|
|
{{ user.data.relationships.subscription.data.attributes.updated_at }} {{ $t('till now') }}
|
|
</b>
|
|
|
|
<div>
|
|
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
|
|
<div class="w-2/4 leading-none">
|
|
<b class="text-sm font-bold leading-none">
|
|
{{ $t(usage.feature) }}
|
|
</b>
|
|
<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
|
|
{{ $t(`feature_usage_desc_${usage.feature}`) }}
|
|
</small>
|
|
</div>
|
|
<div class="text-left w-1/4">
|
|
<span class="text-sm font-bold text-gray-560">
|
|
{{ usage.usage }}
|
|
</span>
|
|
</div>
|
|
<div class="text-right w-1/4">
|
|
<span class="text-sm font-bold text-theme">
|
|
{{ usage.cost }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import FormLabel from "../Others/Forms/FormLabel"
|
|
import {mapGetters} from "vuex";
|
|
|
|
export default {
|
|
name: 'UserUsageEstimates',
|
|
components: {
|
|
FormLabel
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user',
|
|
])
|
|
},
|
|
}
|
|
</script> |