From 7ff8bc642e8142c98d3ed0a71f58c2b3606374f7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 19 Mar 2024 13:39:46 -0300
Subject: [PATCH] WIP

---
 src/components/WorkerTimeHourChip.vue       | 123 +++++
 src/composables/useVnConfirm.js             |  23 +
 src/css/app.scss                            |   4 +
 src/pages/Worker/Card/WorkerTimeControl.vue | 484 ++++++++++++++++++--
 4 files changed, 588 insertions(+), 46 deletions(-)
 create mode 100644 src/components/WorkerTimeHourChip.vue
 create mode 100644 src/composables/useVnConfirm.js

diff --git a/src/components/WorkerTimeHourChip.vue b/src/components/WorkerTimeHourChip.vue
new file mode 100644
index 000000000..2dedf1be8
--- /dev/null
+++ b/src/components/WorkerTimeHourChip.vue
@@ -0,0 +1,123 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+
+import useNotify from 'src/composables/useNotify.js';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    hour: {
+        type: String,
+        required: true,
+    },
+    direction: {
+        type: String,
+        required: true,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onHourEntryDeleted']);
+
+const { t } = useI18n();
+const { notify } = useNotify();
+const { openConfirmationModal } = useVnConfirm();
+
+const directionIconTooltip = computed(() => {
+    const tooltipDictionary = {
+        in: t('Entrada'),
+        out: t('Salida'),
+    };
+    return tooltipDictionary[$props.direction] || null;
+});
+
+const directionIconName = computed(() => {
+    const tooltipDictionary = {
+        in: 'arrow_forward',
+        out: 'arrow_back',
+    };
+    return tooltipDictionary[$props.direction] || null;
+});
+
+const deleteHourEntry = async () => {
+    try {
+        const { data } = await axios.post(
+            `WorkerTimeControls/${$props.id}/deleteTimeEntry`
+        );
+
+        if (!data) return;
+        emit('onHourEntryDeleted');
+        notify('Entry removed', 'positive');
+    } catch (err) {
+        console.error('Error deleting hour entry');
+    }
+};
+</script>
+
+<template>
+    <div class="row items-center no-wrap">
+        <QIcon class="direction-icon" :name="directionIconName" size="sm">
+            <QTooltip>{{ directionIconTooltip }}</QTooltip>
+        </QIcon>
+        <QBadge rounded class="chip">
+            <QIcon name="edit" size="sm" class="fill-icon">
+                <QTooltip>{{ t('Edit') }}</QTooltip></QIcon
+            >
+            <span class="q-px-sm text-subtitle2 text-weight-regular">{{ hour }}</span>
+            <QIcon
+                name="cancel"
+                class="remove-icon"
+                size="sm"
+                @click="
+                    openConfirmationModal(
+                        t('This time entry will be deleted'),
+                        t('Are you sure you want to delete this entry?'),
+                        deleteHourEntry
+                    )
+                "
+            />
+        </QBadge>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.chip {
+    height: 28px;
+    color: var(--vn-dark);
+    cursor: pointer;
+    background-color: $primary;
+    opacity: 0.8;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.direction-icon {
+    color: var(--vn-label);
+    margin-right: 6px;
+}
+
+.remove-icon {
+    cursor: pointer;
+
+    &:hover {
+        font-variation-settings: 'FILL' 1;
+    }
+}
+</style>
+
+<i18n>
+es:
+    Entrada: Entrada
+    Salida: Salida
+    Edit: Editar
+    This time entry will be deleted: Se eliminará la hora fichada
+    Are you sure you want to delete this entry?: ¿Seguro que quieres eliminarla?
+    Entry removed: Fichada borrada
+</i18n>
diff --git a/src/composables/useVnConfirm.js b/src/composables/useVnConfirm.js
new file mode 100644
index 000000000..76c3f4f28
--- /dev/null
+++ b/src/composables/useVnConfirm.js
@@ -0,0 +1,23 @@
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import { useQuasar } from 'quasar';
+
+export function useVnConfirm() {
+    const quasar = useQuasar();
+
+    const openConfirmationModal = (title, message, promise, successFn) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: title,
+                    message: message,
+                    promise: promise,
+                },
+            })
+            .onOk(async () => {
+                if (successFn) successFn();
+            });
+    };
+
+    return { openConfirmationModal };
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index 38dd642a3..388492432 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -97,6 +97,10 @@ select:-webkit-autofill {
     background-color: var(--vn-light-gray);
 }
 
+.fill-icon {
+    font-variation-settings: 'FILL' 1;
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
diff --git a/src/pages/Worker/Card/WorkerTimeControl.vue b/src/pages/Worker/Card/WorkerTimeControl.vue
index 1eb6049bc..212eb0441 100644
--- a/src/pages/Worker/Card/WorkerTimeControl.vue
+++ b/src/pages/Worker/Card/WorkerTimeControl.vue
@@ -1,121 +1,404 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { onMounted, ref, computed, onBeforeMount } from 'vue';
-import FetchData from 'components/FetchData.vue';
+import { onMounted, ref, computed, onBeforeMount, nextTick } from 'vue';
 
+import FetchData from 'components/FetchData.vue';
+import WorkerTimeHourChip from 'components/WorkerTimeHourChip.vue';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useRole } from 'src/composables/useRole';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
+import { dashIfEmpty } from 'src/filters';
 
-const route = useRoute();
-const { t } = useI18n();
-// const { notify } = useNotify();
-const { hasAny } = useRole();
-const state = useState();
-const user = state.getUser();
-const stateStore = useStateStore();
-const weekdayStore = useWeekdayStore();
-const weekDays = ref([]);
 // const entryDirections = [
 //     { code: 'in', description: t('Entrada') },
 //     { code: 'middle', description: t('Intermedio') },
 //     { code: 'out', description: t('Salida') },
 // ];
 
+const route = useRoute();
+const { t } = useI18n();
+const { notify } = useNotify();
+const { hasAny } = useRole();
+const _state = useState();
+const user = _state.getUser();
+const stateStore = useStateStore();
+const weekdayStore = useWeekdayStore();
+const weekDays = ref([]);
+
 const isHr = computed(() => hasAny(['hr']));
 
 const isHimSelf = computed(() => user.value.id === route.params.id);
 
 const columns = computed(() => {
-    return weekdayStore.localeWeekdays?.map((day) => {
+    return weekdayStore.localeWeekdays?.map((day, index) => {
         const obj = {
             label: day.locale,
+            formattedDate: getHeaderFormattedDate(weekDays.value[index]?.dated),
             name: day.name,
             align: 'left',
+            colIndex: index,
+            dayData: weekDays.value[index],
         };
         return obj;
     });
 });
 
-const fetchWorkerTimeControlRef = ref(null);
+const workerHoursRef = ref(null);
 const calendarRef = ref(null);
+const selectedDate = ref(null);
 // Dates formateadas para bindear al componente QDate
 const selectedCalendarDates = ref([]);
 const startOfWeek = ref(null);
 const endOfWeek = ref(null);
+const selectedWeekNumber = ref(null);
+const state = ref(null);
+const reason = ref(null);
+const canResend = ref(null);
+const weekTotalHours = ref(null);
+const workerTimeControlMails = ref(null);
+
+onMounted(() => setDate(Date.vnNew()));
+
+const getHeaderFormattedDate = (date) => {
+    //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
+    const newDate = new Date(date);
+    const day = String(newDate.getDate()).padStart(2, '0');
+    const monthName = newDate.toLocaleString('es-ES', { month: 'long' });
+    return `${day} ${monthName}`;
+};
+
+const getChipFormattedHour = (date) => {
+    //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
+    const newDate = new Date(date);
+    const hour = newDate.getHours();
+    const min = newDate.getMinutes();
+    return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}`;
+};
+
+const formatHours = (timestamp = 0) => {
+    //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
+    let hour = Math.floor(timestamp / 3600);
+    let min = Math.floor(timestamp / 60 - 60 * hour);
+
+    if (hour < 10) hour = `0${hour}`;
+    if (min < 10) min = `0${min}`;
+
+    return `${hour}:${min}`;
+};
+
+const formattedWeekTotalHours = computed(() => formatHours(weekTotalHours.value));
 
 const defaultDate = computed(() => {
     const date = Date.vnNew();
     return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}`;
 });
 
-const handleDateSelection = async (dates, _, selectedDateDetails) => {
+const onInputChange = async (dates, _, selectedDateDetails) => {
     if (!dates.length || !selectedDateDetails) return;
 
     const { year, month, day } = selectedDateDetails;
-    const selectedDate = new Date(year, month - 1, day);
-
-    startOfWeek.value = getStartOfWeek(selectedDate);
-    endOfWeek.value = getEndOfWeek(startOfWeek.value);
-
-    getWeekDates(startOfWeek.value, endOfWeek.value);
-
-    await fetchWorkerTimeControl();
+    const date = new Date(year, month - 1, day);
+    setDate(date);
 };
 
+const setDate = async (date) => {
+    if (!date) return;
+    selectedDate.value = date;
+    selectedDate.value.setHours(0, 0, 0, 0);
+
+    const newStartOfWeek = getStartOfWeek(selectedDate.value); // Obtener el día de inicio de la semana a partir de la fecha seleccionada
+    const newEndOfWeek = getEndOfWeek(newStartOfWeek); // Obtener el fin de la semana a partir de la fecha de inicio de la semana
+
+    startOfWeek.value = newStartOfWeek;
+    endOfWeek.value = newEndOfWeek;
+    selectedWeekNumber.value = getWeekNumber(newStartOfWeek); // Asignar el número de la semana
+    console.log('selectedWeekNumber:: ', selectedWeekNumber.value);
+
+    getWeekDates(newStartOfWeek, newEndOfWeek);
+
+    await nextTick(); // Esperar actualización del DOM y luego fetchear data necesaria
+    await fetchHours();
+    await fetchWeekData();
+};
+
+// Función para obtener el inicio de la semana a partir de una fecha
 const getStartOfWeek = (selectedDate) => {
-    const dayOfWeek = selectedDate.getDay();
+    const dayOfWeek = selectedDate.getDay(); // Obtener el día de la semana de la fecha seleccionada
     const startOfWeek = new Date(selectedDate);
-    startOfWeek.setDate(selectedDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));
+    startOfWeek.setDate(selectedDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)); // Calcular el inicio de la semana
     return startOfWeek;
 };
 
+// Función para obtener el fin de la semana a partir del inicio de la semana
 const getEndOfWeek = (startOfWeek) => {
     const endOfWeek = new Date(startOfWeek);
-    endOfWeek.setDate(startOfWeek.getDate() + 6);
+    endOfWeek.setHours(23, 59, 59, 59);
+    endOfWeek.setDate(startOfWeek.getDate() + 6); // Calcular el fin de la semana sumando 6 días al inicio de la semana
     return endOfWeek;
 };
 
+// Función para obtener las fechas de la semana seleccionada
 const getWeekDates = (startOfWeek, endOfWeek) => {
-    selectedCalendarDates.value = [];
+    selectedCalendarDates.value = []; // Limpiar las fechas seleccionadas previamente usadas por QDate
+    weekDays.value = []; // Limpiar la información de las fechas seleccionadas previamente
     let currentDate = new Date(startOfWeek);
 
     while (currentDate <= endOfWeek) {
-        selectedCalendarDates.value.push(formatDate(currentDate));
-        weekDays.value.push({
-            dated: new Date(currentDate.getTime()),
-        });
-        currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
+        // Iterar sobre los días de la semana
+        selectedCalendarDates.value.push(formatDate(currentDate)); // Agregar fecha formateada para el array de fechas bindeado al componente QDate
+        weekDays.value.push({ dated: new Date(currentDate.getTime()) }); // Agregar el día de la semana al array información de días de la semana
+        currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1)); // Avanzar al siguiente día
     }
 };
 
+// Función para Convertir la fecha al formato que acepta el componente QDate: '2001-01-01'
 const formatDate = (date) => {
     return date.toISOString().slice(0, 10);
 };
 
-const workerTimeControlsFilter = computed(() => ({
+const workerHoursFilter = computed(() => ({
     where: {
         and: [{ timed: { gte: startOfWeek.value } }, { timed: { lte: endOfWeek.value } }],
     },
 }));
 
-const fetchWorkerTimeControl = async () => {
+const getWeekNumber = (date) => {
+    if (!date) return;
+    const startOfYear = new Date(date.getFullYear(), 0, 1);
+    const dayOfWeek = startOfYear.getDay();
+    const offset = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    const firstWeekMilliseconds = startOfYear.getTime() - offset * 24 * 60 * 60 * 1000;
+    const dateMilliseconds = date.getTime();
+    const weekNumber =
+        Math.floor(
+            (dateMilliseconds - firstWeekMilliseconds) / (7 * 24 * 60 * 60 * 1000)
+        ) + 1;
+    return weekNumber;
+};
+
+const getWorkedHours = async (from, to) => {
+    weekTotalHours.value = null;
+    let _weekTotalHours = 0;
+    let params = {
+        from: from,
+        id: route.params.id,
+        to: to,
+    };
+
+    const { data } = await axios.get(`Workers/${route.params.id}/getWorkedHours`, {
+        params,
+    });
+
+    const workDays = data;
+    const map = new Map();
+
+    for (const workDay of workDays) {
+        workDay.dated = new Date(workDay.dated);
+        map.set(workDay.dated, workDay);
+        _weekTotalHours += workDay.workedHours;
+    }
+
+    for (const weekDay of weekDays.value) {
+        const workDay = workDays.find((day) => {
+            let from = new Date(day.dated);
+            from.setHours(0, 0, 0, 0);
+
+            let to = new Date(day.dated);
+            to.setHours(23, 59, 59, 59);
+
+            return weekDay.dated >= from && weekDay.dated <= to;
+        });
+
+        if (workDay) {
+            weekDay.expectedHours = workDay.expectedHours;
+            weekDay.workedHours = workDay.workedHours;
+        }
+    }
+
+    weekTotalHours.value = _weekTotalHours;
+};
+
+const getAbsences = async () => {
+    const params = {
+        workerFk: route.params.id,
+        businessFk: null,
+        year: startOfWeek.value.getFullYear(),
+    };
+
+    const { data } = await axios.get('Calendars/absences', { params });
+    console.log('absenses:: ', data);
+    if (data) addEvents(data);
+};
+
+const hasEvents = (day) => {
+    return day >= startOfWeek.value && day < endOfWeek.value;
+};
+
+const addEvents = (data) => {
+    console.log('ADD EVENTS:: ');
+    const events = {};
+
+    const addEvent = (day, event) => {
+        events[new Date(day).getTime()] = event;
+    };
+
+    if (data.holidays) {
+        data.holidays.forEach((holiday) => {
+            const holidayDetail = holiday.detail && holiday.detail.description;
+            const holidayType = holiday.type && holiday.type.name;
+            const holidayName = holidayDetail || holidayType;
+
+            addEvent(holiday.dated, {
+                name: holidayName,
+                color: '#ff0',
+            });
+        });
+    }
+    if (data.absences) {
+        data.absences.forEach((absence) => {
+            const type = absence.absenceType;
+            addEvent(absence.dated, {
+                name: type.name,
+                color: type.rgb,
+            });
+        });
+    }
+
+    weekDays.value.forEach((day) => {
+        const timestamp = day.dated.getTime();
+        if (events[timestamp]) day.event = events[timestamp];
+    });
+    console.log('weekdays after events:: ', weekDays.value);
+};
+
+const fetchHours = async () => {
     try {
-        await fetchWorkerTimeControlRef.value.fetch();
+        await workerHoursRef.value.fetch();
+        await getWorkedHours(startOfWeek.value, endOfWeek.value);
+        await getAbsences();
     } catch (err) {
-        console.error('Error fetching worker time control');
+        console.error('Error fetching worker hours');
     }
 };
 
-const setWorkerTimeControls = (data) => {
-    console.log('worker time controls:: ', data);
+const fetchWorkerTimeControlMails = async (filter) => {
+    try {
+        const { data } = await axios.get('WorkerTimeControlMails', {
+            params: { filter: JSON.stringify(filter) },
+        });
+
+        return data;
+    } catch (err) {
+        console.error('Error fetching worker time control mails');
+    }
 };
 
-console.log('columns:: ', columns.value);
+const fetchWeekData = async () => {
+    try {
+        const filter = {
+            where: {
+                workerFk: route.params.id,
+                year: selectedDate.value ? selectedDate.value?.getFullYear() : null,
+                week: getWeekNumber(selectedDate.value),
+            },
+        };
+
+        const data = await fetchWorkerTimeControlMails(filter);
+
+        if (!data.length) {
+            state.value = null;
+        } else {
+            const [mail] = data;
+            state.value = mail.state;
+            reason.value.value = mail.reason;
+        }
+
+        await canBeResend();
+    } catch (err) {
+        console.error('Error fetching week data');
+    }
+};
+
+const canBeResend = async () => {
+    canResend.value = false;
+
+    const filter = {
+        where: {
+            year: selectedDate.value.getFullYear(),
+            week: getWeekNumber(selectedDate.value),
+        },
+        limit: 1,
+    };
+
+    const data = await fetchWorkerTimeControlMails(filter);
+
+    if (data.length) canResend.value = true;
+};
+
+const setHours = (data) => {
+    for (const weekDay of weekDays.value) {
+        if (data) {
+            let day = weekDay.dated.getDay();
+            weekDay.hours = data
+                .filter((hour) => new Date(hour.timed).getDay() == day)
+                .sort((a, b) => new Date(a.timed) - new Date(b.timed));
+        } else weekDay.hours = null;
+    }
+};
+const getFinishTime = () => {
+    if (!weekDays.value || weekDays.value.length === 0) return;
+
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    let todayInWeek = weekDays.value.find(
+        (day) => day.dated.getTime() === today.getTime()
+    );
+
+    if (todayInWeek && todayInWeek.hours && todayInWeek.hours.length) {
+        const remainingTime = todayInWeek.workedHours
+            ? (todayInWeek.expectedHours - todayInWeek.workedHours) * 1000
+            : null;
+        const lastKnownEntry = todayInWeek.hours[todayInWeek.hours.length - 1];
+        const lastKnownTime = new Date(lastKnownEntry.timed).getTime();
+        const finishTimeStamp =
+            lastKnownTime && remainingTime ? lastKnownTime + remainingTime : null;
+
+        if (finishTimeStamp) {
+            let finishDate = new Date(finishTimeStamp);
+            let hour = finishDate.getHours();
+            let minute = finishDate.getMinutes();
+
+            if (hour < 10) hour = `0${hour}`;
+            if (minute < 10) minute = `0${minute}`;
+            return `${hour}:${minute} h.`;
+        }
+    }
+};
+
+const onHourEntryDeleted = async () => {
+    await fetchHours();
+    await getMailStates(selectedDate.value);
+};
+
+const getMailStates = async (date) => {
+    const params = {
+        month: date.getMonth() + 1,
+        year: date.getFullYear(),
+    };
+
+    const { data } = await axios.get(
+        `WorkerTimeControls/${route.params.id}/getMailStates`,
+        { params }
+    );
+    workerTimeControlMails.value = data;
+    console.log('workerTimeControlMails: ', workerTimeControlMails.value);
+    // await repaint();
+};
 
 onBeforeMount(() => {
     weekdayStore.initStore();
@@ -129,40 +412,149 @@ onMounted(async () => {
 
 <template>
     <FetchData
-        ref="fetchWorkerTimeControlRef"
+        ref="workerHoursRef"
         url="WorkerTimeControls/filter"
-        :filter="workerTimeControlsFilter"
+        :filter="workerHoursFilter"
         :params="{
             workerFk: route.params.id,
         }"
-        @on-fetch="(data) => setWorkerTimeControls(data)"
+        @on-fetch="(data) => setHours(data)"
     />
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="260" class="q-pa-md">
+        <div class="q-pa-md q-mb-md" style="border: 2px solid black">
+            <QCardSection horizontal>
+                <span class="text-weight-bold text-subtitle1 text-center full-width">
+                    {{ t('Hours') }}
+                </span>
+            </QCardSection>
+            <QCardSection class="column items-center" horizontal>
+                <div>
+                    <span class="details-label">{{ t('Total semana') }} </span>
+                    <span>: {{ formattedWeekTotalHours }} h.</span>
+                </div>
+                <div>
+                    <span class="details-label">{{ t('Termina a las') }}:</span>
+                    <span>{{ dashIfEmpty(getFinishTime()) }}</span>
+                </div>
+
+                <span></span>
+            </QCardSection>
+        </div>
         <QDate
             ref="calendarRef"
             :model-value="selectedCalendarDates"
-            @update:model-value="handleDateSelection"
+            @update:model-value="onInputChange"
             mask="YYYY-MM-DD"
             color="primary"
             minimal
             multiple
             bordered
+            dense
             :default-year-month="defaultDate"
         />
-        <pre>date range: {{ selectedDates }}</pre>
+        <pre>date range: {{ selectedCalendarDates }}</pre>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QCard class="full-width">
-            <QTable :columns="columns"> </QTable>
+            <QTable :columns="columns" :rows="['']" hide-bottom>
+                <template #header="props">
+                    <QTr :props="props">
+                        <QTh
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            auto-width
+                        >
+                            <div class="column-title-container">
+                                <span class="text-primary">{{ t(col.label) }}</span>
+                                <span>{{ t(col.formattedDate) }}</span>
+                            </div>
+                        </QTh>
+                    </QTr>
+                </template>
+                <template #body="props">
+                    <QTr>
+                        <QTd
+                            v-for="(day, index) in props.cols"
+                            :key="index"
+                            style="padding: 20px 0 20px 0 !important"
+                        >
+                            <div
+                                v-for="(hour, index) in day.dayData?.hours"
+                                :key="index"
+                                :props="props"
+                                class="hour-chip"
+                            >
+                                <WorkerTimeHourChip
+                                    :hour="getChipFormattedHour(hour.timed)"
+                                    :direction="hour.direction"
+                                    :id="hour.id"
+                                    @on-hour-entry-deleted="onHourEntryDeleted()"
+                                />
+                            </div>
+                        </QTd>
+                    </QTr>
+                    <QTr>
+                        <QTd v-for="(day, index) in props.cols" :key="index">
+                            <div class="column items-center justify-center">
+                                <span class="q-mb-md text-sm text-body1">
+                                    {{ formatHours(day.dayData?.workedHours) }} h.
+                                </span>
+                                <QIcon
+                                    name="add_circle"
+                                    color="primary"
+                                    class="fill-icon cursor-pointer"
+                                    size="sm"
+                                >
+                                    <QTooltip>{{ t('Add time') }}</QTooltip>
+                                </QIcon>
+                            </div>
+                        </QTd>
+                    </QTr>
+                </template>
+            </QTable>
         </QCard>
+        <pre>{{ columns }}</pre>
+        <!-- <pre>{{ weekDays }}</pre> -->
     </QPage>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss">
+.column-title-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+}
+
+.details-label {
+    color: var(--vn-label);
+}
+
+.q-date,
+.q-date__content,
+.q-date__main {
+    max-width: 228px !important;
+    min-width: 228px !important;
+}
+
+.hour-chip {
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0px;
+    }
+}
+</style>
 
 <i18n>
 es:
     Entrada: Entrada
     Intermedio: Intermedio
     Salida: Salida
+    Hours: Horas
+    Total semana: Total semana
+    Termina a las: Termina a las
+    Add time: Añadir hora
 </i18n>