refactor: show expiration date

src/pages/05_quotation/QuotationForm.vue

@@ -721,6 +721,35 @@ const statusQuotationForm = ref<
           </span>
         </span>
       </div>
+
+      <div class="column col-2 " style="gap: 10px;">
+        <div class="row justify-end">
+          <span class="rounded flex flex-center q-pa-xs badge-color">
+            &#128900
+            {{$t('general.laborIdentified')}}
+          </span>
+        </div>
+        <div
+          class="row items-center justify-between surface-1 rounded q-pa-xs"
+          style="height: 40px; border-radius: 40px"
+        >
+          <div class="full-height full-width row">
+            <div
+              class="col-6 flex flex-center"
+              style="
+                color: white;
+                background: linear-gradient(to right, #035aa1 0%, #14ab35 100%);
+                border-radius: 20px;
+                gap: 10px;
+              "
+            >
+              <q-icon name="mdi-calendar-range" />
+              {{$t('quotation.receiptDialog.remain')}}
+            </div>
+            <div class="col-6 flex flex-center"> {{$t('general.day')}}</div>
+          </div>
+        </div>
+      </div>
     </header>
 
     <article
@@ -1665,6 +1694,11 @@ const statusQuotationForm = ref<
   visibility: hidden;
 }
 
+.badge-color {
+  color: hsla(var(--green-6-hsl) / 0.8);
+  background: hsla(var(--green-6-hsl) / 0.1);
+}
+
 .status-color {
   --_color: var(--gray-0);
   border-color: hsla(var(--_color));