refactor: service, package => expansion workflow step

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

@@ -548,9 +548,17 @@ watch(
 
         <!-- properties -->
         <div class="bordered-t">
+          <q-expansion-item
+            default-opened
+            switch-toggle-side
+            header-style="background-color: hsla(var(--info-bg) / 0.1); padding: 4px 16px; min-height: 36.08px"
+            header-class="row items-center q-px-md"
+            expand-icon-class="no-padding"
+            dense
+          >
+            <template #header>
               <div
-            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
+                class="text-weight-medium row justify-between items-center full-width"
-            style="background-color: hsla(var(--info-bg) / 0.1)"
               >
                 <span>
                   {{ $t('flow.processStep') }}
@@ -572,7 +580,7 @@ watch(
                   />
                 </q-btn>
               </div>
-
+            </template>
             <div class="q-py-md q-px-md full-width column">
               <span
                 v-if="
@@ -604,7 +612,8 @@ watch(
                   >
                     <div
                       v-if="
-                      attributes.stepProperties[stepIndex].attributes.length > 0
+                        attributes.stepProperties[stepIndex].attributes.length >
+                        0
                       "
                       class="row q-gutter-sm"
                     >
@@ -649,7 +658,9 @@ watch(
                               stepIndex
                             ].productsId.includes(product.id)
                           "
-                        @click="toggleCheckProductInStep(product.id, stepIndex)"
+                          @click="
+                            toggleCheckProductInStep(product.id, stepIndex)
+                          "
                           size="xs"
                         />
                         {{ product.name }}
@@ -677,7 +688,7 @@ watch(
                 {{ $t('productService.service.noPropertiesYet') }}
               </span>
             </div>
-
+          </q-expansion-item>
           <!-- <div class="q-py-md q-px-md full-width">
             <div
               v-if="attributes.additional.length > 0"