feat: adiciona dialog de feriados para franqueadora.

src/components/charts/FeriadosCard.vue

@@ -1,28 +1,100 @@
 <template>
   <q-card flat class="feriados-card card-ring">
-    <div class="flex justify-between items-center no-wrap">
+    <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>
-      <div class="flex items-center no-wrap" style="gap: 8px">
-        <q-btn
-          icon="mdi-plus"
-          color="primary"
-          style="width: 40px; height: 40px"
-        />
-      </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></script>
+<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: 14px;
+  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>

src/pages/dashboard/components/FeriadosDialog.vue

@@ -0,0 +1,385 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin feriados-dialog">
+      <template v-if="view === 'calendar'">
+        <DefaultDialogHeader title="Feriados" @close="onClose" />
+
+        <q-card-section class="row q-col-gutter-md q-pt-none">
+          <div class="col-12 col-sm-7">
+            <div class="row items-center justify-between q-mb-md">
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-chevron-left"
+                color="grey-7"
+                @click="prevMonth"
+              />
+              <div class="row items-center q-gutter-xs">
+                <q-select
+                  v-model="currentMonth"
+                  :options="monthOptions"
+                  emit-value
+                  map-options
+                  dense
+                  outlined
+                  style="min-width: 100px"
+                />
+                <q-select
+                  v-model="currentYear"
+                  :options="yearOptions"
+                  emit-value
+                  map-options
+                  dense
+                  outlined
+                  style="min-width: 80px"
+                />
+              </div>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-chevron-right"
+                color="grey-7"
+                @click="nextMonth"
+              />
+            </div>
+
+            <div class="calendar-grid q-mb-xs">
+              <div
+                v-for="day in weekDays"
+                :key="day"
+                class="cal-header text-caption text-grey-6 text-center text-weight-medium"
+              >
+                {{ day }}
+              </div>
+            </div>
+
+            <div class="calendar-grid">
+              <div
+                v-for="(cell, index) in calendarCells"
+                :key="index"
+                class="cal-cell"
+                :class="{
+                  'cal-cell--empty': !cell.day,
+                  'cal-cell--holiday': cell.isHoliday,
+                }"
+                @click="cell.day && !cell.isHoliday && openNewRecord(cell.day)"
+              >
+                <span v-if="cell.day" class="cal-cell__number">{{ cell.day }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-5">
+            <div class="text-subtitle2 q-mb-sm">Resumo</div>
+            <q-separator class="q-mb-sm" />
+
+            <div
+              v-if="monthHolidays.length === 0"
+              class="text-caption text-grey-5 text-center q-mt-lg q-px-sm"
+            >
+              Clique em um dia no calendário para adicionar um registro.
+            </div>
+
+            <q-list v-else separator>
+              <q-item
+                v-for="holiday in monthHolidays"
+                :key="holiday.id"
+                class="q-pa-sm"
+              >
+                <q-item-section avatar>
+                  <q-avatar
+                    size="36px"
+                    color="deep-orange"
+                    text-color="white"
+                    class="text-weight-bold"
+                  >
+                    {{ holiday.day }}
+                  </q-avatar>
+                </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-section side>
+                  <q-btn
+                    flat
+                    round
+                    dense
+                    icon="mdi-trash-can-outline"
+                    color="grey-5"
+                    size="sm"
+                    @click="removeHoliday(holiday)"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+
+            <div
+              v-if="monthHolidays.length > 0"
+              class="text-caption text-grey-5 text-center q-mt-md q-px-sm"
+            >
+              Clique em um dia no calendário para adicionar um registro.
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn outline color="primary" label="FECHAR" no-caps @click="onClose" />
+        </q-card-actions>
+      </template>
+
+      <template v-else>
+        <DefaultDialogHeader
+          :title="`Novo Registro: ${formattedSelectedDate}`"
+          @close="cancelNewRecord"
+        />
+
+        <q-card-section class="column q-gutter-md q-pt-sm">
+          <DefaultInput
+            v-model="newDescription"
+            label="Nome do Evento"
+            placeholder="Ex: Ponto facultativo, Natal..."
+            icon="mdi-pencil-outline"
+            outlined
+            autofocus
+          />
+
+          <DefaultSelect
+            v-model="newType"
+            label="Selecione o Tipo."
+            :options="typeOptions"
+            emit-value
+            map-options
+            outlined
+          />
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn outline color="primary" label="CANCELAR" no-caps @click="cancelNewRecord" />
+          <q-btn
+            unelevated
+            color="primary"
+            label="SALVAR"
+            no-caps
+            :disable="!newDescription.trim()"
+            @click="saveNewRecord"
+          />
+        </q-card-actions>
+      </template>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
+
+const now = new Date();
+const currentMonth = ref(now.getMonth() + 1);
+const currentYear = ref(now.getFullYear());
+
+const view = ref("calendar");
+const selectedDay = ref(null);
+const newDescription = ref("");
+const newType = ref("feriado");
+
+const props = defineProps({
+  initialHolidays: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+let nextId = props.initialHolidays.length
+  ? Math.max(...props.initialHolidays.map((h) => h.id)) + 1
+  : 1;
+const holidays = ref([...props.initialHolidays]);
+
+const weekDays = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
+
+const monthOptions = [
+  { label: "Jan", value: 1 },
+  { label: "Fev", value: 2 },
+  { label: "Mar", value: 3 },
+  { label: "Abr", value: 4 },
+  { label: "Mai", value: 5 },
+  { label: "Jun", value: 6 },
+  { label: "Jul", value: 7 },
+  { label: "Ago", value: 8 },
+  { label: "Set", value: 9 },
+  { label: "Out", value: 10 },
+  { label: "Nov", value: 11 },
+  { label: "Dez", value: 12 },
+];
+
+const typeOptions = [
+  { label: "Feriado", value: "feriado" },
+  { label: "Ponto Facultativo", value: "facultativo" },
+];
+
+const yearOptions = computed(() => {
+  const base = now.getFullYear();
+  return Array.from({ length: 7 }, (_, i) => {
+    const y = base - 2 + i;
+    return { label: String(y), value: y };
+  });
+});
+
+const monthHolidays = computed(() =>
+  holidays.value
+    .filter((h) => h.month === currentMonth.value && h.year === currentYear.value)
+    .sort((a, b) => a.day - b.day),
+);
+
+const calendarCells = computed(() => {
+  const year = currentYear.value;
+  const month = currentMonth.value;
+  const firstDay = new Date(year, month - 1, 1).getDay();
+  const daysInMonth = new Date(year, month, 0).getDate();
+  const holidayDays = new Set(monthHolidays.value.map((h) => h.day));
+
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push({ day: null, isHoliday: false });
+  for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, isHoliday: holidayDays.has(d) });
+  return cells;
+});
+
+const formattedSelectedDate = computed(() => {
+  if (!selectedDay.value) return "";
+  const dd = String(selectedDay.value).padStart(2, "0");
+  const mm = String(currentMonth.value).padStart(2, "0");
+  return `${dd}/${mm}/${currentYear.value}`;
+});
+
+function typeLabel(type) {
+  return type === "facultativo" ? "Ponto Facultativo" : "Feriado";
+}
+
+function prevMonth() {
+  if (currentMonth.value === 1) {
+    currentMonth.value = 12;
+    currentYear.value -= 1;
+  } else {
+    currentMonth.value -= 1;
+  }
+}
+
+function nextMonth() {
+  if (currentMonth.value === 12) {
+    currentMonth.value = 1;
+    currentYear.value += 1;
+  } else {
+    currentMonth.value += 1;
+  }
+}
+
+function openNewRecord(day) {
+  selectedDay.value = day;
+  newDescription.value = "";
+  newType.value = "feriado";
+  view.value = "new-record";
+}
+
+function cancelNewRecord() {
+  view.value = "calendar";
+  selectedDay.value = null;
+}
+
+function saveNewRecord() {
+  const desc = newDescription.value.trim();
+  if (!desc || selectedDay.value === null) return;
+
+  holidays.value.push({
+    id: nextId++,
+    day: selectedDay.value,
+    month: currentMonth.value,
+    year: currentYear.value,
+    description: desc,
+    type: newType.value,
+  });
+
+  view.value = "calendar";
+  selectedDay.value = null;
+}
+
+function removeHoliday(holiday) {
+  holidays.value = holidays.value.filter((h) => h.id !== holiday.id);
+}
+
+function onClose() {
+  onDialogOK(holidays.value);
+}
+</script>
+
+<style scoped>
+.feriados-dialog {
+  width: 900px;
+  max-width: 95vw;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.cal-header {
+  padding: 6px 0 4px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.cal-cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.cal-cell:hover:not(.cal-cell--empty):not(.cal-cell--holiday) {
+  background: #f5f5f5;
+}
+
+.cal-cell--empty {
+  cursor: default;
+  pointer-events: none;
+}
+
+.cal-cell__number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.cal-cell--holiday .cal-cell__number {
+  background: #e64a19;
+  color: #fff;
+  font-weight: 700;
+}
+
+.cal-cell--holiday {
+  cursor: default;
+}
+</style>