@things-factory/tax-invoice 7.0.0-alpha.0 → 7.0.0-alpha.18

package/client/pages/tax-invoice/tax-invoice-detail-popup.ts

@@ -3,7 +3,7 @@ import '@operato/data-grist'
 
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { css, html, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import gql from 'graphql-tag'
@@ -66,10 +66,15 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
             td,
             th {
               padding: 5px;
+              min-width: 60px;
+            }
+            td {
+              padding-left: 8px;
             }
             th.target {
               width: 25px;
               writing-mode: vertical-rl;
+              min-width: unset;
             }
 
             &.supplier {
@@ -149,7 +154,7 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
         <table>
           <tr>
             <th>${i18next.t('field.approval no')}</th>
-            <td>${this.detail.approvalNo}</td>
+            <td>${this.detail?.approvalNo?.replace(/(\S{8})(\S{8})(\S{8})/g, '$1-$2-$3')}</td>
           </tr>
         </table>
       </div>
@@ -168,7 +173,7 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
             <tr>
               <th rowspan="6" class="target">${i18next.t('field.tax invoice supplier')}</th>
               <th>${i18next.t('field.short business registration number')}</th>
-              <td>${this.detail.supplierBusinessRegistrationNumber}</td>
+              <td>${this.detail?.supplierBusinessRegistrationNumber?.replace(/(\d{3})(\d{2})(\d{5})/g, '$1-$2-$3')}</td>
               <th>${i18next.t('field.short branch identification')}</th>
               <td>${this.detail.supplierBranchIdentification}</td>
             </tr>
@@ -196,10 +201,17 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
           </table>
 
           <table class="buyer">
+            <colgroup>
+              <col width="150px" />
+              <col width="18%" />
+              <col width="32%" />
+              <col width="18%" />
+              <col width="32%" />
+            </colgroup>
             <tr>
               <th rowspan="6" class="target">${i18next.t('field.tax invoice buyer')}</th>
               <th>${i18next.t('field.short business registration number')}</th>
-              <td>${this.detail.buyerBusinessRegistrationNumber}</td>
+              <td>${this.detail?.buyerBusinessRegistrationNumber?.replace(/(\d{3})(\d{2})(\d{5})/g, '$1-$2-$3')}</td>
               <th>${i18next.t('field.short branch identification')}</th>
               <td>${this.detail.buyerBranchIdentification}</td>
             </tr>
@@ -247,7 +259,7 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
               <th>${i18next.t('field.remark0')}</th>
             </tr>
             <tr>
-              <td>${this.detail.issueDate}</td>
+              <td>${this.detail.issueDate?.split('T')[0]}</td>
               <td>${this._numberFormat(this.detail.supplyAmount)}</td>
               <td>${this._numberFormat(this.detail.taxAmount)}</td>
               <td>${this.detail.modificationReason}</td>
@@ -285,11 +297,15 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
               item =>
                 html`
                   <tr>
-                    <td>${item.issueDate}</td>
-                    <td>${item.supplyAmount}</td>
-                    <td>${item.taxAmount}</td>
-                    <td>${item.modificationReason}</td>
-                    <td>${item.remark0}</td>
+                    <td>${item.supplyDate.split('-')[1]}</td>
+                    <td>${item.supplyDate.split('-')[2]?.split('T')[0]}</td>
+                    <td>${item.itemName}</td>
+                    <td>${item.specification}</td>
+                    <td>${item.quantity}</td>
+                    <td>${this._numberFormat(item.unitPrice)}</td>
+                    <td>${this._numberFormat(item.supplyPrice)}</td>
+                    <td>${this._numberFormat(item.taxPrice)}</td>
+                    <td>${item.remark}</td>
                   </tr>
                 `
             )}
@@ -340,7 +356,6 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
         query ($id: String!) {
           responses: taxInvoice(id: $id) {
             id
-            name
             category
             approvalNo
             originalApprovalNo
@@ -409,6 +424,19 @@ export class TaxInvoiceDetailPopup extends localize(i18next)(LitElement) {
               name
             }
             updatedAt
+
+            taxInvoiceItems {
+              id
+              sequence
+              supplyDate
+              itemName
+              specification
+              quantity
+              unitPrice
+              supplyPrice
+              taxPrice
+              remark
+            }
           }
         }
       `,

package/client/pages/tax-invoice/tax-invoice-list-page.ts

@@ -1,47 +1,84 @@
 import '@operato/data-grist'
 
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView, navigate, store } from '@operato/shell'
+import { PageView } from '@operato/shell'
 import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, state, query } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { DataGrist, FetchOption } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
-import { OxPopup, OxPrompt } from '@operato/popup'
+import { OxPrompt } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 
 import './tax-invoice-detail-popup'
 
+export enum Category {
+  EXPORT = '10',
+  IMPORT = '20',
+  NTS = '30'
+}
 export const CATEGORY = {
-  '10': '매출',
-  '20': '매입',
-  '30': 'NTS'
+  [Category.EXPORT]: '매출',
+  [Category.IMPORT]: '매입',
+  [Category.NTS]: 'NTS'
 }
 
+export enum InvoiceType {
+  'TAX_INVOICE' = '0101',
+  'SMALL_BUSINESS_TAX_INVOICE' = '0102',
+  'CONSIGNMENT_TAX_INVOICE' = '0103',
+  'SMALL_BUSINESS_CONSIGNMENT_TAX_INVOICE' = '0105',
+  'REVISED_TAX_INVOICE' = '0201',
+  'REVISED_SMALL_BUSINESS_TAX_INVOICE' = '0202',
+  'REVISED_CONSIGNMENT_TAX_INVOICE' = '0203',
+  'REVISED_IMPORT_TAX_INVOICE' = '0204',
+  'REVISED_SMALL_BUSINESS_CONSIGNMENT_TAX_INVOICE' = '0205',
+  'INVOICE' = '0301',
+  'CONSIGNMENT_INVOICE' = '0303',
+  'IMPORT_INVOICE' = '0304',
+  'REVISED_INVOICE' = '0401',
+  'REVISED_CONSIGNMENT_INVOICE' = '0403',
+  'REVISED_IMPORT_INVOICE' = '0404'
+}
 export const INVOICE_TYPE = {
-  '0101': '일반 세금계산서',
-  '0102': '영세율 세금계산서',
-  '0103': '위수탁 세금계산서',
-  '0105': '영세율 위수탁 세금계산서',
-  '0201': '수정 일반 세금계산서',
-  '0202': '수정 영세율 세금계산서',
-  '0203': '수정 위수탁 세금계산서',
-  '0204': '수정 수입 세금계산서',
-  '0205': '수정 영세율 위수탁 세금계산서',
-  '0301': '일반 계산서',
-  '0303': '위수탁 계산서',
-  '0304': '수입 계산서',
-  '0401': '수정 일반 계산서',
-  '0403': '수정 위수탁 계산서',
-  '0404': '정 수입 계산서'
+  [InvoiceType.TAX_INVOICE]: '일반 전자세금계산서',
+  [InvoiceType.SMALL_BUSINESS_TAX_INVOICE]: '영세율 전자세금계산서',
+  [InvoiceType.CONSIGNMENT_TAX_INVOICE]: '위수탁 전자세금계산서',
+  [InvoiceType.SMALL_BUSINESS_CONSIGNMENT_TAX_INVOICE]: '영세율 위수탁 전자세금계산서',
+  [InvoiceType.REVISED_TAX_INVOICE]: '수정 일반 전자세금계산서',
+  [InvoiceType.REVISED_SMALL_BUSINESS_TAX_INVOICE]: '수정 영세율 전자세금계산서',
+  [InvoiceType.REVISED_CONSIGNMENT_TAX_INVOICE]: '수정 위수탁 전자세금계산서',
+  [InvoiceType.REVISED_IMPORT_TAX_INVOICE]: '수정 수입 전자세금계산서',
+  [InvoiceType.REVISED_SMALL_BUSINESS_CONSIGNMENT_TAX_INVOICE]: '수정 영세율 위수탁 전자세금계산서',
+  [InvoiceType.INVOICE]: '일반 전자계산서',
+  [InvoiceType.CONSIGNMENT_INVOICE]: '위수탁 전자계산서',
+  [InvoiceType.IMPORT_INVOICE]: '수입 전자계산서',
+  [InvoiceType.REVISED_INVOICE]: '수정 일반 전자계산서',
+  [InvoiceType.REVISED_CONSIGNMENT_INVOICE]: '수정 위수탁 전자계산서',
+  [InvoiceType.REVISED_IMPORT_INVOICE]: '수정 수입 전자계산서'
 }
 
+export enum Purpose {
+  RECEIPT = '01',
+  INVOICE = '02'
+}
 export const PURPOSE = {
-  '01': '영수',
-  '02': '청구'
+  [Purpose.RECEIPT]: '영수',
+  [Purpose.INVOICE]: '청구'
+}
+
+export enum BusinessRegistrationCategory {
+  BUSINESS_REGISTRATION_NUMBER = '01', // 사업자등록번호
+  RESIDENT_REGISTRATION_NUMBER = '02', // 주민등록번호
+  FOREIGNER_REGISTRATION_NUMBER = '03' // 외국인등록번호
+}
+export const BUSINESS_REGISTRATION_CATEGORY = {
+  [BusinessRegistrationCategory.BUSINESS_REGISTRATION_NUMBER]: '사업자등록번호',
+  [BusinessRegistrationCategory.RESIDENT_REGISTRATION_NUMBER]: '주민등록번호',
+  [BusinessRegistrationCategory.FOREIGNER_REGISTRATION_NUMBER]: '외국인'
 }
 
 @customElement('tax-invoice-list-page')
@@ -52,17 +89,43 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
     css`
       :host {
         display: flex;
+        flex-direction: column;
 
         width: 100%;
 
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
       }
+
+      div.summary {
+        display: grid;
+        grid-template-columns: 0.7fr 1fr 0.7fr 1fr 0.7fr 1fr 0.7fr 1fr;
+        border: solid #d3dbe5;
+        border-width: 2px 0;
+        margin: 15px 40px;
+        align-content: center;
+
+        span.title {
+          background-color: #e9edf6;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 35px;
+          font-weight: bold;
+        }
+        span.value {
+          padding-left: 10px;
+          display: flex;
+          align-items: center;
+          height: 35px;
+        }
+      }
     `
   ]
 
   @property({ type: Object }) gristConfig: any
-  @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+  @state() summary: { cnt: number; total_amount: number; supply_amount: number; tax_amount: number } | null = null
 
   @query('ox-grist') private grist!: DataGrist
 
@@ -72,9 +135,9 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
       help: 'tax-invoice/tax-invoice',
       actions: [
         {
-          title: i18next.t('button.delete'),
-          action: this._deleteTaxInvoice.bind(this),
-          ...CommonButtonStyles.delete
+          title: i18next.t('button.memo save'),
+          action: this._updateTaxInvoice.bind(this),
+          ...CommonButtonStyles.save
         }
       ],
       exportable: {
@@ -87,8 +150,20 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
 
   render() {
     const mode = 'GRID'
+    const summary = this.summary
 
     return html`
+      <div class="summary">
+        <span class="title">${i18next.t('field.summary total count')}</span>
+        <span class="value">${this._numberFormat(summary?.cnt)}</span>
+        <span class="title">${i18next.t('field.summary total amount')}</span>
+        <span class="value">${this._numberFormat(summary?.total_amount)}</span>
+        <span class="title">${i18next.t('field.summary supply amount')}</span>
+        <span class="value">${this._numberFormat(summary?.supply_amount)}</span>
+        <span class="title">${i18next.t('field.summary tax amount')}</span>
+        <span class="value">${this._numberFormat(summary?.tax_amount)}</span>
+      </div>
+
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
@@ -97,7 +172,6 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
         </div>
       </ox-grist>
     `
-    // <button @click=${() => this.createTaxInvoice('3')}>생성</button>
   }
 
   async pageInitialized(lifecycle: any) {
@@ -117,8 +191,8 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
         },
         {
           type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
+          name: 'memo',
+          header: i18next.t('field.memo'),
           record: {
             editable: true
           },
@@ -131,8 +205,31 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
           header: i18next.t('field.tax invoice category'),
           record: {
             renderer: value => CATEGORY[value],
+            classifier: function (record, rowIndex) {
+              return {
+                emphasized: record.category === Category.EXPORT ? ['#c6daf6', 'black'] : ['#fedbde', 'black']
+              }
+            },
             align: 'center'
           },
+          filter: {
+            type: 'select',
+            value: Category.EXPORT,
+            options: () => [
+              {
+                display: '전체',
+                value: ''
+              },
+              {
+                display: '매출',
+                value: Category.EXPORT
+              },
+              {
+                display: '매입',
+                value: Category.IMPORT
+              }
+            ]
+          },
           width: 80
         },
         {
@@ -162,7 +259,8 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
           name: 'supplierBusinessRegistrationNumber',
           header: i18next.t('field.supplier business registration number'),
           record: {
-            align: 'center'
+            align: 'center',
+            renderer: value => value.replace(/(\d{3})(\d{2})(\d{5})/g, '$1-$2-$3')
           },
           width: 150
         },
@@ -189,7 +287,7 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
           name: 'totalAmount',
           header: i18next.t('field.total amount'),
           record: {
-            renderer: value => value && new Intl.NumberFormat('en-US').format(value),
+            renderer: value => value && this._numberFormat(value),
             align: 'center'
           },
           width: 90
@@ -199,7 +297,7 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
           name: 'supplyAmount',
           header: i18next.t('field.supply amount'),
           record: {
-            renderer: value => value && new Intl.NumberFormat('en-US').format(value),
+            renderer: value => value && this._numberFormat(value),
             align: 'center'
           },
           width: 90
@@ -209,7 +307,7 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
           name: 'taxAmount',
           header: i18next.t('field.tax amount'),
           record: {
-            renderer: value => value && new Intl.NumberFormat('en-US').format(value),
+            renderer: value => value && this._numberFormat(value),
             align: 'center'
           },
           width: 90
@@ -219,7 +317,8 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
           name: 'approvalNo',
           header: i18next.t('field.approval no'),
           record: {
-            align: 'center'
+            align: 'center',
+            renderer: value => value.replace(/(\S{8})(\S{8})(\S{8})/g, '$1-$2-$3')
           },
           width: 200
         },
@@ -303,11 +402,11 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
   async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: taxInvoices(filters: $filters, pagination: $pagination, sortings: $sortings) {
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $summaryFilters: [Filter!]) {
+          taxInvoices(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
-              name
+              memo
               category
               issueDate
               signatureDate
@@ -332,50 +431,25 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
             }
             total
           }
+          taxInvoicesSummary(filters: $summaryFilters) {
+            summary
+          }
         }
       `,
       variables: {
         filters,
         pagination: { page, limit },
-        sortings
+        sortings,
+        summaryFilters: filters
       }
     })
 
-    return {
-      total: response.data.responses.total || 0,
-      records: response.data.responses.items || []
-    }
-  }
-
-  async _deleteTaxInvoice() {
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const ids = this.grist.selected.map(record => record.id)
-      if (ids && ids.length > 0) {
-        const response = await client.mutate({
-          mutation: gql`
-            mutation ($ids: [String!]!) {
-              deleteTaxInvoices(ids: $ids)
-            }
-          `,
-          variables: {
-            ids
-          }
-        })
+    // 합계 필드 갱신
+    this.summary = response.data.taxInvoicesSummary.summary
 
-        if (!response.errors) {
-          this.grist.fetch()
-          notify({
-            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-          })
-        }
-      }
+    return {
+      total: response.data.taxInvoices.total || 0,
+      records: response.data.taxInvoices.items || []
     }
   }
 
@@ -415,84 +489,6 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
     }
   }
 
-  async createTaxInvoice(num: string) {
-    const year = '2024'
-    const month = '01'
-    const day = '02'
-    const firstWordOfNum = num.slice(0, 1)
-    const firstWordOfNumNext = String(Number(num.slice(0, 1)) + 1).slice(0, 1)
-    const supplyAmount = 1000000 * Number(firstWordOfNum)
-    const taxAmount = supplyAmount / 10
-
-    const taxInvoice = {
-      name: '설명' + num.repeat(3),
-      category: 10,
-      approvalNo: year + month + day + '-' + firstWordOfNum.repeat(8) + '-' + firstWordOfNum.repeat(8),
-      issueDate: `${year}-${month}-${day}`,
-      signatureDate: `${year}-${month}-${Number(day) + 1}`,
-      invoiceType: '0101',
-      purpose: '02',
-      remark0: '비고' + num.repeat(3),
-      supplierBusinessRegistrationCategory: '01',
-      supplierBusinessRegistrationNumber: `${firstWordOfNum.repeat(3)}-${firstWordOfNum.repeat(2)}-${firstWordOfNum.repeat(5)}`,
-      supplierBusinessName: '공급자 회사명' + firstWordOfNum.repeat(3),
-      supplierRepresentativeName: '공급자 대표자' + firstWordOfNum.repeat(3),
-      supplierAddress: '공급자 주소' + firstWordOfNum.repeat(3),
-      supplierBusinessType: '공급자 업태' + firstWordOfNum.repeat(3),
-      supplierIndustryType: '공급자 업종' + firstWordOfNum.repeat(3),
-      supplierDepartment: '공급자 담당 부서' + firstWordOfNum.repeat(3),
-      supplierContactName: '공급자 담당자명' + firstWordOfNum.repeat(3),
-      supplierContactPhone: `010-${firstWordOfNum.repeat(4)}-${firstWordOfNum.repeat(4)}`,
-      supplierContactEmail: '공급자 담당자 이메일' + firstWordOfNum.repeat(3),
-      supplierContactCellPhone: '공급자 핸드폰 번호' + firstWordOfNum.repeat(3),
-
-      buyerBusinessRegistrationCategory: '01',
-      buyerBusinessRegistrationNumber: `${firstWordOfNumNext.repeat(3)}-${firstWordOfNumNext.repeat(2)}-${firstWordOfNumNext.repeat(5)}`,
-      buyerBusinessName: '공급자 회사명' + firstWordOfNum.repeat(3),
-      buyerRepresentativeName: '공급자 대표자' + firstWordOfNum.repeat(3),
-      buyerAddress: '공급자 주소' + firstWordOfNum.repeat(3),
-      buyerBusinessType: '공급자 업태' + firstWordOfNum.repeat(3),
-      buyerIndustryType: '공급자 업종' + firstWordOfNum.repeat(3),
-      buyer1stDepartment: '공급자 담당 부서 1st' + firstWordOfNum.repeat(3),
-      buyer1stContactName: '공급자 담당자명 1st' + firstWordOfNum.repeat(3),
-      buyer1stContactPhone: `011-${firstWordOfNumNext.repeat(4)}-${firstWordOfNumNext.repeat(4)}`,
-      buyer1stContactEmail: '공급자 담당자 이메일 1st' + firstWordOfNum.repeat(3),
-      buyer1stContactCellPhone: '공급자 핸드폰 번호 1st' + firstWordOfNum.repeat(3),
-      buyer2ndDepartment: '공급자 담당 부서 2nd' + firstWordOfNum.repeat(3),
-      buyer2ndContactName: '공급자 담당자명 2nd' + firstWordOfNum.repeat(3),
-      buyer2ndContactPhone: `022-${firstWordOfNumNext.repeat(4)}-${firstWordOfNumNext.repeat(4)}`,
-      buyer2ndContactEmail: '공급자 담당자 이메일 2nd' + firstWordOfNum.repeat(3),
-      buyer2ndContactCellPhone: '공급자 핸드폰 번호 2nd' + firstWordOfNum.repeat(3),
-
-      paymentAmountCash: 0,
-      paymentAmountCheck: 0,
-      paymentAmountPromissoryNote: 0,
-      paymentAmountAccountsReceivable: 0,
-      supplyAmount: supplyAmount,
-      taxAmount: taxAmount,
-      totalAmount: supplyAmount + taxAmount
-    }
-    const response = await client.mutate({
-      mutation: gql`
-        mutation CreateTaxInvoice($taxInvoice: NewTaxInvoice!) {
-          createTaxInvoice(taxInvoice: $taxInvoice) {
-            id
-          }
-        }
-      `,
-      variables: {
-        taxInvoice
-      }
-    })
-
-    if (!response.errors) {
-      this.grist.fetch()
-      notify({
-        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-      })
-    }
-  }
-
   async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
     const targetFieldSet = new Set(['id', 'name'])
@@ -514,4 +510,6 @@ export class TaxInvoiceListPage extends localize(i18next)(ScopedElementsMixin(Pa
       title: i18next.t('title.tax invoice detail')
     })
   }
+
+  private _numberFormat = (num: number | undefined) => Intl.NumberFormat('en-US').format(num || 0)
 }