refactor: จัด ข้อมูลของ บริการและสินค้า

src/pages/04_product-service/MainPage.vue

@@ -30,6 +30,9 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 import useFlowStore from 'src/stores/flow';
 import useMyBranchStore from 'src/stores/my-branch';
 
+import { dateFormat } from 'src/utils/datetime';
+import {formatNumberDecimal} from 'src/stores/utils';
+
 const useMyBranch = useMyBranchStore();
 
 const { fetchListOptionBranch } = useMyBranch;
@@ -253,7 +256,7 @@ const tbColumn = {
     },
     {
       name: 'priceInformation',
-      align: 'left',
+      align: 'center',
       label: 'priceInformation',
       field: 'name',
     },
@@ -272,6 +275,12 @@ const tbColumn = {
       label: 'serviceWorkTotal',
       field: (v) => v.work.length,
     },
+    {
+      name: 'createdAt',
+      align: 'left',
+      label: 'createdAt',
+      field: 'createdAt',
+    }
   ],
 } satisfies {
   groupAndType: QTableProps['columns'];
@@ -300,8 +309,8 @@ const tbControl = reactive({
     ],
   },
   service: {
-    fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
+    fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
-    fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
+    fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
   },
 });
 
@@ -1509,7 +1518,7 @@ watch(inputSearchProductAndService, async () => {
                 </q-td>
 
                 <q-td v-if="tbControl.groupAndType.fieldSelected.includes('createdAt')">
-                88585
+                {{dateFormat(props.row.createdAt)}}
                 </q-td>
 
           
@@ -2320,7 +2329,7 @@ watch(inputSearchProductAndService, async () => {
                             margin-bottom: var(--size-2);
                           "
                         >
-                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'orange' : 'green'}`">
+                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'green' : 'orange'}`">
                             <q-icon
                               size="md"
                               style="scale: 0.8"
@@ -2384,7 +2393,37 @@ watch(inputSearchProductAndService, async () => {
                         )
                       "
                     >
-                      price
+
+                    <div class="row tags-color-green  q-gutter-x-md  no-wrap items-center text-right ">
+                      <div class="tags  col-3 column ellipsis-2-lines  " style=" min-width: 50px;">
+                        <div class="col-4">{{$t('salePrice')}}</div>
+                        <div class="col-4 text-weight-bold">{{ formatNumberDecimal(props.row.price || 0 , 2) }}</div>
+
+                      </div>
+                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
+                        <div class="col-4">{{$t('agentPrice')}}</div>
+                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.agentPrice || 0 , 2) }}</div>
+
+                      </div>
+                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
+                        <div class="col-4">{{$t('processingPrice')}}</div>
+                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.processingPrice || 0 , 2) }}</div>
+
+                      </div>
+
+                    </div>
+                     
+                    </q-td>
+
+                       <q-td
+                      v-if="
+                        {
+                          product: tbControl.product.fieldSelected,
+                          service: tbControl.service.fieldSelected,
+                        }[productAndServiceTab].includes( 'createdAt')
+                      "
+                    >
+                      {{  dateFormat(props.row.createdAt) }}
                     </q-td>
                     <q-td>
                       <q-btn
@@ -3280,15 +3319,23 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--orange-5-hsl);
 }
 
-.icon-color-green {
+.icon-color-green  {
   --_color: var(--teal-10-hsl);
 }
 
+.tags-color-green {
+  --_color-tag: var(--teal-10-hsl);
+}
+
+.dark .tags-color-green {
+  --_color-tag: var(--teal-8-hsl);
+}
+
 .dark .icon-color-purple {
   --_color: var(--violet-10-hsl);
 }
 
-.dark .icon-color-green {
+.dark .icon-color-green  {
   --_color: var(--teal-8-hsl);
 }
 
@@ -3327,5 +3374,14 @@ watch(inputSearchProductAndService, async () => {
 
 }
 
+.tags {
+  display: inline-block;
+  color: hsla(var(--_color-tag) / 1);
+  background: hsla(var(--_color-tag) / 0.15);
+  border-radius: var(--radius-2);
+  padding-inline: var(--size-2);
+}
+
+
 </style>
-                                      toggleStatusGroup(props.row
+