feat: number to word

package.json

@@ -22,12 +22,14 @@
     "keycloak-js": "^25.0.4",
     "mime": "^4.0.4",
     "moment": "^2.30.1",
+    "number-to-words": "^1.2.4",
     "open-props": "^1.7.5",
     "pinia": "^2.2.2",
     "quasar": "^2.16.9",
     "signature_pad": "^5.0.2",
     "socket.io-client": "^4.7.5",
     "tesseract.js": "^5.1.1",
+    "thai-baht-text": "^2.0.5",
     "uuid": "^10.0.0",
     "vue": "^3.4.38",
     "vue-i18n": "^9.14.0",
@@ -40,6 +42,7 @@
     "@playwright/test": "^1.46.1",
     "@quasar/app-vite": "2.0.0-beta.19",
     "@types/node": "^20.16.1",
+    "@types/number-to-words": "^1.2.3",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",

src/components/05_quotation/ProductItem.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
+import ThaiBahtText from 'thai-baht-text';
+import { toWords } from 'number-to-words';
 
-import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
 import { QuotationPayload } from 'src/stores/quotations/types';
 import { formatNumberDecimal } from 'stores/utils';
+import { QTableProps } from 'quasar';
 
 defineProps<{
   agentPrice: boolean;
@@ -122,6 +124,11 @@ const columns = [
   },
 ] satisfies QTableProps['columns'];
 
+const EngBahtText = (number: number) => {
+  const [baht, satang] = number.toString().split('.');
+  return `${toWords(baht)} Baht${satang && ` and ${toWords(satang)} Satang`}`;
+};
+
 watch(
   () => summary.value,
   () => {
@@ -244,7 +251,7 @@ watch(
     </div>
 
     <div
-      class="column q-ml-auto text-caption app-text-muted q-pt-md"
+      class="column q-ml-auto text-caption app-text-muted-2 q-pt-md"
       style="width: 15vw"
     >
       <div class="row">
@@ -273,6 +280,16 @@ watch(
         </span>
       </div>
     </div>
+    <span
+      v-if="summary.finalPrice"
+      class="text-caption app-text-muted-2 flex self-end"
+    >
+      ({{
+        $i18n.locale === 'eng'
+          ? EngBahtText(summary.finalPrice)
+          : ThaiBahtText(summary.finalPrice)
+      }})
+    </span>
   </div>
 </template>