fix(04): Service

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

@@ -185,7 +185,7 @@ const branchFilter = selectFilterOptionRefMod(
         hide-bottom-space
         type="textarea"
         class="col-12"
-        :label="$t('serviceDetail')"
+        :label="$t('detail')"
         v-model="serviceDescription"
       />
     </div>

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

@@ -18,7 +18,7 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="full-width full-height">
+  <div class="column full-width full-height">
     <div
       class="text-weight-bold text-body1 flex items-center justify-between q-px-md q-py-sm"
       style="background: hsla(var(--info-bg) / 0.1)"
@@ -44,10 +44,10 @@ defineEmits<{
       </q-btn>
     </div>
 
-    <div class="col-12 row q-px-md q-py-xs items-center surface-1 scroll">
+    <div class="col scroll q-px-md q-py-sm flex items-center">
       <div
         v-if="serviceAttributes.additional.length > 0"
-        class="row items-center q-gutter-sm items-center"
+        class="row q-gutter-sm"
       >
         <div
           v-for="(p, index) in serviceAttributes.additional"

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

@@ -4,7 +4,7 @@ import { moveItemUp, moveItemDown, deleteItem, dialog } from 'stores/utils';
 
 import NoData from 'components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
-
+import AddButton from '../button/AddButton.vue';
 import { WorkItems } from 'stores/product-service/types';
 
 const { t } = useI18n();
@@ -50,19 +50,20 @@ function confirmDelete(items: unknown[], index: number) {
 
 <template>
   <div class="column col-12 full-height no-wrap">
-    <div
-      class="app-text-muted row items-start q-pb-md"
-      style="min-height: 40px"
-    >
-      • {{ $t(`workInformation`) }}
-      <q-btn
-        v-if="!readonly"
-        icon="mdi-plus"
-        dense
+    <div class="text-weight-bold text-body1 row items-center q-pb-md">
+      <q-icon
         flat
-        round
-        padding="0"
-        color="primary"
+        size="xs"
+        class="q-pa-sm rounded q-mr-sm"
+        color="info"
+        name="mdi-briefcase-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`workInformation`) }}
+      <AddButton
+        v-if="!readonly"
+        id="btn-add-work"
+        icon-only
         class="q-ml-sm"
         @click="addWork"
       />

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

@@ -230,7 +230,7 @@ function confirmDelete(items: unknown[], index: number) {
 }
 </script>
 <template>
-  <div class="full-width column no-wrap">
+  <div class="full-width full-height column no-wrap">
     <div class="row">
       <q-btn-dropdown
         icon="mdi-plus"