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

<template>
  <div 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 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>