sfp_vue_franchisor_ginastica_cerebro/src/components/charts/FeriadosCard.vue

<template>
  <q-card flat class="feriados-card card-ring">
    <div class="flex justify-between items-center no-wrap q-mb-sm">
      <div class="flex items-center q-gutter-x-sm">
        <q-icon name="mdi-calendar-star-outline" color="dark" size="sm" />
        <span class="text-subtitle1">Feriados do Mês</span>
      </div>
      <q-btn
        icon="mdi-plus"
        color="primary"
        style="width: 40px; height: 40px"
        @click="openDialog"
      />
    </div>

    <q-separator />

    <div
      v-if="currentMonthHolidays.length === 0"
      class="text-caption text-grey-5 text-center q-mt-md"
    >
      Sem feriados para este mês.
    </div>

    <q-list v-else dense>
      <template v-for="(holiday, index) in currentMonthHolidays" :key="holiday.id">
        <q-item class="q-px-none person-item">
          <q-item-section avatar style="min-width: 36px">
            <div class="day-badge">{{ holiday.day }}</div>
          </q-item-section>
          <q-item-section>
            <q-item-label class="text-body2">{{ holiday.description }}</q-item-label>
            <q-item-label caption>{{ typeLabel(holiday.type) }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-separator v-if="index < currentMonthHolidays.length - 1" />
      </template>
    </q-list>
  </q-card>
</template>

<script setup>
import { ref, computed } from "vue";
import { useQuasar } from "quasar";
import FeriadosDialog from "src/pages/dashboard/components/FeriadosDialog.vue";

const $q = useQuasar();

const now = new Date();
const holidays = ref([]);

const currentMonthHolidays = computed(() =>
  holidays.value
    .filter((h) => h.month === now.getMonth() + 1 && h.year === now.getFullYear())
    .sort((a, b) => a.day - b.day),
);

function typeLabel(type) {
  return type === "facultativo" ? "Ponto Facultativo" : "Feriado";
}

function openDialog() {
  $q.dialog({
    component: FeriadosDialog,
    componentProps: { initialHolidays: holidays.value },
  }).onOk((updated) => {
    holidays.value = updated;
  });
}
</script>

<style scoped>
.feriados-card {
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  max-height: 370px;
  overflow: hidden;
}

.person-item {
  padding-top: 6px;
  padding-bottom: 6px;
}

.day-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e64a19;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
</style>