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

init

Browse Source
This commit is contained in:
Vladimir Voronin
2024-10-24 17:32:14 +03:00
parent 41a6a15936
commit c5257376a3
52 changed files with 19652 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/budgets/BudgetList.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<div class="p-4">
<!-- Заголовок -->
<h2 class="text-4xl mb-6 mt-14 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 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"/>
</router-link>
</div>
<div class="text-sm text-gray-600 mb-4">
{{ budget.startDate }} - {{ budget.endDate }}
</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 flex items-center">
Unplanned Expenses:
<span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
<!-- Прогресс бар -->
<ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
</div>
</div>
</div>
<!-- Прошедшие бюджеты (забеленные) -->
<div v-for="budget in pastBudgets" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-gray-100 opacity-60">
<div class="text-xl font-bold mb-2">{{ budget.month }}</div>
<div class="text-sm text-gray-600 mb-4">
{{ budget.startDate }} - {{ budget.endDate }}
</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 flex items-center">
Unplanned Expenses:
<span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
<!-- Прогресс бар -->
<ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {ref} from 'vue';
import ProgressBar from 'primevue/progressbar';
import Button from "primevue/button";
export default {
components: {
ProgressBar,
Button
},
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,
};
},
};
</script>
<style scoped>
/* Стили для плиток и общего вида */
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>