refactor: add tab status quotation

src/pages/05_quotation/QuotationForm.vue

@@ -665,6 +665,35 @@ function storeDataLocal() {
 
   window.open('/quotation/document-view', '_blank');
 }
+
+const statusQuotationForm = ref<
+  { title: string; status: 'done' | 'doing' | 'waiting' }[]
+>([
+  {
+    title: 'ใบเสนอราคา',
+    status: 'done',
+  },
+  {
+    title: 'ลูกค้าตอบรับ',
+    status: 'done',
+  },
+  {
+    title: 'ใบแจ้งหนี้',
+    status: 'done',
+  },
+  {
+    title: 'ชำระเงิน',
+    status: 'doing',
+  },
+  {
+    title: 'ใบเสร็จรับเงิน',
+    status: 'waiting',
+  },
+  {
+    title: 'เสร็จสิ้น',
+    status: 'waiting',
+  },
+]);
 </script>
 
 <template>
@@ -700,6 +729,25 @@ function storeDataLocal() {
     >
       <section class="col-sm col-12">
         <div class="col q-gutter-y-md">
+          <div
+            class="surface-1 q-pa-sm row"
+            style="border-radius: var(--radius-2); gap: 10px"
+          >
+            <div
+              v-for="value in statusQuotationForm"
+              :key="value.title"
+              class="q-pa-sm bordered status-color"
+              :class="`status-color-${value.status}`"
+              style="min-width: 120px"
+            >
+              <q-icon
+                class="icon-color"
+                :name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
+              />
+              {{ value.title }}
+            </div>
+          </div>
+
           <q-expansion-item
             for="item-up"
             id="item-up"
@@ -860,15 +908,6 @@ function storeDataLocal() {
               </section>
             </template>
             <div class="surface-1 q-pa-md full-width">
-              <span
-                v-if="productServiceList.length > 0"
-                class="text-weight-bold row items-center q-pb-md"
-              >
-                {{
-                  productGroup.find((g) => g.id === selectedProductGroup)
-                    ?.name || '-'
-                }}
-              </span>
               <ProductItem
                 :readonly="readonly"
                 :agent-price="agentPrice"
@@ -1625,4 +1664,26 @@ function storeDataLocal() {
   ) {
   visibility: hidden;
 }
+
+.status-color {
+  --_color: var(--gray-0);
+  border-color: hsla(var(--_color));
+  background: hsla(var(--_color) / 0.05);
+  border-radius: 4px;
+
+  .icon-color {
+    color: hsla(var(--_color));
+  }
+
+  &.status-color-done {
+    --_color: var(--green-5-hsl);
+  }
+  &.status-color-doing {
+    --_color: var(--blue-5-hsl);
+  }
+  &.status-color-waiting {
+    --_color: var(--gray-4-hsl);
+    color: hsla(var(--_color));
+  }
+}
 </style>