refactor: add id input

src/components/04_product-service/BasicInfoProduct.vue

@@ -97,6 +97,7 @@ watch(
         class="col-md-4 col-12"
         v-model="code"
         id="select-br-id"
+        for="select-br-id"
         option-label="label"
         option-value="value"
         :dense="dense"
@@ -118,6 +119,7 @@ watch(
 
       <q-input
         for="input-name"
+        id="input-name"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -130,6 +132,7 @@ watch(
       />
       <q-input
         for="input-process"
+        id="input-process"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -162,6 +165,7 @@ watch(
         class="col-md-3 col-6"
         v-model="expenseType"
         id="select-br-id"
+        for="select-br-id"
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
@@ -185,6 +189,8 @@ watch(
         <q-field
           class="full-width"
           outlined
+          for="input-detail"
+          id="input-detail"
           :readonly="readonly"
           :borderless="readonly"
           :label="$t('general.detail')"
@@ -216,6 +222,7 @@ watch(
       </div>
       <q-input
         for="input-remark"
+        id="input-remark"
         :dense="dense"
         outlined
         :readonly="readonly"

src/components/04_product-service/BasicInformation.vue

@@ -109,6 +109,7 @@ watch(
         </template>
       </q-select>
       <q-input
+        for="input-code"
         :dense="dense"
         outlined
         readonly
@@ -121,6 +122,7 @@ watch(
         v-model="code"
       />
       <q-input
+        for="input-name"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -133,6 +135,7 @@ watch(
         :rules="[(val: string) => !!val || $t('form.error.required')]"
       />
       <q-input
+        for="input-detail"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -142,7 +145,6 @@ watch(
         :label="$t('general.detail')"
         :model-value="readonly ? detail || '-' : detail"
         @update:model-value="(v) => (typeof v === 'string' ? (detail = v) : '')"
-        :for="`input-detail`"
       />
       <q-input
         :dense="dense"

src/components/04_product-service/PriceDataComponent.vue

@@ -46,6 +46,7 @@ withDefaults(
       >
         <span
           id="btn-include-vat"
+          for="btn-include-vat"
           class="q-px-sm q-mr-lg rounded cursor-pointer"
           :class="{
             dark: $q.dark.isActive,
@@ -58,6 +59,7 @@ withDefaults(
         </span>
         <span
           id="btn-no-include-vat"
+          for="btn-no-include-vat"
           class="q-px-sm rounded cursor-pointer"
           :class="{
             dark: $q.dark.isActive,
@@ -72,6 +74,8 @@ withDefaults(
     </div>
     <div class="col-12 row q-col-gutter-sm">
       <q-input
+        id="input-price"
+        for="input-price"
         v-if="priceDisplay?.price"
         :dense="dense"
         outlined
@@ -85,6 +89,8 @@ withDefaults(
       />
 
       <q-input
+        id="input-agent-price"
+        for="input-agent-price"
         v-if="priceDisplay?.agentPrice"
         :dense="dense"
         outlined
@@ -98,6 +104,8 @@ withDefaults(
       />
 
       <q-input
+        id="input-service-charge"
+        for="input-service-charge"
         v-if="priceDisplay?.serviceCharge"
         :dense="dense"
         outlined

src/components/04_product-service/WorkManagementComponent.vue

@@ -62,6 +62,8 @@ defineEmits<{
 <template>
   <div class="bordered rounded">
     <q-expansion-item
+      for="item-up"
+      id="item-up"
       dense
       switch-toggle-side
       default-opened
@@ -75,6 +77,7 @@ defineEmits<{
             <q-btn
               v-if="!readonly"
               id="btn-work-up-product"
+              for="btn-work-up-product"
               icon="mdi-arrow-up"
               dense
               flat
@@ -86,6 +89,7 @@ defineEmits<{
             <q-btn
               v-if="!readonly"
               id="btn-work-down-product"
+              for="btn-work-down-product"
               icon="mdi-arrow-down"
               dense
               flat
@@ -96,7 +100,7 @@ defineEmits<{
               @click.stop="$emit('moveWorkDown')"
             />
             <div
-              for="select-work-name"
+              :for="`select-work-name-${index + 1}`"
               class="col q-py-sm q-px-md"
               style="background-color: var(--surface-1); z-index: 2"
               @click="() => (readonly ? '' : fetchListOfWork())"
@@ -109,7 +113,6 @@ defineEmits<{
                   }}
                 </span>
               </span>
-
               <q-menu v-if="!readonly" fit anchor="bottom left" self="top left">
                 <q-item>
                   <div class="full-width flex items-center justify-between">
@@ -249,6 +252,7 @@ defineEmits<{
             <q-btn
               v-if="!readonly"
               id="btn-add-work-product"
+              for="btn-add-work-product"
               flat
               dense
               icon="mdi-plus"
@@ -292,6 +296,7 @@ defineEmits<{
                   <q-btn
                     v-if="!readonly && $q.screen.gt.xs"
                     id="btn-product-down"
+                    for="btn-product-down"
                     icon="mdi-arrow-down"
                     dense
                     flat
@@ -420,6 +425,7 @@ defineEmits<{
                 v-if="!readonly"
                 class="q-ml-md"
                 id="btn-delete-work-product"
+                for="btn-delete-work-product"
                 icon="mdi-trash-can-outline"
                 padding="0"
                 dense