Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6480-improveCard

src/components/FormModelPopup.vue

@@ -76,6 +76,16 @@ defineExpose({
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" :data="data" :validate="validate" />
             <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.cancel')"
+                    :title="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
                 <QBtn
                     :label="t('globals.save')"
                     :title="t('globals.save')"
@@ -84,17 +94,6 @@ defineExpose({
                     :disabled="isLoading"
                     :loading="isLoading"
                 />
-                <QBtn
-                    :label="t('globals.cancel')"
-                    :title="t('globals.cancel')"
-                    type="reset"
-                    color="primary"
-                    flat
-                    class="q-ml-sm"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                    v-close-popup
-                />
             </div>
         </template>
     </FormModel>

src/components/FormPopup.vue

@@ -56,14 +56,6 @@ const closeForm = () => {
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    v-if="defaultSubmitButton"
-                    :label="customSubmitButtonLabel || t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     v-if="defaultCancelButton"
                     :label="t('globals.cancel')"
@@ -74,6 +66,14 @@ const closeForm = () => {
                     :loading="isLoading"
                     v-close-popup
                 />
+                <QBtn
+                    v-if="defaultSubmitButton"
+                    :label="customSubmitButtonLabel || t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
                 <slot name="customButtons" />
             </div>
         </QCard>

src/components/ui/QCalendarMonthWrapper.vue

@@ -12,12 +12,23 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    viewCustomization: {
+        type: String,
+        default: '',
+    },
 });
 
 const $q = useQuasar();
 
+// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
+const viewCustomizationClasses = {
+    workerCalendar: 'worker-calendar-customizations',
+};
+
 const containerClasses = computed(() => {
     const classes = ['main-container-background'];
+    if (viewCustomizationClasses[$props.viewCustomization])
+        classes.push(viewCustomizationClasses[$props.viewCustomization]);
     if ($props.bordered) classes.push('--bordered');
     if ($props.transparentBackground) classes.push('transparent-background');
     else classes.push($q.dark.isActive ? '--dark' : '--light');
@@ -33,6 +44,47 @@ const containerClasses = computed(() => {
 </template>
 
 <style lang="scss">
+@import '../../css/quasar.variables.scss';
+
+:root {
+    // Cambia los colores del día actual del calendario por los de salix
+    --calendar-border-current-dark: #84d0e2 2px solid;
+    --calendar-border-current: #84d0e2 2px solid;
+    --calendar-current-color-dark: #84d0e2;
+    // Colores de fondo del calendario en dark mode
+    --calendar-outside-background-dark: #222;
+    --calendar-background-dark: #222;
+}
+
+// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
+.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-calendar-month__head--weekday {
+    // Transforma los nombres de los días de la semana a mayúsculas
+    text-transform: capitalize;
+}
+
+.transparent-background {
+    --calendar-background-dark: transparent;
+    --calendar-background: transparent;
+    --calendar-outside-background-dark: transparent;
+}
+
+.q-calendar__button {
+    &:hover {
+        background-color: var(--vn-accent-color);
+        cursor: pointer;
+    }
+}
+
 .main-container-background {
     --calendar-current-background-dark: transparent;
 
@@ -45,14 +97,64 @@ const containerClasses = computed(() => {
     }
 
     &.--bordered {
-        border: 1px solid black;
+        border: 1px solid #222;
     }
 }
 
-.transparent-background {
+.worker-calendar-customizations {
-    --calendar-background-dark: transparent;
+    .q-calendar__button {
-    --calendar-background: transparent;
+        width: 32px;
-    --calendar-outside-background-dark: transparent;
+        height: 32px;
+        font-size: 13px;
+
+        &:hover {
+            background-color: var(--vn-accent-color);
+            cursor: pointer;
+        }
+    }
+
+    .q-calendar-month__week--days > div:nth-child(6),
+    .q-calendar-month__week--days > div:nth-child(7) {
+        // Cambia el color de los días sábado y domingo
+        color: #777777;
+    }
+
+    .q-calendar-month__week--wrapper {
+        margin-bottom: 4px;
+    }
+
+    .q-calendar-month__workweek {
+        height: 32px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .q-calendar__button--bordered {
+        color: $info !important;
+    }
+
+    .q-calendar-month__day--content {
+        position: absolute;
+        top: 1;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .q-outside .calendar-event {
+        display: none;
+    }
+
+    .q-calendar-month__workweek,
+    .q-calendar-month__head--workweek,
+    .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
+        text-transform: capitalize;
+        color: #777;
+        font-weight: bold;
+        font-size: 0.8rem;
+        text-align: center;
+    }
 }
 
 .nav-container {

src/filters/date.js

@@ -91,3 +91,24 @@ export function toDateTimeFormat(date, showSeconds = false) {
         second: showSeconds ? '2-digit' : undefined,
     });
 }
+
+/**
+ * Converts seconds to a formatted string representing hours and minutes (hh:mm).
+ * @param {number} seconds - The number of seconds to convert.
+ * @param {boolean} includeHSuffix - Optional parameter indicating whether to include "h." after the hour.
+ * @returns {string} A string representing the time in the format "hh:mm" with optional "h." suffix.
+ */
+export function secondsToHoursMinutes(seconds, includeHSuffix = true) {
+    if (!seconds) return includeHSuffix ? '00:00 h.' : '00:00';
+
+    const hours = Math.floor(seconds / 3600);
+    const remainingMinutes = seconds % 3600;
+    const minutes = Math.floor(remainingMinutes / 60);
+    const formattedHours = hours < 10 ? '0' + hours : hours;
+    const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+
+    // Append "h." if includeHSuffix is true
+    const suffix = includeHSuffix ? ' h.' : '';
+    // Return formatted string
+    return formattedHours + ':' + formattedMinutes + suffix;
+}

src/i18n/locale/en.yml

@@ -83,6 +83,7 @@ globals:
     selectFile: Select a file
     copyClipboard: Copy on clipboard
     salesPerson: SalesPerson
+    send: Send
     code: Code
     pageTitles:
         summary: Summary
@@ -811,6 +812,7 @@ worker:
         pbx: Private Branch Exchange
         log: Log
         calendar: Calendar
+        timeControl: Time control
     list:
         name: Name
         email: Email

src/i18n/locale/es.yml

@@ -83,6 +83,7 @@ globals:
     selectFile: Seleccione un fichero
     copyClipboard: Copiar en portapapeles
     salesPerson: Comercial
+    send: Enviar
     code: Código
     pageTitles:
         summary: Resumen
@@ -809,6 +810,7 @@ worker:
         pbx: Centralita
         log: Historial
         calendar: Calendario
+        timeControl: Control de horario
     list:
         name: Nombre
         email: Email

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -178,6 +178,7 @@ watch(_year, (newValue) => {
         class="outline"
         bordered
         transparent-background
+        view-customization="workerCalendar"
     >
         <template #header>
             <span class="full-width text-center text-body1 q-py-sm">{{
@@ -222,58 +223,6 @@ watch(_year, (newValue) => {
 </template>
 
 <style lang="scss">
-@import '../../../css/quasar.variables.scss';
-:root {
-    // Cambia los colores del día actual del calendario por los de salix
-    --calendar-border-current-dark: #84d0e2 2px solid;
-    --calendar-border-current: #84d0e2 2px solid;
-    --calendar-current-color-dark: #ec8916;
-}
-
-.q-calendar__button {
-    width: 32px;
-    height: 32px;
-    font-size: 13px;
-
-    &:hover {
-        background-color: var(--vn-accent-color);
-        cursor: pointer;
-    }
-}
-
-.q-calendar-month__week--days > div:nth-child(6),
-.q-calendar-month__week--days > div:nth-child(7) {
-    // Cambia el color de los días sábado y domingo
-    color: #777777;
-}
-
-.q-calendar-month__week--wrapper {
-    margin-bottom: 4px;
-}
-
-.q-calendar-month__workweek {
-    height: 32px;
-    display: flex;
-    justify-content: center;
-}
-
-.q-calendar__button--bordered {
-    color: $info !important;
-}
-
-.q-calendar-month__day--content {
-    position: absolute;
-    top: 1;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.q-outside .calendar-event {
-    display: none;
-}
-
 .calendar-event {
     display: flex;
     justify-content: center;
@@ -296,15 +245,6 @@ watch(_year, (newValue) => {
         opacity: 0.8;
     }
 }
-.q-calendar-month__workweek,
-.q-calendar-month__head--workweek,
-.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
-    text-transform: capitalize;
-    color: #777;
-    font-weight: bold;
-    font-size: 0.8rem;
-    text-align: center;
-}
 </style>
 
 <i18n>

src/pages/Worker/Card/WorkerDateLabel.vue

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+    color: {
+        type: String,
+        default: null,
+    },
+    avatarClass: {
+        type: String,
+        default: null,
+    },
+    selected: {
+        type: Boolean,
+        default: undefined,
+    },
+});
+defineEmits(['update:selected']);
+</script>
+
+<template>
+    <QChip
+        class="text-white q-ma-none"
+        :selected="selected"
+        :style="{ backgroundColor: selected ? color : 'black' }"
+        @update:selected="$emit('update:selected', $event)"
+    >
+        <QAvatar
+            :color="color"
+            :class="avatarClass"
+            :style="{ backgroundColor: color }"
+        />
+        <slot />
+    </QChip>
+</template>

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -0,0 +1,659 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { onMounted, ref, computed, onBeforeMount, nextTick, reactive } from 'vue';
+
+import FetchData from 'components/FetchData.vue';
+import WorkerTimeHourChip from 'pages/Worker/Card/WorkerTimeHourChip.vue';
+import WorkerTimeForm from 'pages/Worker/Card/WorkerTimeForm.vue';
+import WorkerTimeReasonForm from 'pages/Worker/Card/WorkerTimeReasonForm.vue';
+import WorkerDateLabel from './WorkerDateLabel.vue';
+import WorkerTimeControlCalendar from 'pages/Worker/Card/WorkerTimeControlCalendar.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';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import { toTimeFormat, secondsToHoursMinutes } from 'filters/date.js';
+import toDateString from 'filters/toDateString.js';
+import { date } from 'quasar';
+
+const route = useRoute();
+const { t, locale } = useI18n();
+const { notify } = useNotify();
+const { hasAny } = useRole();
+const _state = useState();
+const user = _state.getUser();
+const stateStore = useStateStore();
+const weekdayStore = useWeekdayStore();
+const weekDays = ref([]);
+const { openConfirmationModal } = useVnConfirm();
+const { getWeekOfYear } = date;
+
+const workerTimeFormDialogRef = ref(null);
+const workerTimeReasonFormDialogRef = ref(null);
+const workerHoursRef = ref(null);
+const selectedDate = ref(null);
+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([]);
+const workerTimeFormProps = reactive({
+    dated: null,
+    entryId: null,
+    entryCode: null,
+});
+
+// Array utilizado por QCalendar para seleccionar un rango de fechas
+const selectedCalendarDates = ref([]);
+// Date formateada para bindear al componente QDate
+const selectedDateFormatted = ref(toDateString(Date.vnNew()));
+
+const arrayData = useArrayData('workerData');
+
+const worker = computed(() => arrayData.store?.data);
+
+const isHr = computed(() => hasAny(['hr']));
+
+const isHimSelf = computed(() => user.value.id === Number(route.params.id));
+
+const columns = computed(() => {
+    return weekdayStore.getLocales?.map((day, index) => {
+        const obj = {
+            label: day.locale,
+            formattedDate: getHeaderFormattedDate(weekDays.value[index]?.dated),
+            name: day.name,
+            align: 'center',
+            colIndex: index,
+            dayData: weekDays.value[index],
+        };
+        return obj;
+    });
+});
+
+const getHeaderFormattedDate = (date) => {
+    const newDate = new Date(date);
+    const day = String(newDate.getDate()).padStart(2, '0');
+    const monthName = newDate.toLocaleString(locale.value, { month: 'long' });
+    return `${day} ${monthName}`;
+};
+
+const formattedWeekTotalHours = computed(() =>
+    secondsToHoursMinutes(weekTotalHours.value)
+);
+
+const onInputChange = async (date) => {
+    if (!date) return;
+
+    const { year, month, day } = date.scope.timestamp;
+    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 = getWeekOfYear(newStartOfWeek); // Asignar el número de la semana del año
+
+    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(); // 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)); // 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.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 = [];
+    weekDays.value = []; // Limpiar la información de las fechas seleccionadas previamente
+    let currentDate = new Date(startOfWeek);
+
+    while (currentDate <= endOfWeek) {
+        // Iterar sobre los días de la semana
+        selectedCalendarDates.value.push(toDateString(currentDate)); // Agregar fecha formateada para el array de fechas bindeado al componente QCalendar
+        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
+    }
+};
+
+const workerHoursFilter = computed(() => ({
+    where: {
+        and: [{ timed: { gte: startOfWeek.value } }, { timed: { lte: endOfWeek.value } }],
+    },
+}));
+
+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 });
+    if (data) addEvents(data);
+};
+
+const addEvents = (data) => {
+    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];
+    });
+};
+
+const fetchHours = async () => {
+    try {
+        await workerHoursRef.value.fetch();
+        await getWorkedHours(startOfWeek.value, endOfWeek.value);
+        await getAbsences();
+    } catch (err) {
+        console.error('Error fetching worker hours');
+    }
+};
+
+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');
+    }
+};
+
+const fetchWeekData = async () => {
+    try {
+        const filter = {
+            where: {
+                workerFk: route.params.id,
+                year: selectedDate.value ? selectedDate.value?.getFullYear() : null,
+                week: selectedWeekNumber.value,
+            },
+        };
+
+        const data = await fetchWorkerTimeControlMails(filter);
+        if (!data.length) {
+            state.value = null;
+        } else {
+            const [mail] = data;
+            state.value = mail.state;
+            reason.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: selectedWeekNumber.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) return toTimeFormat(finishTimeStamp) + ' h.';
+    }
+};
+
+const updateData = 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;
+};
+
+const showWorkerTimeForm = (propValue, formType) => {
+    const isEditForm = formType === 'edit';
+
+    workerTimeFormProps.entryId = isEditForm ? propValue.id : null;
+    workerTimeFormProps.entryCode = isEditForm ? propValue.entryCode : null;
+    workerTimeFormProps.dated = isEditForm ? null : propValue;
+
+    workerTimeFormDialogRef.value.show();
+};
+
+const showReasonForm = () => {
+    workerTimeReasonFormDialogRef.value.show();
+};
+
+const updateWorkerTimeControlMail = async (state, reason) => {
+    try {
+        const params = {
+            workerId: Number(route.params.id),
+            year: selectedDate.value.getFullYear(),
+            week: selectedWeekNumber.value,
+            state,
+        };
+
+        if (reason) params.reason = reason;
+
+        await axios.post('WorkerTimeControls/updateWorkerTimeControlMail', params);
+        await getMailStates(selectedDate.value);
+        await fetchWeekData();
+        notify(t('globals.dataSaved'), 'positive');
+    } catch (err) {
+        console.error('Error updating worker time control mail');
+    }
+};
+
+const isSatisfied = async () => {
+    await updateWorkerTimeControlMail('CONFIRMED');
+};
+
+const isUnsatisfied = async (reason) => {
+    if (!reason) {
+        notify(t('You must indicate a reason', 'negative'));
+        return;
+    }
+    updateWorkerTimeControlMail('REVISE', reason);
+};
+
+const resendEmail = async () => {
+    try {
+        const params = {
+            recipient: worker.value?.user?.email,
+            week: selectedWeekNumber.value,
+            year: selectedDate.value.getFullYear(),
+            workerId: Number(route.params.id),
+            state: 'SENDED',
+        };
+        await axios.post('WorkerTimeControls/weekly-hour-hecord-email', params);
+        await getMailStates(selectedDate.value);
+        notify(t('Email sended'), 'positive');
+    } catch (err) {
+        console.error('Error sending email');
+    }
+};
+
+onBeforeMount(() => {
+    weekdayStore.initStore();
+});
+
+onMounted(async () => {
+    await setDate(Date.vnNew());
+    await getMailStates(selectedDate.value);
+    stateStore.rightDrawer = true;
+});
+</script>
+
+<template>
+    <FetchData
+        ref="workerHoursRef"
+        url="WorkerTimeControls/filter"
+        :filter="workerHoursFilter"
+        :params="{
+            workerFk: route.params.id,
+        }"
+        @on-fetch="(data) => setHours(data)"
+    />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <div>
+            <QBtnGroup push class="q-gutter-x-sm" flat>
+                <QBtn
+                    v-if="isHimSelf && state"
+                    :label="t('Satisfied')"
+                    color="primary"
+                    type="submit"
+                    :disabled="state == 'CONFIRMED'"
+                    @click="isSatisfied()"
+                />
+                <QBtn
+                    v-if="isHimSelf && state"
+                    :label="t('Not satisfied')"
+                    color="primary"
+                    type="submit"
+                    :disabled="state == 'REVISE'"
+                    @click="showReasonForm()"
+                    style="margin-left: 1px"
+                />
+            </QBtnGroup>
+            <QBtnGroup push class="q-gutter-x-sm" flat style="margin-left: 0px">
+                <QBtn
+                    v-if="reason && state && (isHimSelf || isHr)"
+                    :label="t('Reason')"
+                    color="primary"
+                    type="submit"
+                    @click="showReasonForm()"
+                />
+                <QBtn
+                    v-if="isHr && state !== 'CONFIRMED' && canResend"
+                    :label="state ? t('Resend') : t('globals.send')"
+                    color="primary"
+                    type="submit"
+                    @click="
+                        openConfirmationModal(
+                            t('Send time control email'),
+                            t('Are you sure you want to send it?'),
+                            resendEmail
+                        )
+                    "
+                >
+                    <QTooltip>
+                        {{ state ? t('Resend') : t('globals.send') }}
+                        {{ t('email of this week to the user') }}
+                    </QTooltip>
+                </QBtn>
+            </QBtnGroup>
+        </div>
+    </Teleport>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <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 #222">
+            <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 }}</span>
+                </div>
+                <div>
+                    <span class="details-label">{{ t('Termina a las') }}: </span>
+                    <span>{{ dashIfEmpty(getFinishTime()) }}</span>
+                </div>
+            </QCardSection>
+        </div>
+        <WorkerTimeControlCalendar
+            v-model:model-value="selectedDateFormatted"
+            :selected-dates="selectedCalendarDates"
+            :active-date="false"
+            :worker-time-control-mails="workerTimeControlMails"
+            @click-date="onInputChange"
+            @on-moved="getMailStates"
+        />
+    </QDrawer>
+    <QPage class="column items-center">
+        <QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
+            <template #header="props">
+                <QTr :props="props" no-hover>
+                    <QTh
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        auto-width
+                        style="vertical-align: top"
+                    >
+                        <div class="column-title-container">
+                            <span class="text-primary">{{ t(col.label) }}</span>
+                            <span class="q-mb-xs">{{ col.formattedDate }}</span>
+                            <WorkerDateLabel
+                                v-if="col.dayData?.event"
+                                :color="col.dayData.event.color"
+                            >
+                                <span>
+                                    {{ col.dayData.event.name }}
+                                </span>
+                            </WorkerDateLabel>
+                        </div>
+                    </QTh>
+                </QTr>
+            </template>
+            <template #body="props">
+                <QTr no-hover>
+                    <QTd
+                        v-for="(day, index) in props.cols"
+                        :key="index"
+                        style="padding: 20px 16px !important"
+                    >
+                        <div class="full-height full-width column items-center">
+                            <WorkerTimeHourChip
+                                v-for="(hour, ind) in day.dayData?.hours"
+                                :key="ind"
+                                :hour="hour.timed"
+                                :manual="hour.manual"
+                                :direction="hour.direction"
+                                :id="hour.id"
+                                @on-hour-entry-deleted="updateData()"
+                                @show-worker-time-form="
+                                    showWorkerTimeForm(
+                                        { id: hour.id, entryCode: hour.direction },
+                                        'edit'
+                                    )
+                                "
+                                class="hour-chip"
+                            />
+                        </div>
+                    </QTd>
+                </QTr>
+                <QTr no-hover>
+                    <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">
+                                {{ secondsToHoursMinutes(day.dayData?.workedHours) }}
+                            </span>
+                            <QIcon
+                                name="add_circle"
+                                color="primary"
+                                class="fill-icon cursor-pointer"
+                                size="sm"
+                                @click="showWorkerTimeForm(day.dayData?.dated, 'create')"
+                            >
+                                <QTooltip>{{ t('Add time') }}</QTooltip>
+                            </QIcon>
+                        </div>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable>
+        <QDialog ref="workerTimeFormDialogRef">
+            <WorkerTimeForm v-bind="workerTimeFormProps" @on-data-saved="updateData()" />
+        </QDialog>
+        <QDialog ref="workerTimeReasonFormDialogRef">
+            <WorkerTimeReasonForm
+                @on-submit="isUnsatisfied($event)"
+                :reason="reason"
+                :is-him-self="isHimSelf"
+            />
+        </QDialog>
+    </QPage>
+</template>
+
+<style scoped 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);
+}
+
+.hour-chip {
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0px;
+    }
+}
+</style>
+
+<i18n>
+es:
+    Hours: Horas
+    Total semana: Total semana
+    Termina a las: Termina a las
+    Add time: Añadir hora
+    Reason: Motivo
+    Not satisfied: No conforme
+    Satisfied: Conforme
+    Resend: Reenviar
+    email of this week to the user: email de esta semana al usuario
+    Email sended: Email enviado
+    Send time control email: Enviar email control horario
+    Are you sure you want to send it?: ¿Seguro que quieres enviarlo?
+    You must indicate a reason: Debes indicar un motivo
+</i18n>

src/pages/Worker/Card/WorkerTimeControlCalendar.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
+import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
+
+const $props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    selectedDates: {
+        type: Array,
+        default: () => [],
+    },
+    showNavigation: {
+        type: Boolean,
+        default: true,
+    },
+    activeDate: {
+        type: Boolean,
+        default: true,
+    },
+    workerTimeControlMails: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'clickDate', 'onMoved']);
+
+const { locale } = useI18n();
+
+const calendarRef = ref(null);
+
+const stateClasses = {
+    CONFIRMED: {
+        className: 'confirmed',
+        title: 'Conforme',
+    },
+    REVISE: {
+        className: 'revise',
+        title: 'No conforme',
+    },
+    SENDED: {
+        className: 'sended',
+        title: 'Pendiente',
+    },
+};
+
+const value = computed({
+    get: () => $props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+
+const formattedNavigationLabel = computed(() => {
+    const [year, month, day] = $props.modelValue.split('-');
+    const date = new Date(year, month - 1, day);
+    const _month = date.toLocaleString(locale.value, { month: 'long' });
+    return `${_month.charAt(0).toUpperCase() + _month.slice(1)} ${year}`;
+});
+
+const workerTimeControlMailsMap = computed(() => {
+    if (!$props.workerTimeControlMails || !$props.workerTimeControlMails.length)
+        return new Map();
+
+    const map = new Map();
+    $props.workerTimeControlMails.forEach((mail) => map.set(mail.week, mail.state));
+    return map;
+});
+
+const onPrev = () => {
+    calendarRef.value.prev();
+};
+
+const onNext = () => {
+    calendarRef.value.next();
+};
+
+const clickDate = (ev) => {
+    emit('clickDate', ev);
+};
+
+const onMoved = (ev) => {
+    emit('onMoved', new Date(ev.year, ev.month - 1, ev.day));
+};
+
+const workWeeksElements = ref([]);
+
+watch(
+    () => $props.workerTimeControlMails,
+    () => {
+        getWorkWeekElements();
+        paintWorkWeeks();
+    }
+);
+
+const getWorkWeekElements = () => {
+    workWeeksElements.value = document.getElementsByClassName(
+        'q-calendar-month__workweek'
+    );
+};
+
+const paintWorkWeeks = async () => {
+    for (var i = 0; i < workWeeksElements.value.length; i++) {
+        const element = workWeeksElements.value[i];
+        const week = Number(element.innerHTML);
+        const weekState = workerTimeControlMailsMap.value.get(week);
+        const { className, title } = stateClasses[weekState] || {};
+
+        element.classList.remove('confirmed', 'revise', 'sended');
+
+        if (className) {
+            element.classList.add(className);
+            element.setAttribute('title', title);
+        } else {
+            element.removeAttribute('title');
+        }
+    }
+};
+</script>
+
+<template>
+    <QCalendarMonthWrapper>
+        <template #header>
+            <div class="row items-center full-width">
+                <QIcon name="arrow_back_ios" class="nav-arrow col" @click="onPrev" />
+                <span class="col-6 text-no-wrap text-center text-subtitle1">{{
+                    formattedNavigationLabel
+                }}</span>
+                <QIcon name="arrow_forward_ios" class="nav-arrow col" @click="onNext" />
+            </div>
+        </template>
+        <template #calendar>
+            <QCalendarMonth
+                ref="calendarRef"
+                v-model="value"
+                show-work-weeks
+                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                :selected-dates="selectedDates"
+                :locale="locale"
+                mini-mode
+                enable-outside-days
+                class="q-py-sm"
+                no-active-date
+                @click-date="clickDate"
+                @moved="onMoved"
+            />
+        </template>
+    </QCalendarMonthWrapper>
+</template>
+
+<style lang="scss">
+.confirmed {
+    color: #97b92f;
+}
+
+.revise {
+    color: #f61e1e;
+}
+
+.sended {
+    color: #d19b25;
+}
+
+.nav-arrow {
+    cursor: pointer;
+    user-select: none;
+}
+</style>

src/pages/Worker/Card/WorkerTimeForm.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { reactive, ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+const $props = defineProps({
+    entryId: {
+        type: Number,
+        default: null,
+    },
+    entryCode: {
+        type: String,
+        default: null,
+    },
+    dated: {
+        type: Date,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['onDataSaved']);
+
+const route = useRoute();
+const { t } = useI18n();
+
+let workerHourEntry = reactive({});
+
+const entryDirections = [
+    { code: 'in', description: t('Entrada') },
+    { code: 'middle', description: t('Intermedio') },
+    { code: 'out', description: t('Salida') },
+];
+
+const closeButton = ref(null);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+const isEditMode = computed(() => !!$props.entryId);
+
+const title = computed(() => (isEditMode.value ? t('Edit entry') : t('Add time')));
+
+const urlCreate = computed(() =>
+    isEditMode.value
+        ? `WorkerTimeControls/${$props.entryId}/updateTimeEntry`
+        : `WorkerTimeControls/${route.params.id}/addTimeEntry`
+);
+
+onBeforeMount(() => {
+    workerHourEntry = isEditMode.value
+        ? { direction: $props.entryCode }
+        : {
+              timed: new Date($props.dated),
+              workerFk: route.params.id,
+          };
+});
+</script>
+
+<template>
+    <FormModelPopup
+        :form-initial-data="workerHourEntry"
+        :observe-form-changes="false"
+        :default-actions="false"
+        :title="title"
+        :url-create="urlCreate"
+        @on-data-saved="onDataSaved()"
+    >
+        <template #form-inputs="{ data }">
+            <VnInputTime
+                v-if="!isEditMode"
+                :label="t('Hour')"
+                v-model="data.timed"
+                autofocus
+                :required="true"
+                :is-clearable="false"
+            />
+            <VnSelectFilter
+                :label="t('Type')"
+                v-model="data.direction"
+                :options="entryDirections"
+                option-value="code"
+                option-label="description"
+                hide-selected
+                :required="true"
+            />
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Add time: Añadir hora
+    Edit entry: Editar entrada
+    Hour: Hora
+    Type: Tipo
+    Entrada: Entrada
+    Intermedio: Intermedio
+    Salida: Salida
+</i18n>

src/pages/Worker/Card/WorkerTimeHourChip.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+
+import useNotify from 'src/composables/useNotify.js';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { toTimeFormat } from 'filters/date.js';
+import axios from 'axios';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    manual: {
+        type: Boolean,
+        required: true,
+    },
+    hour: {
+        type: String,
+        required: true,
+    },
+    direction: {
+        type: String,
+        required: true,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onHourEntryDeleted', 'showWorkerTimeForm']);
+
+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');
+    }
+};
+
+const showWorkerTimeForm = () => emit('showWorkerTimeForm');
+</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"
+            :class="{ '--manual': manual }"
+            @click="showWorkerTimeForm()"
+        >
+            <QIcon name="edit" size="sm" class="fill-icon">
+                <QTooltip>{{ t('Edit') }}</QTooltip></QIcon
+            >
+            <span class="q-px-sm text-subtitle2 text-weight-regular">{{
+                toTimeFormat(hour)
+            }}</span>
+            <QIcon
+                v-if="manual"
+                name="cancel"
+                class="remove-icon"
+                size="sm"
+                @click.stop="
+                    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;
+    cursor: pointer;
+    opacity: 0.8;
+    color: #eee;
+    background-color: #222;
+
+    &.--manual {
+        color: var(--vn-accent-color);
+        background-color: $primary;
+    }
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.direction-icon {
+    color: var(--vn-label-color);
+    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>

src/pages/Worker/Card/WorkerTimeReasonForm.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FormPopup from 'components/FormPopup.vue';
+
+const $props = defineProps({
+    reason: {
+        type: String,
+        default: '',
+    },
+    isHimSelf: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['onSubmit']);
+
+const { t } = useI18n();
+
+const closeButton = ref(null);
+const reasonFormData = ref($props.reason);
+
+const onSubmit = () => {
+    emit('onSubmit', reasonFormData.value);
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FormPopup @on-submit="onSubmit()">
+        <template #form-inputs>
+            <QInput
+                :label="t('Reason')"
+                v-model="reasonFormData"
+                type="textarea"
+                autogrow
+                :disable="!isHimSelf"
+            />
+        </template>
+    </FormPopup>
+</template>
+
+<i18n>
+es:
+    Reason: Motivo
+</i18n>

src/router/modules/worker.js

@@ -21,6 +21,7 @@ export default {
             'WorkerLog',
             'WorkerCalendar',
             'WorkerDms',
+            'WorkerTimeControl',
         ],
         departmentCard: ['BasicData'],
     },
@@ -156,6 +157,16 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
                 },
+                {
+                    name: 'WorkerTimeControl',
+                    path: 'time-control',
+                    meta: {
+                        title: 'timeControl',
+                        icon: 'access_time',
+                    },
+                    component: () =>
+                        import('src/pages/Worker/Card/WorkerTimeControl.vue'),
+                },
             ],
         },
     ],

src/stores/useWeekdayStore.js

@@ -60,11 +60,13 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
         // El día de mañana esto permitirá ordenar los weekdays en base a el locale si se lo desea reemplazando localeOrder.es por localeOrder[locale]
         const locales = [];
         for (let code of localeOrder.es) {
+            const weekDay = weekdaysMap[code];
+            const locale = t(`weekdays.${weekdaysMap[code].code}`);
             const obj = {
-                ...weekdaysMap[code],
+                ...weekDay,
-                locale: t(`weekdays.${weekdaysMap[code].code}`),
+                locale,
-                localeChar: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 1),
+                localeChar: locale.substr(0, 1),
-                localeAbr: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 3),
+                localeAbr: locale.substr(0, 3),
             };
             locales.push(obj);
         }