fix(02): table color and map role

src/pages/02_personnel-management/MainPage.vue

@@ -689,6 +689,13 @@ onMounted(async () => {
   flowStore.rotate();
 });
 
+function mapRole(value: string) {
+  const option = userStore.userOption.roleOpts.find(
+    (option) => option.value === value,
+  );
+  return option ? option.label : '-';
+}
+
 watch(
   () => selectorLabel.value,
   async (label) => {
@@ -1152,6 +1159,13 @@ watch(
                   'status-inactive': props.row.status === 'INACTIVE',
                 }"
                 :props="props"
+                :style="
+                  props.rowIndex % 2 !== 0
+                    ? $q.dark.isActive
+                      ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                      : `background: #f9fafc`
+                    : ''
+                "
               >
                 <q-td
                   class="text-center"
@@ -1262,7 +1276,7 @@ watch(
 
                 <q-td v-if="fieldSelected.includes('userRole')">
                   <span class="tags tags__purple">
-                    {{ props.row.userRole || '-' }}
+                    {{ mapRole(props.row.userRole) }}
                   </span>
                 </q-td>