feat: cria integracao com backend para cadastro de feriados

src/api/holiday.js

@@ -0,0 +1,21 @@
+import api from "src/api";
+
+export const getBaseHolidays = async () => {
+  const { data } = await api.get("/base-holiday");
+  return data.payload;
+};
+
+export const createBaseHoliday = async (payload) => {
+  const { data } = await api.post("/base-holiday", payload);
+  return data.payload;
+};
+
+export const updateBaseHoliday = async (id, payload) => {
+  const { data } = await api.put(`/base-holiday/${id}`, payload);
+  return data.payload;
+};
+
+export const deleteBaseHoliday = async (id) => {
+  const { data } = await api.delete(`/base-holiday/${id}`);
+  return data;
+};

src/components/charts/FeriadosCard.vue

@@ -22,7 +22,7 @@
       Sem feriados para este mês.
     </div>
 
-    <q-list v-else dense>
+    <q-list v-else class="q-mt-md" 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">
@@ -40,15 +40,32 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import FeriadosDialog from "src/pages/dashboard/components/FeriadosDialog.vue";
+import { getBaseHolidays } from "src/api/holiday";
 
 const $q = useQuasar();
 
 const now = new Date();
 const holidays = ref([]);
 
+function toFrontend(h) {
+  const [year, month, day] = h.holiday_date.split("-").map(Number);
+  return { id: h.id, day, month, year, description: h.description, type: h.type };
+}
+
+async function loadHolidays() {
+  try {
+    const items = await getBaseHolidays();
+    holidays.value = items.map(toFrontend);
+  } catch {
+    holidays.value = [];
+  }
+}
+
+onMounted(loadHolidays);
+
 const currentMonthHolidays = computed(() =>
   holidays.value
     .filter((h) => h.month === now.getMonth() + 1 && h.year === now.getFullYear())

src/pages/dashboard/components/FeriadosDialog.vue

@@ -110,6 +110,7 @@
                     icon="mdi-trash-can-outline"
                     color="grey-5"
                     size="sm"
+                    :loading="deletingId === holiday.id"
                     @click="removeHoliday(holiday)"
                   />
                 </q-item-section>
@@ -168,6 +169,7 @@
             label="SALVAR"
             no-caps
             :disable="!newDescription.trim()"
+            :loading="saving"
             @click="saveNewRecord"
           />
         </q-card-actions>
@@ -178,14 +180,16 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import { useDialogPluginComponent } from "quasar";
+import { useDialogPluginComponent, useQuasar } 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";
+import { createBaseHoliday, deleteBaseHoliday } from "src/api/holiday";
 
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
+const $q = useQuasar();
 
 const now = new Date();
 const currentMonth = ref(now.getMonth() + 1);
@@ -195,6 +199,8 @@ const view = ref("calendar");
 const selectedDay = ref(null);
 const newDescription = ref("");
 const newType = ref("feriado");
+const saving = ref(false);
+const deletingId = ref(null);
 
 const props = defineProps({
   initialHolidays: {
@@ -203,9 +209,6 @@ const props = defineProps({
   },
 });
 
-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"];
@@ -298,25 +301,49 @@ function cancelNewRecord() {
   selectedDay.value = null;
 }
 
-function saveNewRecord() {
+async 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,
-  });
+  const mm = String(currentMonth.value).padStart(2, "0");
+  const dd = String(selectedDay.value).padStart(2, "0");
 
-  view.value = "calendar";
-  selectedDay.value = null;
+  saving.value = true;
+  try {
+    const created = await createBaseHoliday({
+      description: desc,
+      holiday_date: `${currentYear.value}-${mm}-${dd}`,
+      type: newType.value,
+    });
+
+    holidays.value.push({
+      id: created.id,
+      day: selectedDay.value,
+      month: currentMonth.value,
+      year: currentYear.value,
+      description: created.description,
+      type: created.type,
+    });
+
+    view.value = "calendar";
+    selectedDay.value = null;
+  } catch {
+    $q.notify({ type: "negative", message: "Erro ao salvar feriado." });
+  } finally {
+    saving.value = false;
+  }
 }
 
-function removeHoliday(holiday) {
-  holidays.value = holidays.value.filter((h) => h.id !== holiday.id);
+async function removeHoliday(holiday) {
+  deletingId.value = holiday.id;
+  try {
+    await deleteBaseHoliday(holiday.id);
+    holidays.value = holidays.value.filter((h) => h.id !== holiday.id);
+  } catch {
+    $q.notify({ type: "negative", message: "Erro ao remover feriado." });
+  } finally {
+    deletingId.value = null;
+  }
 }
 
 function onClose() {