luminic-space/luminic-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chet novoe

Browse Source
This commit is contained in:
Vladimir Voronin
2024-10-25 21:05:18 +03:00
parent f7b0ec50bf
commit f1573b9e30
7 changed files with 144 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/budgets/BudgetList.vue
View File

@@ -1,28 +1,29 @@
<template>
<div class="px-4 bg-gray-100 h-full ">
<LoadingView v-if="loading"/>
<div v-else class="px-4 bg-gray-100 h-full ">
<!-- Заголовок -->
<h2 class="text-4xl mb-6 font-bold">Monthly Budgets</h2>
<!-- Плитка с бюджетами -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Будущие и текущие бюджеты -->
<div v-for="budget in upcomingBudgets" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-white">
<div v-for="budget in budgetInfos" :key="budget.budget.id" class="p-4 shadow-lg rounded-lg bg-white" :class="budget.budget.dateTo < new Date() ? 'bg-gray-100 opacity-60' : ''">
<div class="flex flex-row justify-between">
<div class="text-xl font-bold mb-2">{{ budget.month }}</div>
<router-link to="/budgets/1">
<Button icon="pi pi-arrow-circle-right" rounded text size="large"/>
<div class="text-xl font-bold mb-2">{{ budget.budget.name }}</div>
<router-link :to="'/budgets/'+budget.budget.id">
<i class="pi pi-arrow-circle-right text-green-500" style="font-size: 1.5rem;"/>
</router-link>
</div>
<div class="text-sm text-gray-600 mb-4">
{{ budget.startDate }} - {{ budget.endDate }}
{{ formatDate(budget.budget.dateFrom) }} - {{ formatDate(budget.budget.dateTo) }}
</div>
<div class="mb-4">
<div class="text-sm">Total Income: <span class="font-bold">{{ budget.totalIncome }}</span></div>
<div class="text-sm">Total Expenses: <span class="font-bold">{{ budget.totalExpenses }}</span></div>
<div class="text-sm">Planned Expenses: <span class="font-bold">{{ budget.plannedExpenses }}</span></div>
<div class="text-sm">Total Income: <span class="font-bold">{{ formatAmount(budget.totalIncomes) }} ₽</span></div>
<div class="text-sm">Total Expenses: <span class="font-bold">{{ formatAmount(budget.totalExpenses) }} ₽</span></div>
<div class="text-sm">Planned Expenses: <span class="font-bold">{{ formatAmount(budget.totalExpenses) }} ₽</span></div>
<div class="text-sm flex items-center">
Unplanned Expenses:
<span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
<span class="ml-2 font-bold">{{ formatAmount(budget.totalIncomes - budget.totalExpenses) }} ₽</span>
<!-- Прогресс бар -->
<ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
</div>
@@ -51,73 +52,72 @@
</div>
</template>
<script lang="ts">
import {ref} from 'vue';
<script setup lang="ts">
import {onMounted, ref} from 'vue';
import ProgressBar from 'primevue/progressbar';
import Button from "primevue/button";
import {BudgetInfo} from "@/models/Budget";
import {getBudgetInfos} from "@/services/budgetsService";
import {formatAmount, formatDate} from "@/utils/utils";
import LoadingView from "@/components/LoadingView.vue";
export default {
components: {
ProgressBar,
Button
const loading = ref(false)
const budgetInfos = ref<BudgetInfo[]>([])
const upcomingBudgets = ref([
{
id: 1,
month: 'October 2024',
startDate: '2024-10-01',
endDate: '2024-10-31',
totalIncome: '500,000 RUB',
totalExpenses: '350,000 RUB',
plannedExpenses: '300,000 RUB',
remainingForUnplanned: '50,000 RUB',
unplannedProgress: 60, // Прогресс в процентах
},
setup() {
const upcomingBudgets = ref([
{
id: 1,
month: 'October 2024',
startDate: '2024-10-01',
endDate: '2024-10-31',
totalIncome: '500,000 RUB',
totalExpenses: '350,000 RUB',
plannedExpenses: '300,000 RUB',
remainingForUnplanned: '50,000 RUB',
unplannedProgress: 60, // Прогресс в процентах
},
{
id: 2,
month: 'November 2024',
startDate: '2024-11-01',
endDate: '2024-11-30',
totalIncome: '550,000 RUB',
totalExpenses: '320,000 RUB',
plannedExpenses: '250,000 RUB',
remainingForUnplanned: '70,000 RUB',
unplannedProgress: 50,
},
]);
const pastBudgets = ref([
{
id: 3,
month: 'September 2024',
startDate: '2024-09-01',
endDate: '2024-09-30',
totalIncome: '450,000 RUB',
totalExpenses: '400,000 RUB',
plannedExpenses: '350,000 RUB',
remainingForUnplanned: '50,000 RUB',
unplannedProgress: 90,
},
{
id: 4,
month: 'August 2024',
startDate: '2024-08-01',
endDate: '2024-08-31',
totalIncome: '400,000 RUB',
totalExpenses: '370,000 RUB',
plannedExpenses: '320,000 RUB',
remainingForUnplanned: '50,000 RUB',
unplannedProgress: 85,
},
]);
return {
upcomingBudgets,
pastBudgets,
};
{
id: 2,
month: 'November 2024',
startDate: '2024-11-01',
endDate: '2024-11-30',
totalIncome: '550,000 RUB',
totalExpenses: '320,000 RUB',
plannedExpenses: '250,000 RUB',
remainingForUnplanned: '70,000 RUB',
unplannedProgress: 50,
},
};
]);
const pastBudgets = ref([
{
id: 3,
month: 'September 2024',
startDate: '2024-09-01',
endDate: '2024-09-30',
totalIncome: '450,000 RUB',
totalExpenses: '400,000 RUB',
plannedExpenses: '350,000 RUB',
remainingForUnplanned: '50,000 RUB',
unplannedProgress: 90,
},
{
id: 4,
month: 'August 2024',
startDate: '2024-08-01',
endDate: '2024-08-31',
totalIncome: '400,000 RUB',
totalExpenses: '370,000 RUB',
plannedExpenses: '320,000 RUB',
remainingForUnplanned: '50,000 RUB',
unplannedProgress: 85,
},
]);
onMounted(async () => {
loading.value = true;
budgetInfos.value = await getBudgetInfos()
console.log(budgetInfos.value)
loading.value = false
})
</script>
<style scoped>