fix(employees): finalize GUI of employee list grid mode

src/modules/employee-list/components/supervisor/supervisor-crew-table-item.vue

@@ -1,35 +1,39 @@
 <script setup lang="ts">
+    /* eslint-disable */
     import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
 
     const props = defineProps<{
         row: EmployeeListTableItem
     }>()
+
+    const getEmployeeAvatar = (first_name: string, last_name: string) => {
+        // add logic here to see if user has an avatar image and return that instead of initials
+        return first_name.charAt(0) + last_name.charAt(0);
+    };
 </script>
 
 <template>
-    <q-btn align="right" outline color="primary" class="q-py-none bg-white col-xs-12 col-sm-6 col-md-4 col-lg-2">
-        <div class="full-width">
-            <div class="text-h6 text-primary text-weight-bold q-pb-none q-pt-sm text-uppercase ellipsis hug-text text-left">
+    <q-card class="rounded-15 bg-white col-xs-6 col-sm-4 col-md-3 col-lg-2 column no-wrap" style="max-width: 230px;">
+        <q-card-section class="text-center col-5">
+            <q-avatar color="primary" size="8em">
+                <img src="src/assets/targo-default-avatar.png" alt="employee avatar" class="q-pa-xs">
+            </q-avatar>
+        </q-card-section>
+        <q-card-section class="text-center text-h6 text-primary text-weight-medium text-uppercase q-pb-none col-2 content-end" style="line-height: 0.7em;">
+            <div class="ellipsis">
                 {{ props.row.first_name }} {{ props.row.last_name }}
                 <q-separator color="primary" />
             </div>
-    
-            <q-card flat square class=" row bg-primary q-my-xs justify-center">
-                <q-card-section class="q-py-xs text-caption text-white">
-                    {{ props.row.job_title }}
-                </q-card-section>
-            </q-card>
-            
-            <div class="q-pt-xs q-pb-sm text-overline text-grey-14 text-lowercase hug-text text-right">
+        </q-card-section>
+        <q-card-section class="text-caption text-grey-8 text-body2 text-uppercase q-pt-none text-center col content-start" style="min-height: 5em;">
+            <div class=" ellipsis-2-lines">
+                {{ props.row.job_title }}
+            </div>
+        </q-card-section>
+        <q-card-section class="bg-primary text-white text-caption text-center q-py-none col-2 content-center ">
+            <div>
                 {{ props.row.email }}    
             </div>
-            
-        </div>
-    </q-btn>
+        </q-card-section>
+    </q-card>
 </template>
-
-<style>
-    .hug-text {
-        line-height: 0.7em;
-    }
-</style>

src/modules/employee-list/components/supervisor/supervisor-crew-table.vue

@@ -37,8 +37,8 @@ const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] =
             :columns="employeeListColumns" 
             row-key="name"
             :rows-per-page-options="[0]"
-            class="q-pa-md rounded-15"
-            card-container-class="q-gutter-sm justify-center q-pa-sm"
+            class="q-pa-md"
+            card-container-class="justify-center q-gutter-md"
             grid
         >
             <template v-slot:item="props">

src/modules/employee-list/pages/supervisor-crew-page.vue

@@ -5,7 +5,7 @@ import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.
 
 <template>
     <q-page>
-        <div class="text-h4 row justify-center q-pt-md text-uppercase text-weight-bolder text-primary">
+        <div class="text-h4 row justify-center q-py-sm q-mt-lg text-uppercase text-weight-bolder text-primary">
             {{ $t('usersListPage.tableHeader') }}
         </div>
         <SupervisorCrewTable />