refactor: add border

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

@@ -327,8 +327,6 @@ async function openDialog(
     hqId.value = userStore.userOption.hqOpts[0].value;
   }
   if (userStore.userOption.hqOpts.length === 0) {
-    console.log('no hq');
-
     dialog({
       color: 'warning',
       icon: 'mdi-alert',
@@ -1126,6 +1124,23 @@ watch(
                   <div class="row items-center" style="flex-wrap: nowrap">
                     <div style="display: flex">
                       <div class="q-mr-md">
+                        <div
+                          :style="`
+                                  border-radius: 50%;
+                                  border-style: solid;
+                                  border-width: 2px;
+                                  border-color: hsl(var(${
+                                    {
+                                      USER: '--cyan-7-hsl',
+                                      MESSENGER: '--orange-4-hsl',
+                                      DELEGATE: '--red-6-hsl',
+                                      AGENCY: '--pink-8-hsl',
+                                    }[props.row.userType as string] ||
+                                    '--pink-8-hsl'
+                                  }
+                                `"
+                          class="q-pa-xs"
+                        >
                           <q-avatar size="md">
                             <q-img
                               class="text-center"
@@ -1169,6 +1184,7 @@ watch(
                           </q-avatar>
                         </div>
                       </div>
+                    </div>
                     <div class="column">
                       <div class="col ellipsis" style="max-width: 20vw">
                         {{