From 9fab8ae1ca898bcbd9c66d14c9768281fa8055ad Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Mon, 29 Dec 2025 10:17:18 -0500
Subject: [PATCH] refactor(approvals): more work on filters, table list view
 tweaks to columns, plug in list view functionalities

---
 src/i18n/en-ca/index.ts                       |   2 +
 src/i18n/fr-ca/index.ts                       |   2 +
 .../components/overview-list-item.vue         |  17 +-
 .../components/overview-list.vue              | 400 +++++++++---------
 .../models/timesheet-overview.models.ts       |  18 +-
 src/pages/dashboard-page.vue                  |   9 +-
 src/utils/date-and-time-utils.ts              |  26 +-
 7 files changed, 247 insertions(+), 227 deletions(-)

diff --git a/src/i18n/en-ca/index.ts b/src/i18n/en-ca/index.ts
index 1ba8913..13d1ea3 100644
--- a/src/i18n/en-ca/index.ts
+++ b/src/i18n/en-ca/index.ts
@@ -285,6 +285,8 @@ export default {
             verified: "approved",
             unverified: "pending",
             inactive: "inactive",
+            filter_active: "show only active employees",
+            filter_team: "",
         },
         tooltip: {
             button_detailed_view: "detailed view",
diff --git a/src/i18n/fr-ca/index.ts b/src/i18n/fr-ca/index.ts
index 698baeb..0bd4799 100644
--- a/src/i18n/fr-ca/index.ts
+++ b/src/i18n/fr-ca/index.ts
@@ -286,6 +286,8 @@ export default {
             verified: "approuvé",
             unverified: "à vérifier",
             inactive: "inactif",
+            filter_active: "",
+            filter_team: "",
         },
         tooltip: {
             button_detailed_view: "vue détaillée",
diff --git a/src/modules/timesheet-approval/components/overview-list-item.vue b/src/modules/timesheet-approval/components/overview-list-item.vue
index 30b257b..5e9201b 100644
--- a/src/modules/timesheet-approval/components/overview-list-item.vue
+++ b/src/modules/timesheet-approval/components/overview-list-item.vue
@@ -3,6 +3,7 @@
     lang="ts"
 >
     import type { TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+import { getHoursMinutesStringFromHoursFloat, getMinutes } from 'src/utils/date-and-time-utils';
 
     const modelApproval = defineModel<boolean>();
 
@@ -15,18 +16,6 @@
         'clickDetails': [overview: TimesheetApprovalOverview];
         'clickApprovalAll' : [is_approved: boolean];
     }>();
-
-    const getMinutes = (hours: number) => {
-        const minutes_percent = hours - Math.floor(hours);
-        const minutes = Math.round(minutes_percent * 60);
-        return minutes > 1 ? minutes.toString() : '0';
-    }
-
-    const getHoursMinutesString = (hours: number): string => {
-        const flat_hours = Math.floor(hours);
-        const minutes = Math.round((hours - flat_hours) * 60);
-        return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
-    }
 </script>
 
 <template>
@@ -95,7 +84,7 @@
                                 <span
                                     class="text-weight-bolder text-h3 q-py-none"
                                     :class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : ''"
-                                > {{ getHoursMinutesString(row.regular_hours) }} </span>
+                                > {{ getHoursMinutesStringFromHoursFloat(row.regular_hours) }} </span>
                                 <q-separator class="q-mr-sm" />
                             </div>
 
@@ -116,7 +105,7 @@
                                     <span
                                         class="text-weight-bolder q-pa-none q-mb-xs"
                                         style="font-size: 1.2em; line-height: 1em;"
-                                    > {{ getHoursMinutesString(hour_type) }} </span>
+                                    > {{ getHoursMinutesStringFromHoursFloat(hour_type) }} </span>
                                 </div>
                             </div>
                         </div>
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index ae2f31f..864e7ae 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -13,23 +13,28 @@
     import { useAuthStore } from 'src/stores/auth-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { overview_column_names, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { overview_column_names, OverviewColumns, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
 
     const auth_store = useAuthStore();
     const timesheet_store = useTimesheetStore();
     const timesheet_approval_api = useTimesheetApprovalApi();
 
-    const visible_columns = ref<string[]>([
-        overview_column_names.REGULAR,
-        overview_column_names.EVENING,
-        overview_column_names.EMERGENCY,
-        overview_column_names.SICK,
-        overview_column_names.VACATION,
-        overview_column_names.HOLIDAY,
-        overview_column_names.OVERTIME,
-        overview_column_names.IS_APPROVED,
+    const TIME_COLUMNS: OverviewColumns[] = ['REGULAR', 'EVENING', 'EMERGENCY', 'OVERTIME', 'HOLIDAY', 'VACATION'];
+    const VISIBLE_COLUMNS = ref<OverviewColumns[]>([
+        'employee_first_name',
+        'REGULAR',
+        'EVENING',
+        'EMERGENCY',
+        'OVERTIME',
+        'HOLIDAY',
+        'VACATION',
+        'expenses',
+        'mileage',
+        'is_approved',
     ]);
+
     const is_showing_filters = ref(false);
     const search_string = ref('');
 
@@ -60,7 +65,7 @@
         }
 
         if (terms.is_showing_team_only) {
-            result = result.filter(row => row.supervisor !== null && row.supervisor.email === (auth_store.user ? auth_store.user.email : '') );
+            result = result.filter(row => row.supervisor !== null && row.supervisor.email === (auth_store.user ? auth_store.user.email : ''));
         }
 
         if (terms.name_search_string.length > 0) {
@@ -77,206 +82,209 @@
 <template>
     <div class="q-px-md full-height">
         <LoadingOverlay v-model="timesheet_store.is_loading" />
-        <transition
-            appear
-            enter-active-class="animated fadeInUp"
-            leave-active-class="animated fadeOutDown"
-            mode="out-in"
+
+        <q-table
+            :key="timesheet_store.is_approval_grid_mode ? 'grid' : 'list'"
+            :visible-columns="VISIBLE_COLUMNS"
+            :rows="overview_rows"
+            :columns="pay_period_overview_columns"
+            row-key="email"
+            :grid="timesheet_store.is_approval_grid_mode"
+            :dense="timesheet_store.is_approval_grid_mode"
+            hide-pagination
+            :pagination="{ sortBy: 'is_active' }"
+            :filter="overview_filters"
+            :filter-method="filterEmployeeRows"
+            color="accent"
+            :rows-per-page-options="[0]"
+            card-container-class="justify-center"
+            class="bg-transparent"
+            :class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
+            table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15 hide-scrollbar"
+            :no-data-label="$t('shared.error.no_data_found')"
+            :no-results-label="$t('shared.error.no_search_results')"
+            :loading-label="$t('shared.label.loading')"
+            :style="$q.platform.is.mobile ? '' : 'max-height: 70vh;'"
         >
-            <q-table
-                :key="timesheet_store.is_approval_grid_mode ? 'grid' : 'list'"
-                :visible-columns="visible_columns"
-                :rows="overview_rows"
-                :columns="pay_period_overview_columns"
-                row-key="email"
-                :grid="timesheet_store.is_approval_grid_mode"
-                :dense="timesheet_store.is_approval_grid_mode"
-                hide-pagination
-                :pagination="{ sortBy: 'is_active' }"
-                :filter="overview_filters"
-                :filter-method="filterEmployeeRows"
-                color="accent"
-                :rows-per-page-options="[0]"
-                card-container-class="justify-center"
-                class="bg-transparent"
-                :class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
-                table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
-                :no-data-label="$t('shared.error.no_data_found')"
-                :no-results-label="$t('shared.error.no_search_results')"
-                :loading-label="$t('shared.label.loading')"
-            >
-                <template #top>
-                    <div class="column full-width">
+            <template #top>
+                <div class="column full-width">
+
+                    <div
+                        class="col-auto row items-start full-width q-px-lg"
+                        :class="$q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md'"
+                    >
+                        <PayPeriodNavigator
+                            @date-selected="timesheet_approval_api.getTimesheetOverviews"
+                            @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
+                            @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
+                            :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
+                            style="height: 40px;"
+                        />
+
+                        <q-space />
 
                         <div
-                            class="col-auto row items-start full-width q-px-lg"
-                            :class="($q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
+                            class="col-auto row no-wrap items-start"
+                            :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
                         >
-                            <PayPeriodNavigator
-                                @date-selected="timesheet_approval_api.getTimesheetOverviews"
-                                @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
-                                @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
-                                :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
+                            <q-btn-toggle
+                                v-model="timesheet_store.is_approval_grid_mode"
+                                push
+                                rounded
+                                color="white"
+                                text-color="accent"
+                                toggle-color="accent"
+                                class="col-auto"
+                                :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
+                                :options="[
+                                    { icon: 'grid_view', value: true },
+                                    { icon: 'view_list', value: false },
+                                ]"
                                 style="height: 40px;"
                             />
 
-                            <q-space />
-
-                            <div
-                                class="col-auto row no-wrap items-start"
-                                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
-                            >
-                                <q-btn-toggle
-                                    v-model="timesheet_store.is_approval_grid_mode"
-                                    push
-                                    rounded
-                                    color="white"
-                                    text-color="accent"
-                                    toggle-color="accent"
-                                    class="col-auto"
-                                    :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
-                                    :options="[
-                                        { icon: 'grid_view', value: true },
-                                        { icon: 'view_list', value: false },
-                                    ]"
-                                    style="height: 40px;"
-                                />
-
-                                <q-btn
-                                    push
-                                    rounded
-                                    icon="download"
-                                    color="accent"
-                                    :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
-                                    class="col-auto q-mr-sm"
-                                    style="height: 40px;"
-                                    @click="timesheet_store.is_report_dialog_open = true"
-                                />
-
-                                <QTableFilters
-                                    v-model:search="search_string"
-                                    class="col-auto q-mb-sm"
-                                />
-
-                                <q-btn
-                                    flat
-                                    icon="filter_alt"
-                                    color="white"
-                                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
-                                    class="col q-ml-sm self-stretch bg-primary"
-                                    style="border-radius: 5px 5px 0 0;"
-                                    @click="is_showing_filters = !is_showing_filters"
-                                />
-                            </div>
-                        </div>
-
-                        <q-slide-transition>
-                            <OverviewListFilters
-                                v-if="is_showing_filters"
-                                v-model:filters="overview_filters"
-                                class="q-mx-lg col-auto"
+                            <q-btn
+                                push
+                                rounded
+                                icon="download"
+                                color="accent"
+                                :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
+                                class="col-auto q-mr-sm"
+                                style="height: 40px;"
+                                @click="timesheet_store.is_report_dialog_open = true"
                             />
-                        </q-slide-transition>
 
-                        <q-separator
-                            color="primary"
-                            size="5px"
-                            class="q-mx-lg q-my-none q-pa-none"
-                        />
+                            <QTableFilters
+                                v-model:search="search_string"
+                                class="col-auto q-mb-sm"
+                            />
+
+                            <q-btn
+                                flat
+                                icon="filter_alt"
+                                color="white"
+                                :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                                class="col q-ml-sm self-stretch bg-primary"
+                                style="border-radius: 5px 5px 0 0;"
+                                @click="is_showing_filters = !is_showing_filters"
+                            />
+                        </div>
                     </div>
-                </template>
 
-                <template #header="props">
-                    <q-tr
-                        :props="props"
-                        class="bg-primary"
-                    >
-                        <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                        >
-                            <span class="text-uppercase text-weight-bolder text-white">
-                                {{ $t(col.label) }}
-                            </span>
-                        </q-th>
-                    </q-tr>
-                </template>
+                    <q-slide-transition>
+                        <OverviewListFilters
+                            v-if="is_showing_filters"
+                            v-model:filters="overview_filters"
+                            class="q-mx-lg col-auto"
+                        />
+                    </q-slide-transition>
 
-                <template #body-cell="props">
-                    <q-td
-                        :props="props"
-                        class="text-weight-medium"
-                    >
-                        <transition
-                            appear
-                            enter-active-class="animated fadeInUp slow"
-                            leave-active-class="animated fadeOutDown"
-                            mode="out-in"
-                        >
-                            <div
-                                :key="props.rowIndex + (timesheet_store.pay_period?.pay_period_no ?? 0)"
-                                class="rounded-5"
-                                style="font-size: 1.2em;"
-                                :style="`animation-delay: ${props.rowIndex / 30}s;`"
-                            >
-                                <transition
-                                    v-if="props.col.name === 'is_approved'"
-                                    enter-active-class="animated swing"
-                                    mode="out-in"
-                                >
-                                    <q-btn
-                                        :key="props.row.is_approved"
-                                        flat
-                                        dense
-                                        :icon="props.value ? 'lock' : 'lock_open'"
-                                        :color="props.value ? 'white' : 'grey-5'"
-                                        class="rounded-5 "
-                                        :class="props.value ? 'bg-accent' : ''"
-                                        @click.stop="props.row.is_approved = !props.row.is_approved"
-                                    />
-                                </transition>
-
-                                <div v-else-if="props.col.name === 'employee_name'">
-                                    <span class="text-h5 text-uppercase text-accent q-mr-xs">
-                                        {{ props.value.split(' ')[0] }}
-                                    </span>
-                                    <span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1]
-                                    }}</span>
-                                </div>
-                                <span v-else>{{ props.value }}</span>
-                            </div>
-                        </transition>
-                    </q-td>
-                </template>
-
-                <!-- Template for individual employee cards -->
-                <template #item="props: { row: TimesheetApprovalOverview, rowIndex: number }">
-                    <OverviewListItem
-                        v-model="props.row.is_approved"
-                        :key="props.row.email + timesheet_store.pay_period?.pay_period_no"
-                        :index="props.rowIndex"
-                        :row="props.row"
-                        @click-details="onClickedDetails"
-                        @click-approval-all="is_approved => onClickApproveAll(props.row.email, is_approved)"
+                    <q-separator
+                        color="primary"
+                        size="5px"
+                        class="q-mx-lg q-my-none q-pa-none"
                     />
-                </template>
+                </div>
+            </template>
 
-                <!-- Template for custome failed-to-load state -->
-                <template #no-data="{ message, filter }">
-                    <div class="full-width column items-center text-accent q-gutter-sm">
-                        <q-icon
-                            size="4em"
-                            :name="filter ? 'filter_alt_off' : 'error_outline'"
-                        />
-
-                        <span class="text-h6">
-                            {{ message }}
+            <template #header="props">
+                <q-tr
+                    :props="props"
+                    class="bg-primary"
+                >
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                    >
+                        <span class="text-uppercase text-weight-bolder text-white">
+                            {{ $t(col.label) }}
                         </span>
-                    </div>
-                </template>
-            </q-table>
-        </transition>
+                    </q-th>
+                </q-tr>
+            </template>
+
+            <template #body-cell="props">
+                <q-td
+                    :props="props"
+                    class="text-weight-medium"
+                >
+                    <transition
+                        appear
+                        enter-active-class="animated fadeInUp slow"
+                        leave-active-class="animated fadeOutDown"
+                        mode="out-in"
+                    >
+                        <div
+                            :key="props.rowIndex + (timesheet_store.pay_period?.pay_period_no ?? 0)"
+                            class="rounded-5"
+                            style="font-size: 1.2em;"
+                            :style="`animation-delay: ${props.rowIndex / 30}s;`"
+                        >
+                            <transition
+                                v-if="props.col.name === 'is_approved'"
+                                enter-active-class="animated swing"
+                                mode="out-in"
+                            >
+                                <q-btn
+                                    :key="props.row.is_approved"
+                                    flat
+                                    dense
+                                    :icon="props.value ? 'lock' : 'lock_open'"
+                                    :color="props.value ? 'white' : 'grey-5'"
+                                    class="rounded-5 "
+                                    :class="props.value ? 'bg-accent' : ''"
+                                    @click.stop="onClickApproveAll(props.row.email, props.row.is_approved)"
+                                />
+                            </transition>
+
+                            <div v-else-if="props.col.name === 'employee_first_name'">
+                                <span class="text-h5 text-uppercase text-accent q-mr-xs">
+                                    {{ props.value }}
+                                </span>
+                                <span class="text-uppercase text-weight-light">
+                                    {{ props.row.employee_last_name }}
+                                </span>
+                            </div>
+
+                            <span
+                                v-else
+                                :class="props.col.name === overview_column_names.REGULAR && props.row.overtime > 0 ? 'text-negative text-weight-bolder' : 'text-weight-regular'"
+                            >
+                                {{ TIME_COLUMNS.includes(props.col.name) ?
+                                    getHoursMinutesStringFromHoursFloat(props.value) : props.value }}
+                            </span>
+                        </div>
+                    </transition>
+                </q-td>
+            </template>
+
+            <!-- Template for individual employee cards -->
+            <template #item="props: { row: TimesheetApprovalOverview, rowIndex: number }">
+                <OverviewListItem
+                    v-model="props.row.is_approved"
+                    :key="props.row.email + timesheet_store.pay_period?.pay_period_no"
+                    :index="props.rowIndex"
+                    :row="props.row"
+                    @click-details="onClickedDetails"
+                    @click-approval-all="is_approved => onClickApproveAll(props.row.email, is_approved)"
+                />
+            </template>
+
+            <!-- Template for custome failed-to-load state -->
+            <template #no-data="{ message, filter }">
+                <div class="full-width column items-center text-accent q-gutter-sm">
+                    <q-icon
+                        size="4em"
+                        :name="filter ? 'filter_alt_off' : 'error_outline'"
+                    />
+
+                    <span class="text-h6">
+                        {{ message }}
+                    </span>
+                </div>
+            </template>
+        </q-table>
     </div>
 </template>
 
diff --git a/src/modules/timesheet-approval/models/timesheet-overview.models.ts b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
index 90e748a..984f276 100644
--- a/src/modules/timesheet-approval/models/timesheet-overview.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-overview.models.ts
@@ -63,8 +63,11 @@ export interface PayPeriodOverviewFilters {
     name_search_string: string;
 }
 
+export type OverviewColumns = 'employee_first_name' | 'employee_last_name' | 'email' | 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'SICK' | 'HOLIDAY' | 'VACATION' | 'OVERTIME' | 'expenses' | 'mileage' | 'is_approved' | 'is_active'
+
 export const overview_column_names = {
-    EMPLOYEE_NAME: 'employee_name',
+    FIRST_NAME: 'employee_first_name',
+    LAST_NAME: 'employee_last_name',
     EMAIL: 'email',
     REGULAR: 'REGULAR',
     EVENING: 'EVENING',
@@ -81,18 +84,25 @@ export const overview_column_names = {
 
 export const pay_period_overview_columns: QTableColumn[] = [
     { 
-        name: overview_column_names.EMPLOYEE_NAME, 
+        name: overview_column_names.FIRST_NAME, 
         label: 'timesheet_approvals.table.full_name', 
         align: 'left', 
-        field: 'employee_name',
+        field: overview_column_names.FIRST_NAME,
         sortable: true,
         required: true, 
     },
+    { 
+        name: overview_column_names.LAST_NAME, 
+        label: 'timesheet_approvals.table.full_name', 
+        align: 'left', 
+        field: 'employee_last_name',
+        sortable: true,
+    },
     { 
         name: overview_column_names.EMAIL, 
         label: 'timesheet_approvals.table.email',
         align: 'left', 
-        field: 'email', 
+        field: overview_column_names.EMAIL, 
         sortable: true,
     },
     { 
diff --git a/src/pages/dashboard-page.vue b/src/pages/dashboard-page.vue
index bf65226..cd3b577 100644
--- a/src/pages/dashboard-page.vue
+++ b/src/pages/dashboard-page.vue
@@ -70,14 +70,11 @@
             </q-carousel>
         </div>
 
-        <div class="column col flex-center q-pt-md q-pl-md">
-            <div class="col"></div>
-
-            <div class="col-auto row justify-end full-width within-iframe">
+        <div class="column col items-center q-pl-md">
+            <div class="col-auto row justify-end full-width within-iframe" style="height: 50vh;">
                 <iframe
                     title="Environment Canada Weather"
-                    height="100%"
-                    width="100%"
+                    height="400px"
                     src="https://weather.gc.ca/wxlink/wxlink.html?coords=45.159%2C-73.676&lang=e"
                     allowtransparency="true"
                     style="border: 0;"
diff --git a/src/utils/date-and-time-utils.ts b/src/utils/date-and-time-utils.ts
index e7afed9..3f6313d 100644
--- a/src/utils/date-and-time-utils.ts
+++ b/src/utils/date-and-time-utils.ts
@@ -3,13 +3,25 @@ import { date } from 'quasar';
 const anchor_date: Date = new Date('2023-12-17');
 
 export const getCurrentPayPeriod = (today = new Date()): number => {
-  const period_length = 14; // days
-  const periods_per_year = 26;
+    const period_length = 14; // days
+    const periods_per_year = 26;
 
-  const days_since_anchor = date.getDateDiff(today, anchor_date, 'days');
-  const periods_since_anchor = Math.floor(days_since_anchor / period_length);
+    const days_since_anchor = date.getDateDiff(today, anchor_date, 'days');
+    const periods_since_anchor = Math.floor(days_since_anchor / period_length);
 
-  const current_period = (periods_since_anchor % periods_per_year) + 1;
-  
-  return current_period;
+    const current_period = (periods_since_anchor % periods_per_year) + 1;
+
+    return current_period;
+}
+
+export const getMinutes = (hours: number) => {
+    const minutes_percent = hours - Math.floor(hours);
+    const minutes = Math.round(minutes_percent * 60);
+    return minutes > 1 ? minutes.toString() : '0';
+}
+
+export const getHoursMinutesStringFromHoursFloat = (hours: number): string => {
+    const flat_hours = Math.floor(hours);
+    const minutes = Math.round((hours - flat_hours) * 60);
+    return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
 }
\ No newline at end of file