refactor(approvals): slight tweaks to appearance, add title bar, begin making detailed overview

src/i18n/en-ca/index.ts

@@ -23,6 +23,7 @@ export default {
     clearFilter: 'Clear filter',
   },
   navBar: {
+    userMenuHome: 'Homepage',
     userMenuEmployeeList: 'Employee list',
     userMenuShiftValidation: 'Timesheet Approval',
     userMenuProfile: 'Profile',
@@ -301,12 +302,12 @@ export default {
     tableColumnLabelMileage: 'of mileage',
     actionTitle: 'Please save the changes made.',
     actionButton: 'Save',
-    timeSheetStatusVerified: 'Verified',
+    timeSheetStatusVerified: 'approved',
-    timeSheetStatusUnverified: 'Unverified',
+    timeSheetStatusUnverified: 'pending',
-    timeSheetStatus_partial: 'Partial',
+    timeSheetStatusPartial: 'partially approved',
-    timeSheetStatus_complete: 'Complete',
+    timeSheetStatusComplete: 'complete',
-    timeSheetStatus_empty: 'Empty',
+    timeSheetStatusEmpty: 'empty',
-    timeSheetStatus_blocked: 'Blocked',
+    timeSheetStatusBlocked: 'blocked',
     showAllCheckbox: 'Show all',
     accumulatedSicknessTotal: 'Accumulated illnesses',
     consumedSicknessTotal: 'Consumed with illnesses',

src/i18n/fr-ca/index.ts

@@ -162,6 +162,7 @@ export default {
     clearFilter: 'Effacer le filtre',
   },
   navBar: {
+    userMenuHome: 'Accueil',
     userMenuEmployeeList: 'Liste employés',
     userMenuShiftValidation: 'Valider les heures',
     userMenuProfile: 'Profil',
@@ -347,12 +348,12 @@ export default {
     tableColumnLabelMileage: 'de kilométrage',
     actionTitle: 'Veuillez enregistrer les changements effectués.',
     actionButton: 'Enregistrer',
-    timeSheetStatusVerified: 'Vérifié',
+    timeSheetStatusVerified: 'validé',
-    timeSheetStatusUnverified: 'Invérifié',
+    timeSheetStatusUnverified: 'à valider',
-    timeSheetStatus_partial: 'Partiel',
+    timeSheetStatusPartial: 'partiellement validé',
-    timeSheetStatus_complete: 'Complet',
+    timeSheetStatusComplete: 'complet',
-    timeSheetStatus_empty: 'Vide',
+    timeSheetStatusEmpty: 'vide',
-    timeSheetStatus_blocked: 'Bloqué',
+    timeSheetStatusBlocked: 'bloqué',
     showAllCheckbox: 'Afficher tous',
     accumulatedSicknessTotal: 'Accumulées de maladies',
     consumedSicknessTotal: 'Consommées de maladies',

src/modules/shared/components/navigation/right-drawer.vue

@@ -31,6 +31,16 @@ const handleLogout = () => {
         @mouseleave="miniState = true" v-model="uiStore.isRightDrawerOpen">
         <q-scroll-area class="fit">
             <q-list>
+                <!-- Home  -->
+                <q-item v-ripple clickable side @click="goToPageName(RouteNames.DASHBOARD)">
+                    <q-item-section avatar>
+                        <q-icon name="home" color="primary" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label>{{ $t('navBar.userMenuHome') }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+
                 <!-- Timesheet Validation -- Supervisor and Accounting only -->
                 <q-item v-ripple clickable side @click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
                     v-if="hasRequiredRole('supervisor', 'accounting')">

src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue

@@ -27,7 +27,6 @@
 <template>
     <div class="q-pa-md">
         <q-table 
-            :title="$t('timeSheetValidations.tableHeader')" 
             :rows="rows" 
             :columns="columns"
             row-key="employee_id" 
@@ -35,20 +34,35 @@
             v-model:selected="selectedRows" 
             :filter="filter" 
             grid 
-            virtual-scroll
             dense
             :rows-per-page-options="[0]" 
             card-container-class="justify-center q-gutter-md"
         >
-            <template v-slot:top-right>
+            <!-- Top Bar that contains Search, Title, Filters -->
-                <q-input rounded standout="bg-white text-primary" dense debounce="300" v-model="filter"
+            <template v-slot:top>
-                    placeholder="Search" clearable>
+                <q-card flat class="full-width bg-primary row q-px-md">
+                    <!-- Table Title -->
+                    <q-card-section class="q-py-xs">
+                        <div class="text-h4 text-white text-weight-bold">{{$t('timeSheetValidations.tableHeader')}}</div>
+                    </q-card-section>
+                    
+                    <q-space />
+
+                    <!-- Filters toggle -->
+                    <q-btn flat dense class="text-white" label="filters" icon-right="filter_alt" />
+
+                    <!-- Search bar -->
+                     <q-card-section class="q-py-xs">
+                         <q-input rounded standout="bg-white" dense debounce="300" v-model="filter" placeholder="Search" label-color="primary" bg-color="white">
                              <template v-slot:append>
                                  <q-icon name="search" color="primary" />
                              </template>
                          </q-input>
+                     </q-card-section>
+                </q-card>
             </template>
 
+            <!-- Template for individual employee cards -->
             <template v-slot:item="props: { cols: (QTableColumn<PayPeriodEmployeeOverview> & { value: unknown })[], row: PayPeriodEmployeeOverview, selected: boolean }">
                 <div class="q-px-sm q-pb-sm col-xs-6 col-sm-4 col-md-3 col-lg-2 grid-style-transition">
                     <q-card class="rounded-15">
@@ -61,7 +75,7 @@
                         </div>
                         <q-card-section horizontal class="q-pa-sm q-mt-sm" :class="{ 'bg-primary text-white': props.selected}">
                             <q-space />
-                            <!-- TODO: Checkbox should be linked to store's employeeOverview.is_approved, not to table's selected ref!! -->
+                            <!-- TODO: Replace checkbox with simple display of timesheet status (approved/pending/partial/complete/) -->
                             <q-checkbox 
                                 dense 
                                 left-label
@@ -75,7 +89,6 @@
                     </q-card>
                 </div>
             </template>
-
         </q-table>
     </div>
 </template>