feat: receipt (#176)

* feat: receipt

#173

* chore: clean up

---------

Co-authored-by: nwpptrs <jay02499@gmail.com>
Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>

src/i18n/eng.ts

@@ -1198,5 +1198,11 @@ export default {
       PaymentSuccess: 'Payment Success',
       PaymentWait: 'Waiting For Payment',
     },
+    receipt: {
+      title: 'Receipt / Tax Invoice',
+      caption: 'All Receipt / Tax Invoice',
+      dataSum: 'Summary of all receipts/tax invoices',
+      workSheetName: 'Worksheet name',
+    },
   },
 };

src/i18n/tha.ts

@@ -1179,5 +1179,11 @@ export default {
       PaymentSuccess: 'ชำระเงินแล้ว',
       PaymentWait: 'ยังไม่ชำระ',
     },
+    receipt: {
+      title: 'ใบเสร็จรับเงิน/กำกับภาษี',
+      caption: 'ใบเสร็จรับเงิน/กำกับภาษีทั้งหมด',
+      dataSum: 'สรุปใบเสร็จรับเงิน/กำกับภาษีทั้งหมด',
+      workSheetName: 'ชื่อใบงาน',
+    },
   },
 };

src/layouts/DrawerComponent.vue

@@ -157,8 +157,7 @@ onMounted(async () => {
       icon: 'mdi-bank-outline',
       disabled: false,
       children: [
-        { label: 'uploadSlip', route: '', disabled: true },
-        { label: 'receipt', route: '', disabled: true },
+        { label: 'receipt', route: '/receipt' },
         { label: 'creditNote', route: '/credit-note', disabled: true },
         { label: 'debitNote', route: '', disabled: true },
       ],

src/pages/13_receipt/MainPage.vue

@@ -0,0 +1,379 @@
+<script lang="ts" setup>
+// NOTE: Library
+import { computed, onMounted, reactive, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+
+// NOTE:  Components
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import NoData from 'src/components/NoData.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import TableReceipt from './TableReceipt.vue';
+import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
+
+// NOTE: Stores & Type
+import { useNavigator } from 'src/stores/navigator';
+import { columns, hslaColors } from './constants';
+import useFlowStore from 'src/stores/flow';
+import { useRequestList } from 'src/stores/request-list';
+import { usePayment, useReceipt } from 'src/stores/payment';
+import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
+import { Quotation } from 'src/stores/quotations';
+import { useQuasar } from 'quasar';
+
+const navigatorStore = useNavigator();
+const flowStore = useFlowStore();
+const receiptStore = useReceipt();
+const { data, page, pageMax, pageSize } = storeToRefs(receiptStore);
+
+// NOTE: Variable
+const pageState = reactive({
+  hideStat: false,
+  statusFilter: 'None' as 'None' | PaymentDataStatus,
+  inputSearch: '',
+  fieldSelected: [...columns.map((v) => v.name)],
+  gridView: false,
+  total: 0,
+});
+
+const fieldSelectedOption = computed(() => {
+  return columns.map((v) => ({
+    label: v.label,
+    value: v.name,
+  }));
+});
+
+async function fetchList(opts?: { rotateFlowId?: boolean }) {
+  const ret = await receiptStore.getReceiptList({
+    page: page.value,
+    pageSize: pageSize.value,
+    query: pageState.inputSearch,
+  });
+  if (ret) {
+    data.value = ret.result;
+    pageState.total = ret.total;
+    pageMax.value = Math.ceil(ret.total / pageSize.value);
+  }
+
+  if (opts?.rotateFlowId) flowStore.rotate();
+}
+
+function triggerView(opts: { quotationId: string }) {
+  const url = new URL(`/quotation/view?tab=receipt`, window.location.origin);
+
+  localStorage.setItem(
+    'new-quotation',
+    JSON.stringify({
+      quotationId: opts.quotationId,
+      statusDialog: 'info',
+    }),
+  );
+
+  window.open(url.toString(), '_blank');
+}
+const paymentStore = usePayment();
+
+async function viewDocExample(id: string) {
+  const url = await paymentStore.getFlowAccount(id);
+
+  if (url) {
+    window.open(url.data.link, '_blank');
+  }
+}
+
+onMounted(async () => {
+  navigatorStore.current.title = 'receipt.title';
+  navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
+
+  await fetchList({ rotateFlowId: true });
+});
+
+watch(
+  [
+    () => pageState.inputSearch,
+    () => pageState.statusFilter,
+    () => pageSize.value,
+    () => page.value,
+  ],
+  () => fetchList({ rotateFlowId: true }),
+);
+</script>
+<template>
+  <div class="column full-height no-wrap">
+    <!-- SEC: stat -->
+    <section class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('receipt.dataSum') }}
+      <q-badge
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        {{ pageState.total }}
+      </q-badge>
+      <q-btn
+        class="q-ml-sm"
+        icon="mdi-pin-outline"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="pageState.hideStat = !pageState.hideStat"
+        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
+    </section>
+
+    <transition name="slide">
+      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <StatCardComponent
+            labelI18n
+            :branch="[
+              {
+                icon: 'fluent:receipt-money-16-regular',
+                count: pageState.total,
+                label: 'quotation.status.PaymentSuccess',
+                color: 'light-green',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <section class="col surface-1 rounded bordered overflow-hidden">
+      <div class="column full-height">
+        <!-- SEC: header content -->
+        <header
+          class="row surface-3 justify-between full-width items-center bordered-b"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md justify-between full-width">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              :label="$t('general.search')"
+              class="q-mr-md col-12 col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </q-input>
+
+            <div
+              class="row col-12 col-md-5 justify-end"
+              :class="{ 'q-pt-xs': $q.screen.lt.md }"
+              style="white-space: nowrap"
+            >
+              <q-select
+                v-model="pageState.statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                :class="{ 'offset-md-5': pageState.gridView }"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  {
+                    label: $t('general.all'),
+                    value: 'None',
+                  },
+                ]"
+              />
+              <q-select
+                v-if="!pageState.gridView"
+                id="select-field"
+                for="select-field"
+                class="col q-ml-sm"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label: v.label && $t(v.label),
+                  }))
+                "
+                :display-value="$t('general.displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                v-model="pageState.fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="pageState.gridView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
+              >
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : pageState.gridView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : pageState.gridView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+        </header>
+
+        <!-- SEC: body content -->
+        <article
+          v-if="data.length === 0"
+          class="col surface-2 flex items-center justify-center"
+        >
+          <NoData :not-found="!!pageState.inputSearch" />
+        </article>
+        <article v-else class="col surface-2 full-width scroll q-pa-md">
+          <TableReceipt
+            :columns="columns"
+            :rows="data"
+            :grid="pageState.gridView"
+            @view="
+              (data) => triggerView({ quotationId: data.invoice.quotation.id })
+            "
+            @preview="(data) => viewDocExample(data.id)"
+          >
+            <template #grid="{ item }">
+              <div class="col-md-4 col-sm-6 col-12">
+                <QuotationCard
+                  hide-action
+                  :code="item.row.code"
+                  :title="item.row.invoice.quotation.workName"
+                  :status="$t(`invoice.status.${item.row.paymentStatus}`)"
+                  :badge-color="hslaColors[item.row.paymentStatus] || ''"
+                  :custom-data="[
+                    {
+                      label: $t('general.customer'),
+                      value:
+                        item.row.invoice.quotation.customerBranch
+                          .registerName ||
+                        `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
+                    },
+                    {
+                      label: $t('taskOrder.issueDate'),
+                      value: new Date(
+                        item.row.invoice.quotation.createdAt,
+                      ).toLocaleString('th-TH', {
+                        hour12: false,
+                      }),
+                    },
+                    {
+                      label: $t('invoice.paymentDueDate'),
+                      value: new Date(
+                        item.row.invoice.quotation.dueDate,
+                      ).toLocaleDateString('th-TH', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: 'numeric',
+                      }),
+                    },
+                    {
+                      label: $t('quotation.payType'),
+                      value: $t(
+                        `quotation.type.${item.row.invoice.quotation.payCondition}`,
+                      ),
+                    },
+                    {
+                      label: $t('preview.netValue'),
+                      value: item.row.amount,
+                    },
+                  ]"
+                  @view="
+                    () =>
+                      triggerView({
+                        quotationId: item.row.invoice.quotation.id,
+                      })
+                  "
+                  @preview="
+                    () => {
+                      viewDocExample(item.row.invoice.quotation.id);
+                    }
+                  "
+                />
+              </div>
+            </template>
+          </TableReceipt>
+        </article>
+
+        <!-- SEC: footer content -->
+        <footer
+          class="row justify-between items-center q-px-md q-py-sm surface-2"
+          v-if="pageMax > 0"
+        >
+          <div class="col-4">
+            <div class="row items-center no-wrap">
+              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+                {{ $t('general.recordPerPage') }}
+              </div>
+              <div><PaginationPageSize v-model="pageSize" /></div>
+            </div>
+          </div>
+          <div class="col-4 row justify-center app-text-muted">
+            {{
+              $t('general.recordsPage', {
+                resultcurrentPage: data.length,
+                total: pageState.inputSearch ? data.length : pageState.total,
+              })
+            }}
+          </div>
+          <nav class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="page"
+              v-model:max-page="pageMax"
+              :fetch-data="() => fetchList({ rotateFlowId: true })"
+            />
+          </nav>
+        </footer>
+      </div>
+    </section>
+  </div>
+</template>
+<style scoped></style>

src/pages/13_receipt/TableReceipt.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { QTableSlots } from 'quasar';
+import { columns } from './constants';
+
+import { Receipt } from 'src/stores/payment/types';
+import { useReceipt } from 'src/stores/payment';
+
+const receiptStore = useReceipt();
+
+type Data = Receipt;
+
+withDefaults(
+  defineProps<{
+    rows: Data[];
+    readonly?: boolean;
+    flat?: boolean;
+    bordered?: boolean;
+    grid?: boolean;
+    hideHeader?: boolean;
+    buttonDownload?: boolean;
+    buttonDelete?: boolean;
+    hidePagination?: boolean;
+    inTable?: boolean;
+    hideView?: boolean;
+    btnSelected?: boolean;
+
+    imgColumn?: string;
+    customColumn?: string[];
+  }>(),
+  {
+    row: () => [],
+    flat: false,
+    bordered: false,
+    grid: false,
+    hideHeader: false,
+    buttonDownload: false,
+    imgColumn: '',
+    customColumn: () => [],
+  },
+);
+
+defineEmits<{
+  (e: 'preview' | 'view', data: Data): void;
+  (e: 'edit' | 'delete' | 'download', data: Data, index: number): void;
+}>();
+</script>
+
+<template>
+  <q-table
+    :rows-per-page-options="[0]"
+    :rows="rows.map((data, i) => ({ ...data, _index: i }))"
+    :columns
+    :grid
+    bordered
+    flat
+    hide-pagination
+    selection="multiple"
+    card-container-class="q-col-gutter-sm"
+    class="full-width"
+  >
+    <template v-slot:header="props">
+      <q-tr
+        style="background-color: hsla(var(--info-bg) / 0.07)"
+        :props="props"
+      >
+        <q-th v-for="col in columns" :key="col.name" :props="props">
+          {{ $t(col.label) }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template
+      v-slot:body="props: {
+        row: Receipt & { _index: number };
+      } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+    >
+      <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
+        <q-td v-for="col in columns" :align="col.align">
+          <!-- NOTE: custom column will starts with # -->
+          <template v-if="!col.name.startsWith('#')">
+            <span>
+              {{
+                typeof col.field === 'string'
+                  ? props.row[col.field as keyof Receipt]
+                  : col.field(props.row)
+              }}
+            </span>
+          </template>
+          <template v-if="col.name === '#order'">
+            {{
+              col.field(props.row) +
+              (receiptStore.page - 1) * receiptStore.pageSize
+            }}
+          </template>
+          <template v-if="col.name === '#action'">
+            <q-btn
+              :id="`btn-preview-${props.row.invoice.quotation.workName}`"
+              flat
+              dense
+              rounded
+              icon="mdi-play-box-outline"
+              size="12px"
+              :title="$t('preview.doc')"
+              @click.stop="$emit('preview', props.row)"
+            />
+
+            <q-btn
+              :id="`btn-eye-${props.row.invoice.quotation.workName}`"
+              icon="mdi-eye-outline"
+              size="sm"
+              dense
+              round
+              flat
+              @click.stop="$emit('view', props.row)"
+            />
+          </template>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props: { row: Receipt }">
+      <slot name="grid" :item="props" />
+    </template>
+  </q-table>
+</template>
+
+<style lang="scss" scoped>
+:deep(i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon) {
+  color: #ffc224 !important;
+}
+</style>

src/pages/13_receipt/constants.ts

@@ -0,0 +1,95 @@
+import { QTableProps } from 'quasar';
+import { Invoice, Receipt } from 'src/stores/payment/types';
+import { formatNumberDecimal } from 'src/stores/utils';
+import { dateFormatJS } from 'src/utils/datetime';
+
+export const columns = [
+  {
+    name: '#order',
+    align: 'center',
+    label: 'general.order',
+    field: (v: Receipt & { _index: number }) => v._index + 1,
+  },
+
+  {
+    name: 'quotation',
+    align: 'center',
+    label: 'requestList.quotationCode',
+    field: 'code',
+  },
+
+  {
+    name: 'workSheetName',
+    align: 'center',
+    label: 'receipt.workSheetName',
+    field: (v: Receipt) => v.invoice.quotation.workName,
+  },
+
+  {
+    name: 'issueDate',
+    align: 'center',
+    label: 'taskOrder.issueDate',
+    field: (v: Receipt) =>
+      dateFormatJS({
+        date: v.invoice.quotation.createdAt,
+        withTime: true,
+      }),
+  },
+
+  {
+    name: 'value',
+    align: 'center',
+    label: 'preview.value',
+    field: (v: Receipt) => formatNumberDecimal(v.amount, 2),
+  },
+  {
+    name: '#action',
+    align: 'center',
+    label: '',
+    field: (_) => '#action',
+  },
+] as const satisfies QTableProps['columns'];
+
+export const docColumn = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'no',
+  },
+  {
+    name: 'document',
+    align: 'left',
+    label: 'general.document',
+    field: 'document',
+  },
+  {
+    name: 'attachment',
+    align: 'left',
+    label: 'requestList.attachment',
+    field: 'attachment',
+  },
+  {
+    name: 'amount',
+    align: 'center',
+    label: 'general.amount',
+    field: 'amount',
+  },
+  {
+    name: 'documentInSystem',
+    align: 'center',
+    label: 'requestList.documentInSystem',
+    field: 'documentInSystem',
+  },
+  {
+    name: 'status',
+    align: 'center',
+    label: 'general.status',
+    field: 'status',
+  },
+] as const satisfies QTableProps['columns'];
+
+export const hslaColors: Record<string, string> = {
+  PaymentWait: '--orange-5-hsl',
+  PaymentSuccess: '--green-8-hsl',
+};

src/router/routes.ts

@@ -115,6 +115,11 @@ const routes: RouteRecordRaw[] = [
         name: '/Invoice',
         component: () => import('pages/10_invoice/MainPage.vue'),
       },
+      {
+        path: '/receipt',
+        name: 'receipt',
+        component: () => import('pages/13_receipt/MainPage.vue'),
+      },
     ],
   },
 
@@ -168,6 +173,11 @@ const routes: RouteRecordRaw[] = [
     name: 'CreditNoteView',
     component: () => import('pages/11_credit-note/FormPage.vue'),
   },
+  {
+    path: '/receipt/:id',
+    name: 'receiptform',
+    component: () => import('pages/13_receipt/MainPage.vue'),
+  },
 
   // Always leave this as last one,
   // but you can also remove it

src/stores/payment/types.ts

@@ -44,7 +44,16 @@ export type Payment = {
   paymentStatus: string;
   date: Date;
   amount: number;
-  invoice: { id: string; amount: number; installments: { no: number }[] };
+  invoice: {
+    id: string;
+    amount: number;
+    installments: { no: number }[];
+    quotation: Quotation;
+  };
 };
 
+export enum PaymentDataStatus {
+  Success = 'PaymentSuccess',
+  Wait = 'PaymentWait',
+}
 export type Receipt = Payment;