feat: add text truncation with tooltip for unit display in AverageAttendanceDialog

src/pages/dashboard/components/AverageAttendanceDialog.vue

@@ -44,7 +44,12 @@
                 :class="{ 'row-selected': index === selectedIndex }"
                 @click="selectedIndex = index"
               >
-                <span class="text-body2 text-dark">{{ item.unit }}</span>
+                <span class="text-body2 text-dark">
+                  {{ truncate(item.unit, TRUNCATE_LENGTH) }}
+                  <q-tooltip v-if="isTruncated(item.unit)">
+                    {{ item.unit }}
+                  </q-tooltip>
+                </span>
                 <span class="text-body2 text-dark">{{ item.frequency }}%</span>
                 <q-badge
                   :label="item.status"
@@ -70,8 +75,15 @@
 import { ref, computed } from "vue";
 import { useDialogPluginComponent } from "quasar";
 
+import { truncate } from "src/helpers/utils";
+
 defineEmits([...useDialogPluginComponent.emits]);
 
+const TRUNCATE_LENGTH = 30;
+
+const isTruncated = (value) =>
+  String(value ?? "").length > TRUNCATE_LENGTH;
+
 const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
 
 const props = defineProps({