luminic-front/src/components/budgets/BudgetList.vue

<template>
  <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 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.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">
          {{ formatDate(budget.budget.dateFrom) }} - {{ formatDate(budget.budget.dateTo) }}
        </div>
        <div class="mb-4">
          <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">{{ formatAmount(budget.totalIncomes - budget.totalExpenses) }} ₽</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 setup lang="ts">
import {onMounted, ref} from 'vue';
import ProgressBar from 'primevue/progressbar';
import {BudgetInfo} from "@/models/Budget";
import {getBudgetInfos} from "@/services/budgetsService";
import {formatAmount, formatDate} from "@/utils/utils";
import LoadingView from "@/components/LoadingView.vue";

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, // Прогресс в процентах
  },
  {
    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()

  loading.value = false
})
</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>