From b8c9b8ed7604f4118a8f65ad497ea2dc020365cb Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Mon, 8 Sep 2025 10:00:25 -0400
Subject: [PATCH] feat(details): functional UI for detailed shift display,
 pending approval from higher-ups

---
 ...val-employee-details-shifts-row-header.vue | 91 ++++++++++---------
 ...t-approval-employee-details-shifts-row.vue | 16 ++--
 2 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
index 4cb2735..e907035 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
@@ -1,57 +1,60 @@
 <template>
     <!-- This header component is placed in absolute top in order to keep the timestamps
-     below it centered. As such it must imitate the column width of the shift row below it 
-     as much as possible, hence the empty q-card-sections. -->
+     below it vertically centered in the row. Since being absolute top makes it no longer 
+     follow the alignment of the shift rows below it, it must containt the same elements 
+     as them to remain aligned. -->
     <q-card-section
         horizontal
         class="text-uppercase text-center items-center q-px-xs"
     >   
         <!-- Date widget -->
-        <q-card-section class="q-px-xs q-py-none col-auto" style="width: 75px;"></q-card-section>
+        <q-card-section class="q-px-xs q-py-none col-auto"> <div class="q-px-xs q-py-none" style="width: 75px;"></div></q-card-section>
 
         <!-- shift row itself -->
-        <q-card-section horizontal class="q-px-xs col">
-            <!-- punch-in timestamps -->
-            <q-card-section class="col q-px-xs q-py-none">
-                <q-item-label class="text-weight-bolder text-primary">
-                        {{ $t('shiftColumns.labelIn') }}
-                </q-item-label>
-            </q-card-section>
-    
-            <!-- arrows pointing to punch-out timestamps -->
-            <q-card-section class="col-auto q-pa-none q-mx-sm">
-                <q-icon 
-                    name="double_arrow"
-                    color="transparent"
-                    size="24px"
-                    style="transform: translateX(5px);"
-                />
-                <q-icon 
-                    name="double_arrow"
-                    color="transparent"
-                    size="24px"
-                    style="transform: translateX(-5px);"
-                />
-            </q-card-section>
-    
-            <!-- punch-out timestamps -->
-            <q-card-section class="col q-px-xs q-py-none">
-                <q-item-label class="text-weight-bolder text-primary">
-                    {{ $t('shiftColumns.labelOut') }}
-                </q-item-label>
-            </q-card-section>
-    
-            <!-- shift type badge -->
-            <q-card-section class="col q-pa-none"></q-card-section>
+        <q-card-section class="col q-pa-none">
+            <q-card-section horizontal class="col q-px-xs">
+                <!-- punch-in timestamps -->
+                <q-card-section class="col q-px-xs q-py-none">
+                    <q-item-label class="text-weight-bolder text-primary">
+                            {{ $t('shiftColumns.labelIn') }}
+                    </q-item-label>
+                </q-card-section>
+        
+                <!-- arrows pointing to punch-out timestamps -->
+                <q-card-section class="col-auto q-pa-none q-mx-sm">
+                    <q-icon 
+                        name="double_arrow"
+                        color="transparent"
+                        size="24px"
+                        style="transform: translateX(5px);"
+                    />
+                    <q-icon 
+                        name="double_arrow"
+                        color="transparent"
+                        size="24px"
+                        style="transform: translateX(-5px);"
+                    />
+                </q-card-section>
+        
+                <!-- punch-out timestamps -->
+                <q-card-section class="col q-px-xs q-py-none">
+                    <q-item-label class="text-weight-bolder text-primary">
+                        {{ $t('shiftColumns.labelOut') }}
+                    </q-item-label>
+                </q-card-section>
+        
+                <!-- shift type badge -->
+                <q-card-section class="col column q-pa-none q-gutter-md"><div style="width: 80px;"></div></q-card-section>
 
-            <!-- comment button -->
-            <q-card-section class="col-auto q-pa-none">
-                <q-btn
-                    icon="chat_bubble_outline" 
-                    color="transparent"
-                    flat
-                    class="q-pa-sm"
-                />
+                <!-- comment button -->
+                <q-card-section class="col-auto column q-pa-none">
+                    <q-btn
+                        icon="chat_bubble_outline" 
+                        color="transparent"
+                        flat
+                        class="q-pa-sm col"
+                    />
+                </q-card-section>
             </q-card-section>
         </q-card-section>
     </q-card-section>
diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
index 741360f..ae8b1a9 100644
--- a/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
+++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
@@ -26,7 +26,7 @@
 
 <template>
     <q-card-section 
-        horizontal 
+        horizontal
         class="q-pa-xs text-uppercase text-center items-center"
     >
         <!-- punch-in timestamps -->
@@ -83,30 +83,32 @@
         </q-card-section>
 
         <!-- shift type badge -->
-        <q-card-section class="col q-pa-none">
+        <q-card-section class="col column q-pa-none items-center q-gutter-md">
             <q-badge
                 v-for="shift, index in shifts_or_placeholder"
                 :key="index"
                 :color="shift.type ? getShiftColor(shift.type) : 'transparent'"
                 :label="shift.type || ''"
-                class="text-weight-medium justify-center"
+                class="text-weight-medium justify-center col"
                 style="width: 80px; font-size: 0.8em;"
             />
         </q-card-section>
 
         <!-- comment button -->
-        <q-card-actions
-            class="col-auto q-pa-none"
+        <q-card-section
+            class="col-auto column q-pa-none items-end"
         >
+            <q-space />
             <q-btn
                 v-for="(shift, index) in shifts_or_placeholder" 
                 :key="index" 
                 flat
+                dense
                 :disable="shift.type === ''"
                 icon="chat_bubble_outline" 
                 :color="shift.type === '' ? 'grey-5' : 'grey-8'"
-                class="q-pa-sm"
+                class="q-pa-xs col"
             />
-        </q-card-actions>
+        </q-card-section>
     </q-card-section>
 </template>
\ No newline at end of file